diff --git a/resources/css/components.css b/resources/css/components.css
index d4462cac..ab39623f 100644
--- a/resources/css/components.css
+++ b/resources/css/components.css
@@ -59,5 +59,7 @@
 @import './components/divider.css';
 @import './components/collapse.css';
 @import './components/card.css';
+@import './components/list-item.css';
+@import './components/list.css';
 
 /* Navigation */
diff --git a/resources/css/components/list-item.css b/resources/css/components/list-item.css
new file mode 100644
index 00000000..d73cbaa5
--- /dev/null
+++ b/resources/css/components/list-item.css
@@ -0,0 +1,237 @@
+/*
+ * <x-list-item>: a headline with what leads it, what supports it and what trails it, one- two- or
+ * three-line by `data-md-lines` (56/72/88px, `ListTokens.kt:180,323,347`, androidx Compose
+ * Material 3, Apache-2.0) — the tallest element sets the height, and a three-line item top-aligns
+ * rather than centring (docs/reference/m3/components-actions-communication-containment.md
+ * § Lists → Specs). Leading/trailing gap and container padding are both `space200` (16px,
+ * `ItemLeadingSpace`/`ItemTrailingSpace`/container padding, C-14).
+ *
+ * `data-md-list-row` (`resources/js/list-rows.js`, shared with `<x-card>` and an application's own
+ * table rows) and `[data-md-list-open]:focus-visible` answer with an 8%/10% on-surface state layer
+ * and a 3px secondary inset ring — excluded on `[data-md-card]`, which draws its own tint through
+ * the shared `md-state-layer` class instead (card.css). `data-md-selected` is M3's selected item,
+ * secondary-container filled, which also dims the description/overline/trailing/icon colour rules
+ * below since they exclude it — the container's own colour takes over by inheritance. A selected
+ * option draws a second cue, a trailing check, so selection is never colour alone (C-03).
+ * `aria-disabled` drops every colour to 38% on-surface and blocks the pointer; the view drops the
+ * item's link entirely rather than leaving a focusable, activatable control behind it (C-02).
+ *
+ * `data-md-list="segmented"` items (M3 Expressive) are `surface` tiles (`ItemSegmentedContainerColor`,
+ * C-21), 4px corners that open to 16px at the list's own ends and while hovered (12px), pressed,
+ * focused or selected (16px) — the specs page's interaction-state expressive shapes (C-22). Leading
+ * icons there are drawn at 20px, not scaled down from 24 — list-item.blade.php passes `size` to
+ * `<x-icon>` from the parent's `@aware(['segmented'])`, so no CSS override is needed here (C-26).
+ *
+ * `data-md-dividers` on the list insets its rule 16px from both ends (`DividerLeadingSpace`/
+ * `DividerTrailingSpace`, C-16) rather than full-bleed.
+ *
+ * Leading media: `data-md-list-item-avatar` is 40px, full corner, initials in primary-container
+ * when it is a `<span>`, an image otherwise; `data-md-list-item-image` is a 56px small-corner
+ * thumbnail; `data-md-list-item-video` is M3's leading video in its two sizes,
+ * `data-md-size="sm"` 100×56px (a two-line item) or `"lg"` 114×64px (a three-line item),
+ * `LeadingVideoSmall`/`LeadingVideoLarge`.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './icon.css';
+
+@layer material.components {
+    [data-md-list-item] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--md-sys-measurement-space200);
+        padding-inline: var(--md-sys-measurement-space200);
+        color: var(--md-sys-color-on-surface);
+    }
+
+    [data-md-list-item][data-md-lines='1'] {
+        min-height: 56px;
+        padding-block: var(--md-sys-measurement-space100);
+    }
+
+    [data-md-list-item][data-md-lines='2'] {
+        min-height: 72px;
+        padding-block: var(--md-sys-measurement-space100);
+    }
+
+    [data-md-list-item][data-md-lines='3'] {
+        min-height: 88px;
+        padding-block: calc((var(--md-sys-measurement-space100) + var(--md-sys-measurement-space200)) / 2);
+        align-items: flex-start;
+    }
+
+    [data-md-list-item][data-md-selected] {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
+    [data-md-list-item][aria-disabled='true'] {
+        pointer-events: none;
+    }
+
+    [data-md-list-item][aria-disabled='true'] :is([data-md-list-item-title], [data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    }
+
+    [data-md-list-item]:not([data-md-selected], [aria-disabled='true']) :is([data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [data-md-list-item-leading],
+    [data-md-list-item-end] {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+    }
+
+    [data-md-list-item-end] {
+        gap: var(--md-sys-measurement-space50);
+    }
+
+    [data-md-list-item-video] {
+        flex-shrink: 0;
+        overflow: hidden;
+        border-radius: var(--md-sys-shape-corner-sm);
+        background-color: var(--md-sys-color-surface-container-highest);
+
+        & > * {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    [data-md-list-item-video][data-md-size='sm'] {
+        width: 100px;
+        height: 56px;
+    }
+
+    [data-md-list-item-video][data-md-size='lg'] {
+        width: 114px;
+        height: 64px;
+    }
+
+    [data-md-list-item-avatar] {
+        flex-shrink: 0;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--md-sys-shape-corner-full);
+        object-fit: cover;
+    }
+
+    span[data-md-list-item-avatar] {
+        display: grid;
+        place-items: center;
+        background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font: var(--md-sys-typescale-title-md);
+        letter-spacing: var(--md-sys-typescale-title-md-tracking);
+    }
+
+    [data-md-list-item-image] {
+        flex-shrink: 0;
+        width: 56px;
+        height: 56px;
+        border-radius: var(--md-sys-shape-corner-sm);
+        object-fit: cover;
+    }
+
+    [data-md-list-item-content] {
+        min-width: 0;
+        flex: 1 1 0%;
+    }
+
+    [data-md-list-item-overline] {
+        font: var(--md-sys-typescale-label-sm);
+        letter-spacing: var(--md-sys-typescale-label-sm-tracking);
+    }
+
+    [data-md-list-item-title] {
+        display: block;
+        overflow: hidden;
+        outline: none;
+        font: var(--md-sys-typescale-body-lg);
+        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    [data-md-list-item-description] {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        font: var(--md-sys-typescale-body-md);
+        letter-spacing: var(--md-sys-typescale-body-md-tracking);
+    }
+
+    [data-md-list-item-trailing] {
+        flex-shrink: 0;
+        font: var(--md-sys-typescale-label-sm);
+        letter-spacing: var(--md-sys-typescale-label-sm-tracking);
+    }
+
+    [data-md-list][data-md-dividers] > [data-md-list-item]:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        inset-inline: var(--md-sys-measurement-space200);
+        bottom: 0;
+        height: 1px;
+        background-color: var(--md-sys-color-outline-variant);
+        pointer-events: none;
+    }
+
+    [data-md-list-row] {
+        cursor: pointer;
+        transition-property: background-color, border-radius;
+        transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
+        transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
+    }
+
+    @media (hover: hover) {
+        [data-md-list-row]:not([data-md-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
+            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+        }
+    }
+
+    [data-md-list-row]:not([data-md-card]):has([data-md-list-open]:focus-visible) {
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: -3px;
+    }
+
+    [data-md-list-row]:not([data-md-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    }
+
+    [data-md-list-row] [data-md-list-open]:focus-visible {
+        outline: none;
+    }
+
+    [data-md-list='segmented'] > [data-md-list-item] {
+        background-color: var(--md-sys-color-surface);
+        border-radius: var(--md-sys-shape-corner-xs);
+    }
+
+    [data-md-list='segmented'] > [data-md-list-item]:first-child {
+        border-start-start-radius: var(--md-sys-shape-corner-lg);
+        border-start-end-radius: var(--md-sys-shape-corner-lg);
+    }
+
+    [data-md-list='segmented'] > [data-md-list-item]:last-child {
+        border-end-start-radius: var(--md-sys-shape-corner-lg);
+        border-end-end-radius: var(--md-sys-shape-corner-lg);
+    }
+
+    @media (hover: hover) {
+        [data-md-list='segmented'] > [data-md-list-item][data-md-list-row]:hover {
+            border-radius: var(--md-sys-shape-corner-md);
+        }
+    }
+
+    [data-md-list='segmented'] > [data-md-list-item]:is([data-md-selected], [data-md-list-row]:active, [data-md-list-row]:has([data-md-list-open]:focus-visible)) {
+        border-radius: var(--md-sys-shape-corner-lg);
+    }
+}
diff --git a/resources/css/components/list.css b/resources/css/components/list.css
index 0122f1ca..882d4679 100644
--- a/resources/css/components/list.css
+++ b/resources/css/components/list.css
@@ -1,163 +1,27 @@
 /*
- * Rows a person can go into (`data-list-row`, resources/js/list-rows.js), and M3 Expressive lists.
+ * <x-list>: `<x-list-item>`s, one under another.
  *
- * A row answers a pointer with M3's state layer — hover 8%, press and focus 10% — but not while the
- * pointer is on one of its own controls, which light only themselves. Hover only under
- * `(hover: hover)`, because a touch screen keeps the last hover after a tap. The opener draws no
- * focus ring inside a row; the row draws it, inset, so keyboard focus shows which row Enter opens.
- * `data-selected` is M3's selected list item, in secondary-container.
+ * Plain by default; `data-md-list="segmented"` is M3 Expressive's list, each item its own surface
+ * tile `space25` (2px) apart (`SegmentedGap`, `ListTokens.kt`, androidx Compose Material 3,
+ * Apache-2.0) — the item's own background, corner and interaction states are list-item.css's,
+ * since they are the item's to draw, not the list's.
  *
- * Unlayered where a component paints its fill as a utility (`<x-card>`): anything in a @layer loses
- * to a utility whatever its specificity.
- *
- * Every selector that paints a row is `:where()`, so they all weigh nothing and the later rule
- * wins: the segmented list's own fill is declared first and a row's state layer, further down,
- * paints over it. Written any other way — outside the layer, or with its real specificity — the
- * fill would beat the state layer and a segmented row would answer nothing.
+ * `selectable`/`selection` switch the container's role between `list` and `listbox`
+ * (list.blade.php; docs/reference/m3/components-actions-communication-containment.md
+ * § Lists → Accessibility, C-03) — a role takes no CSS of its own.
  */
 
