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/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>

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>