material-list

MD3 list — 1/2/3-line items with leading/trailing slots; selection: none / single / multi.

One-line — text only (56dp)

One-line — leading icon + trailing text/icon

Two-line — supporting text (72dp)

Three-line — overline + supporting text (88dp)

Leading avatars

AC BO CS

Multi-select — leading checkboxes

Single-select — expressive variant

Section grouping — full-width & inset dividers

Full-width dividers separate unrelated sections; inset dividers (anchored to the leading icon at 16dp) group related items.

Trailing badges — unread / count indicators

Navigation — href + trailing chevron

Selection log

(none)
Sample usage 
<!-- Plain list -->
<material-list>
  <material-list-item label="Inbox" leading-icon="inbox"></material-list-item>
  <material-list-item label="Starred" leading-icon="star" divider="top"></material-list-item>
</material-list>

<!-- Two-line + trailing action -->
<material-list-item
    label="Notifications"
    supporting-text="3 new this week"
    leading-icon="notifications"
    trailing-icon="chevron_right"></material-list-item>

<!-- Multi-select with leading checkboxes (clicking the row toggles the box) -->
<material-list selection="multi">
  <material-list-item value="unread" label="Unread">
    <material-checkbox slot="leading"></material-checkbox>
  </material-list-item>
  <material-list-item value="starred" label="Starred" selected>
    <material-checkbox slot="leading" checked></material-checkbox>
  </material-list-item>
</material-list>

<!-- Single-select, expressive variant (rounded selection highlight) -->
<material-list selection="single" variant="expressive">
  <material-list-item value="light" label="Light" leading-icon="light_mode" selected></material-list-item>
  <material-list-item value="dark"  label="Dark"  leading-icon="dark_mode"></material-list-item>
</material-list>

<!-- Navigation list — href turns the row into a link -->
<material-list-item href="/settings/account" label="Account"
                    leading-icon="person" trailing-icon="chevron_right"></material-list-item>

<!-- Listen for selection -->
<script>
  document.querySelector('material-list').addEventListener('materialListSelect', e => {
    console.log(e.detail.value, e.detail.checked);
  });
</script>