Rewrite list and list-item without Tailwind

Plan step 36 (containment group, last of its four components): moves
into resources/css/components/list.css (the container: display, the
2px segmented gap) and list-item.css (everything else — anatomy,
states, the segmented item's own background/corner, and the row
interaction pattern list.css used to carry). One commit for both:
list-item.css keys heavily on list's own data-md-list="segmented"
attribute and the two files are designed together.

Kept, now on data-md-* hooks: selectable/selection listbox semantics
(role="listbox"/"option", aria-selected, a trailing check as the
second cue, C-03), a disabled item's link dropped entirely rather than
left focusable (C-02), the segmented row's own state layer no longer
racing its background through an unlayered escape hatch (C-08 doesn't
recur — nothing here is unlayered), leading video/icon/avatar slots,
three-line top alignment and 12px vertical padding (C-15), 16px
leading/trailing gap (C-14), dividers inset 16px (C-16), the segmented
list's surface fill (C-21) and its hover/focus/pressed/selected corner
morph (C-22). The segmented icon size (20px) is now the `size` prop
`<x-icon>` already takes from the parent's @aware(['segmented']),
replacing the CSS override C-26's fix suggested.

data-md-lines="1|2|3" replaces the old line-count classes; data-md-list-item-*
hooks replace every other class list.

Hooks renamed data-list -> data-md-list, data-list-item -> data-md-list-item,
data-dividers -> data-md-dividers, data-selected -> data-md-selected, the
generic data-list-row/-open row pattern's last consumer (list-item)
moved, so list-rows.js drops the transitional dual-hook fallback the
card commit added. table.css now @imports list-item.css, completing
what its own comment already claimed (a row answers a pointer as a
list row does) under the new per-component-import architecture.

Imported from the Containment block of components.css; leaves
tailwind.css, which now carries only dialog.css for this group.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

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);
+    }
+}