-@layer components {
-    /*
-     * M3 Expressive's segmented list gives each item its own container. ListTokens.kt:201 —
-     * `ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`.
-     */
-    :where([data-list='segmented'] > [data-list-item]) {
-        background-color: var(--md-sys-color-surface);
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './list-item.css';
+
+@layer material.components {
+    [data-md-list] {
+        display: flex;
+        flex-direction: column;
     }
 
-    /*
-     * ListTokens.kt:30,36 — `DividerLeadingSpace` and `DividerTrailingSpace` are 16dp, so a
-     * list's dividers are inset from both ends rather than full-bleed (`<x-list dividers>`).
-     */
-    :where([data-list][data-dividers] > [data-list-item]:not(:last-child))::after {
-        content: '';
-        position: absolute;
-        inset-inline: 16px;
-        bottom: 0;
-        height: 1px;
-        background-color: var(--md-sys-color-outline-variant);
-        pointer-events: none;
-    }
-
-    :where([data-list-row]) {
-        cursor: pointer;
-        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),
-            border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
-    }
-
-    @media (hover: hover) {
-        :where([data-list-row]:not([data-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover))) {
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-        }
-    }
-
-    :where([data-list-row]:not([data-card]):has([data-list-open]:focus-visible)) {
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
-        outline: 3px solid var(--md-sys-color-secondary);
-        outline-offset: -3px;
-    }
-
-    :where([data-list-row]:not([data-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active))) {
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    [data-md-list='segmented'] {
+        gap: var(--md-sys-measurement-space25);
     }
 }
-
-[data-list-row] [data-list-open]:focus-visible {
-    outline: none;
-}
-
-:is([data-list-row], [data-list-item])[data-selected]:not([data-card]) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-}
-
-/*
- * A card that opens answers with M3's state layer and one step of elevation, both written as one
- * box-shadow because the elevated card's rest level is a `shadow-elevation-1` utility that only
- * an unlayered rule can replace. Per-state elevation from the token files (the specs page's
- * Hovered / Focused / Pressed rows): elevated 1 → 2 hovered → 1 focused and pressed; filled and
- * outlined 0 → 1 hovered → 0. Its corner does not move: M3 gives a card one shape and specifies
- * shape morph for buttons, FABs and list items, never for cards.
- */
-[data-card][data-list-row] {
-    transition-property: background-color, box-shadow;
-    transition-duration: var(--md-sys-motion-spatial-default-duration);
-    transition-timing-function: var(--md-sys-motion-spatial-default);
-}
-
-@media (hover: hover) {
-    [data-card][data-list-row]:not([data-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover)) {
-        box-shadow: var(--md-sys-elevation-1), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-    }
-
-    [data-card='elevated'][data-list-row]:not([data-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover)) {
-        box-shadow: var(--md-sys-elevation-2), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-    }
-}
-
-[data-card][data-list-row]:not([data-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active)) {
-    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
-}
-
-[data-card='elevated'][data-list-row]:not([data-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active)) {
-    box-shadow: var(--md-sys-elevation-1), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
-}
-
-/*
- * M3's dragged card (`<x-card data-dragged>`): the highest elevation a card ever takes, under the
- * 16% dragged state layer. The token files' per-state elevation — elevated Level4 (8dp), filled
- * and outlined Level3 (6dp) — and md.sys.state.dragged-state-layer-opacity from tokens/state.css
- * (docs/reference/m3/components-actions-communication-containment.md § Cards → Specs). Written as
- * one box-shadow with the row's other states, and named in the hover and press rules above so the
- * card a pointer is holding stays at its dragged level rather than falling back to a press.
- *
- * The application owns the attribute: it sets `data-dragged` when its drag starts and takes it off
- * on drop, since nothing in the browser tells a card it is being carried. M3 asks for a
- * single-pointer alternative beside any drag, so give the card a menu with the same actions.
- */
-[data-card][data-dragged] {
-    box-shadow: var(--md-sys-elevation-3),
-        inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%), transparent);
-}
-
-[data-card='elevated'][data-dragged] {
-    box-shadow: var(--md-sys-elevation-4),
-        inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%), transparent);
-}
-
-/* Focus is on the card itself when the card is the tab stop (`<x-card actionable>`). */
-[data-card][data-list-row]:is(:focus-visible, :has([data-list-open]:focus-visible)) {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-}
-
-/*
- * M3 Expressive's segmented list (`<x-list segmented>`): each item its own surface, 2px apart,
- * extra-small corners that open to medium while hovered and to large at the ends and while
- * focused, pressed or selected — the specs page's interaction-state expressive shapes, and
- * ListTokens' `ItemPressedContainerExpressiveShape` / `ItemDraggedContainerExpressiveShape`
- * (androidx Compose Material 3, Apache-2.0).
- */
-[data-list='segmented'] > [data-list-item] {
-    border-radius: var(--md-sys-shape-corner-xs);
-}
-
-[data-list='segmented'] > [data-list-item]:first-child {
-    border-start-start-radius: var(--md-sys-shape-corner-lg);
-    border-start-end-radius: var(--md-sys-shape-corner-lg);
-}
-
-[data-list='segmented'] > [data-list-item]:last-child {
-    border-end-start-radius: var(--md-sys-shape-corner-lg);
-    border-end-end-radius: var(--md-sys-shape-corner-lg);
-}
-
-@media (hover: hover) {
-    [data-list='segmented'] > [data-list-item][data-list-row]:hover {
-        border-radius: var(--md-sys-shape-corner-md);
-    }
-}
-
-[data-list='segmented'] > [data-list-item]:is([data-selected], [data-list-row]:active, [data-list-row]:has([data-list-open]:focus-visible)) {
-    border-radius: var(--md-sys-shape-corner-lg);
-}
diff --git a/resources/css/components/table.css b/resources/css/components/table.css
index afa4e225..3092bdf2 100644
--- a/resources/css/components/table.css
+++ b/resources/css/components/table.css
@@ -8,7 +8,8 @@
  * outline-variant rule, body cells in body-medium between outline-variant rules — the role itself,
  * never a fraction of it, since M3 reserves opacity for state layers and disabled. A selected row
  * (`aria-selected="true"`) is secondary-container. A row that opens something is `data-md-list-row`
- * and answers a pointer as a list row does (components/list.css).
+ * and answers a pointer as a list row does (components/list-item.css, shared with `<x-card>` and
+ * `<x-list-item>`).
  *
  * A row is 52px: 16px above and below a body-medium line, 12px beside each cell. Density is never
  * applied by itself — "don't apply density by default; offer an explicit density opt-in instead,
@@ -21,6 +22,8 @@
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
+@import './list-item.css';
+
 @layer material.components {
     /* `position: relative` makes the table the containing block for anything absolute inside it —
        a visually hidden header label, a tooltip. Without it they escape the scroll box and widen a
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index 7e81645d..0d0876aa 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -18,7 +18,6 @@
 @import './tokens/utilities.css';
 
 /* Containment — leaving in step 36 */
-@import './components/list.css';
 @import './components/dialog.css';
 
 /* Navigation — leaving in step 36 */
diff --git a/resources/js/list-rows.js b/resources/js/list-rows.js
index da02c3e5..1b6dbe5d 100644
--- a/resources/js/list-rows.js
+++ b/resources/js/list-rows.js
@@ -1,37 +1,27 @@
 /**
  * A row opens from anywhere on it.
  *
- * A row is `data-md-list-row` (or the older, unprefixed `data-list-row`, while a component that
- * has not yet moved off it still renders it) — an `<x-list-item>`, an `<x-card>`, a table row —
- * and exactly one control inside it is its opener, `data-md-list-open` (or `data-list-open`): the
- * title button that opens a sheet, or the link that goes to the item's page. A click anywhere else
- * on the row is handed to the opener, so the whole row is the target while the opener stays a real
- * control — the tab stop, the name a screen reader reads, and the owner of the `wire:click` or the
- * `href`. The row's other controls keep their own clicks. How a row looks while that happens is
- * resources/css/components/card.css and list.css.
+ * A row is `data-md-list-row` — an `<x-list-item>`, an `<x-card>`, a table row — and exactly one
+ * control inside it is its opener, `data-md-list-open`: the title button that opens a sheet, or
+ * the link that goes to the item's page. A click anywhere else on the row is handed to the opener,
+ * so the whole row is the target while the opener stays a real control — the tab stop, the name a
+ * screen reader reads, and the owner of the `wire:click` or the `href`. The row's other controls
+ * keep their own clicks. How a row looks while that happens is
+ * resources/css/components/card.css and list-item.css.
  *
  * Not a stretched link (`::after { inset: 0 }`): Safari makes no containing block of a <tr>, so in
  * a table every overlay would cover the whole table; and not one <button> around the row, which
  * could hold no other buttons. The listeners sit on `document` and are added once.
  *
- * A row that is also `data-md-list-actionable` (or `data-list-actionable`) is M3's **directly
- * actionable card** (`<x-card actionable>`): the card is the one tab stop, so Enter and Space on
- * the card reach the opener, and the card's other actions follow it in the tab order with their
- * own keys. The opener itself carries `tabindex="-1"`, which the card's caller writes.
+ * A row that is also `data-md-list-actionable` is M3's **directly actionable card** (`<x-card
+ * actionable>`): the card is the one tab stop, so Enter and Space on the card reach the opener,
+ * and the card's other actions follow it in the tab order with their own keys. The opener itself
+ * carries `tabindex="-1"`, which the card's caller writes.
  */
 
 /** Anything that answers a click itself — the row's own controls, and the opener. */
 const CONTROLS = 'a, button, input, select, textarea, label, summary, [contenteditable]'
 
-/** A row, under either its current or its older hook. */
-const ROW = '[data-md-list-row], [data-list-row]'
-
-/** A row's opener, under either its current or its older hook. */
-const OPENER = '[data-md-list-open], [data-list-open]'
-
-/** A directly actionable row, under either its current or its older hook. */
-const ACTIONABLE = '[data-md-list-actionable], [data-list-actionable]'
-
 /** How far a pointer may travel between press and release and still be a click. */
 const DRAG_PX = 6
 
@@ -56,7 +46,7 @@ const openerFor = (event) => {
         return null
     }
 
-    const opener = event.target.closest(ROW)?.querySelector(OPENER)
+    const opener = event.target.closest('[data-md-list-row]')?.querySelector('[data-md-list-open]')
 
     if (!opener) {
         return null
@@ -122,11 +112,11 @@ document.addEventListener('keydown', (event) => {
         return
     }
 
-    if (event.defaultPrevented || !(event.target instanceof Element) || !event.target.matches(ACTIONABLE)) {
+    if (event.defaultPrevented || !(event.target instanceof Element) || !event.target.matches('[data-md-list-actionable]')) {
         return
     }
 
-    const opener = event.target.querySelector(OPENER)
+    const opener = event.target.querySelector('[data-md-list-open]')
 
     if (!opener) {
         return
diff --git a/resources/views/components/list-item.blade.php b/resources/views/components/list-item.blade.php
index a79bfb00..4fffff47 100644
--- a/resources/views/components/list-item.blade.php
+++ b/resources/views/components/list-item.blade.php
@@ -7,12 +7,12 @@
      `description` under it (body-medium, up to two lines). The leading element is one of `icon`,
      `avatar` (an image URL, or initials in primary-container), `image` (a 56px thumbnail) or
      `video`, or a `leading` slot (a checkbox, a switch). The trailing element is `trailing` text
-     (label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and three-line
-     heights (56, 72, 88px) follow from what is given, 16px between the item and what leads or
-     trails it, and a three-line item top-aligns rather than centring — M3 aligns an item middle
-     "by default, top-aligned if the item is 88dp+ or has 3+ lines of text". Its icons are 24px,
-     or 20px in a `segmented` list, which is M3 Expressive's (ListTokens, androidx Compose
-     Material 3, Apache-2.0).
+     (label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and
+     three-line items (`data-md-lines`, 56, 72, 88px) follow from what is given, 16px between the
+     item and what leads or trails it, and a three-line item top-aligns rather than centring — M3
+     aligns an item middle "by default, top-aligned if the item is 88dp+ or has 3+ lines of text".
+     Its icons are 24px, or 20px in a `segmented` list, which is M3 Expressive's (ListTokens,
+     androidx Compose Material 3, Apache-2.0).
 
      `video` is M3's leading media in its landscape size — a poster URL, or a `<x-slot:video>`
      holding a `<video>` or a thumbnail with a play badge. ListTokens gives it two: 100×56px in a
@@ -27,9 +27,9 @@
      (docs/reference/m3/components-actions-communication-containment.md § Lists → Anatomy, Specs).
 
      `link` makes the whole item the link. Otherwise, to make it open something while its trailing
-     controls keep their own presses, give it `data-list-row` and put `data-list-open` on the one
-     control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected item,
-     in secondary-container; `disabled` greys it to 38%, drops its link and announces it
+     controls keep their own presses, give it `data-md-list-row` and put `data-md-list-open` on the
+     one control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected
+     item, in secondary-container; `disabled` greys it to 38%, drops its link and announces it
      `aria-disabled` — M3's states model treats disabled as not interactive, so a disabled item
      answers neither the pointer nor the keyboard.
 
@@ -81,35 +81,23 @@
 
     // ListTokens.kt:153,156,332,335 — ItemLeading/TrailingIconExpressiveSize = 20dp against the
     // baseline 24dp. At 20px the symbol is drawn from the 20 optical cut, not the 24 scaled down.
-    $iconSize = $segmented ? 'size-5' : 'size-6';
-    $optical = $segmented ? '20' : '24';
+    $iconSize = $segmented ? 20 : 24;
 @endphp
 
 <div
     role="{{ $option ? 'option' : 'listitem' }}"
     @if ($option) aria-selected="{{ $selected ? 'true' : 'false' }}" @elseif ($selected) aria-current="true" @endif
-    data-list-item
-    @if ($isLink) data-list-row @endif
-    @if ($selected) data-selected @endif
+    data-md-list-item
+    data-md-lines="{{ $lines + 1 }}"
+    @if ($isLink) data-md-list-row @endif
+    @if ($selected) data-md-selected @endif
     @if ($disabled) aria-disabled="true" @endif
-    {{ $attributes->class([
-        'relative flex gap-4 px-4 text-on-surface',
-        'items-center' => $lines !== 2,
-        'items-start' => $lines === 2,
-        'min-h-14 py-2' => $lines === 0,
-        'min-h-18 py-2' => $lines === 1,
-        'min-h-22 py-3' => $lines === 2,
-        'pointer-events-none text-on-surface/38' => $disabled,
-    ]) }}
+    {{ $attributes }}
 >
     @isset($leading)
-        <div class="flex shrink-0 items-center">{{ $leading }}</div>
+        <div data-md-list-item-leading>{{ $leading }}</div>
     @elseif ($hasVideo)
-        <div @class([
-            'shrink-0 overflow-hidden rounded-corner-sm bg-surface-container-highest *:size-full *:object-cover',
-            'h-16 w-28.5' => $videoLarge,
-            'h-14 w-25' => ! $videoLarge,
-        ])>
+        <div data-md-list-item-video data-md-size="{{ $videoLarge ? 'lg' : 'sm' }}">
             @if ($video instanceof \Illuminate\View\ComponentSlot)
                 {{ $video }}
             @else
@@ -118,48 +106,48 @@
         </div>
     @elseif ($avatar)
         @if ($initials)
-            <span class="grid size-10 shrink-0 place-items-center rounded-corner-full bg-primary-container type-title-md text-on-primary-container" aria-hidden="true">{{ $avatar }}</span>
+            <span data-md-list-item-avatar aria-hidden="true">{{ $avatar }}</span>
         @else
-            <img src="{{ $avatar }}" alt="" class="size-10 shrink-0 rounded-corner-full object-cover" />
+            <img src="{{ $avatar }}" alt="" data-md-list-item-avatar />
         @endif
     @elseif ($image)
-        <img src="{{ $image }}" alt="" class="size-14 shrink-0 rounded-corner-sm object-cover" />
+        <img src="{{ $image }}" alt="" data-md-list-item-image />
     @elseif ($icon)
-        <x-livewire-material::icon :name="$icon" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
+        <x-livewire-material::icon :name="$icon" :size="$iconSize" data-md-list-item-icon />
     @endif
 
-    <div class="min-w-0 flex-1">
+    <div data-md-list-item-content>
         @if ($overline)
-            <p @class(['type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $overline }}</p>
+            <p data-md-list-item-overline>{{ $overline }}</p>
         @endif
 
         @if ($isLink)
             <a
                 href="{{ $link }}"
-                data-list-open
+                data-md-list-open
+                data-md-list-item-title
                 @if ($external) target="_blank" rel="noopener" @elseif (! $noWireNavigate) wire:navigate @endif
-                class="block truncate type-body-lg outline-none"
             >{{ $title ?? $slot }}</a>
         @else
-            <p class="truncate type-body-lg">{{ $title ?? $slot }}</p>
+            <p data-md-list-item-title>{{ $title ?? $slot }}</p>
         @endif
 
         @if ($description)
-            <p @class(['line-clamp-2 type-body-md', 'text-on-surface-variant' => ! $selected])>{{ $description }}</p>
+            <p data-md-list-item-description>{{ $description }}</p>
         @endif
     </div>
 
     @isset($end)
-        <div class="flex shrink-0 items-center gap-1">{{ $end }}</div>
+        <div data-md-list-item-end>{{ $end }}</div>
     @endisset
 
     @if ($trailing)
-        <span @class(['shrink-0 type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $trailing }}</span>
+        <span data-md-list-item-trailing>{{ $trailing }}</span>
     @endif
 
     @if ($iconRight)
-        <x-livewire-material::icon :name="$iconRight" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
+        <x-livewire-material::icon :name="$iconRight" :size="$iconSize" data-md-list-item-icon />
     @elseif ($check)
-        <x-livewire-material::icon name="check" :optical="$optical" :class="$iconSize" />
+        <x-livewire-material::icon name="check" :size="$iconSize" />
     @endif
 </div>
diff --git a/resources/views/components/list.blade.php b/resources/views/components/list.blade.php
index e5ba9aaa..e4049aaa 100644
--- a/resources/views/components/list.blade.php
+++ b/resources/views/components/list.blade.php
@@ -16,7 +16,7 @@
      selection is never colour alone; give the items a leading checkbox or radio instead and pass
      `icon-right` to keep the check off.
 
-     For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-list`
+     For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-md-list`
      (resources/js/list-rows.js marks rows; a list keyboard arrives with the list-detail pane).
      `label` names the list. --}}
 
@@ -39,13 +39,10 @@
 <div
     role="{{ $selection === null ? 'list' : 'listbox' }}"
     @if ($selection === 'multi') aria-multiselectable="true" @endif
-    data-list="{{ $segmented ? 'segmented' : 'plain' }}"
-    @if ($dividers && ! $segmented) data-dividers @endif
+    data-md-list="{{ $segmented ? 'segmented' : 'plain' }}"
+    @if ($dividers && ! $segmented) data-md-dividers @endif
     @if ($label) aria-label="{{ $label }}" @endif
-    {{ $attributes->class([
-        'flex flex-col',
-        'gap-0.5' => $segmented,
-    ]) }}
+    {{ $attributes }}
 >
     {{ $slot }}
 </div>
diff --git a/tests/Feature/Components/ContainmentStylesheetsTest.php b/tests/Feature/Components/ContainmentStylesheetsTest.php
index 9dab850f..84cb4dbc 100644
--- a/tests/Feature/Components/ContainmentStylesheetsTest.php
+++ b/tests/Feature/Components/ContainmentStylesheetsTest.php
@@ -19,6 +19,8 @@ dataset('containment components', [
     'divider',
     'collapse',
     'card',
+    'list',
+    'list-item',
 ]);
 
 /**
diff --git a/tests/Feature/Components/ListTest.php b/tests/Feature/Components/ListTest.php
index 4ce08980..0f03656d 100644
--- a/tests/Feature/Components/ListTest.php
+++ b/tests/Feature/Components/ListTest.php
@@ -1,58 +1,60 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
 it('draws a plain list, with dividers on request', function () {
     expect((string) $this->blade('<x-list label="Files" dividers><x-list-item title="a.zip" /></x-list>'))
         ->toContain('role="list"')
         ->toContain('aria-label="Files"')
-        ->toContain('data-list="plain"')
-        ->toContain('data-dividers')
-        ->not->toContain('divide-y')
+        ->toContain('data-md-list="plain"')
+        ->toContain('data-md-dividers')
         ->toContain('role="listitem"')
-        ->and((string) $this->blade('<x-list><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-dividers')
-        ->and((string) $this->blade('<x-list segmented dividers><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-dividers');
+        ->and((string) $this->blade('<x-list><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-md-dividers')
+        ->and((string) $this->blade('<x-list segmented dividers><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-md-dividers');
 });
 
 it('draws M3 Expressive\'s segmented list', function () {
     expect((string) $this->blade('<x-list segmented><x-list-item title="a.zip" /></x-list>'))
-        ->toContain('data-list="segmented"')
-        ->toContain('gap-0.5');
+        ->toContain('data-md-list="segmented"');
 });
 
 it('grows an item from one to three lines, top-aligning the tallest', function () {
-    expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('items-center')->toContain('min-h-14 py-2')
-        ->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('items-center')->toContain('min-h-18 py-2')->toContain('248 MB')
+    expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('data-md-lines="1"')
+        ->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('data-md-lines="2"')->toContain('248 MB')
         ->and((string) $this->blade('<x-list-item title="a.zip" overline="Protected" description="248 MB" />'))
-        ->toContain('items-start')
-        ->toContain('min-h-22 py-3')
-        ->toContain('Protected')
-        ->not->toContain('items-center');
+        ->toContain('data-md-lines="3"')
+        ->toContain('Protected');
 });
 
 it('leaves 16px between the item and what leads or trails it', function () {
-    expect((string) $this->blade('<x-list-item title="a.zip" icon="folder_zip" />'))->toContain('flex gap-4 px-4');
+    $css = ComponentStylesheet::read('list-item');
+
+    expect($css->declarations('[data-md-list-item]'))
+        ->toHaveKey('gap', 'var(--md-sys-measurement-space200)')
+        ->toHaveKey('padding-inline', 'var(--md-sys-measurement-space200)');
 });
 
 it('draws the expressive icon size in a segmented list', function () {
     expect((string) $this->blade('<x-list segmented><x-list-item title="a" icon="settings" icon-right="chevron_right" /></x-list>'))
-        ->toContain('size-5')
-        ->not->toContain('size-6')
-        ->and((string) $this->blade('<x-list><x-list-item title="a" icon="settings" /></x-list>'))->toContain('size-6');
+        ->toContain('style="--md-icon-size: 20px"')
+        ->and((string) $this->blade('<x-list><x-list-item title="a" icon="settings" /></x-list>'))
+        ->not->toContain('--md-icon-size: 20px');
 });
 
 it('leads with an icon, an avatar or an image, and trails with text or an icon', function () {
     expect((string) $this->blade('<x-list-item title="a" icon="folder_zip" trailing="3 days" icon-right="chevron_right" />'))
         ->toContain('3 days')
         ->and(substr_count((string) $this->blade('<x-list-item title="a" icon="folder_zip" icon-right="chevron_right" />'), '<svg'))->toBe(2)
-        ->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('bg-primary-container')->toContain('>AM</span>')
+        ->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('data-md-list-item-avatar')->toContain('>AM</span>')
         ->and((string) $this->blade('<x-list-item title="Anna" avatar="/anna.jpg" />'))->toContain('<img src="/anna.jpg"')
-        ->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('size-14');
+        ->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('data-md-list-item-image');
 });
 
 it('makes a linked item a row that opens from anywhere', function () {
     expect((string) $this->blade('<x-list-item title="Settings" link="/settings" />'))
-        ->toContain('data-list-row')
+        ->toContain('data-md-list-row')
         ->toContain('href="/settings"')
-        ->toContain('data-list-open')
+        ->toContain('data-md-list-open')
         ->toContain('wire:navigate');
 });
 
@@ -81,32 +83,33 @@ it('draws a second cue on a selected option, which icon-right replaces', functio
 it('leaves a disabled item out of the keyboard and announces it disabled', function () {
     expect((string) $this->blade('<x-list-item title="Settings" link="/settings" icon="settings" disabled />'))
         ->toContain('aria-disabled="true"')
-        ->toContain('pointer-events-none text-on-surface/38')
         ->not->toContain('href="/settings"')
-        ->not->toContain('data-list-open')
-        ->not->toContain('data-list-row');
+        ->not->toContain('data-md-list-open')
+        ->not->toContain('data-md-list-row');
 });
 
 it('marks a selected item and takes controls in its slots', function () {
     expect((string) $this->blade('<x-list-item title="Anna" :selected="true"><x-slot:leading><input type="checkbox"></x-slot:leading><x-slot:end><button>⋮</button></x-slot:end></x-list-item>'))
-        ->toContain('data-selected')
+        ->toContain('data-md-selected')
+        ->toContain('data-md-list-item-leading')
         ->toContain('<input type="checkbox">')
+        ->toContain('data-md-list-item-end')
         ->toContain('<button>⋮</button>');
 });
 
 it('leads with M3\'s video, in the size the item\'s height calls for', function () {
     expect((string) $this->blade('<x-list-item title="Sunrise" video="/poster.jpg" />'))
-        ->toContain('h-14 w-25')
-        ->toContain('rounded-corner-sm')
+        ->toContain('data-md-list-item-video')
+        ->toContain('data-md-size="sm"')
         ->toContain('<img src="/poster.jpg" alt="" />')
-        ->toContain('min-h-18 py-2')
+        ->toContain('data-md-lines="2"')
         ->and((string) $this->blade('<x-list-item title="Sunrise" overline="Draft" description="7:48" video="/poster.jpg" />'))
-        ->toContain('h-16 w-28.5')
-        ->toContain('min-h-22 py-3')
+        ->toContain('data-md-size="lg"')
+        ->toContain('data-md-lines="3"')
         ->and((string) $this->blade('<x-list-item title="Sunrise"><x-slot:video><video src="/clip.mp4"></video></x-slot:video></x-list-item>'))
         ->toContain('<video src="/clip.mp4"></video>')
-        ->toContain('h-14 w-25')
+        ->toContain('data-md-size="sm"')
         ->and((string) $this->blade('<x-list-item title="Sunrise" />'))
-        ->not->toContain('h-14 w-25')
-        ->toContain('min-h-14 py-2');
+        ->not->toContain('data-md-list-item-video')
+        ->toContain('data-md-lines="1"');
 });