Announce a selectable list as M3's list box of options

Plan step 12, containment.md C-03. `selected` was colour alone on a
`listitem`, which cannot carry a selected state at all. `<x-list
selectable>` (or `selection="single|multi"`) now makes the container a
`role="listbox"` and each item an `option` with `aria-selected`; a plain
list keeps `role="list"` and marks a selected item `aria-current`. A
selected option draws a trailing check as M3's second cue, which
`icon-right` replaces. The item reads its list's mode with `@aware`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/list.blade.php

@@ -5,18 +5,38 @@
      apart, with small corners that open to large at the ends and while hovered, pressed or
      selected (ListTokens, androidx Compose Material 3, Apache-2.0).
 
-     It is a `role="list"`; for keyboard walking between rows, `j`/`k` or arrows, the application
-     can use `data-list` (resources/js/list-rows.js marks rows; a list keyboard arrives with the
-     list-detail pane). `label` names the list. --}}
+     A plain list is a `role="list"` of `listitem`s. `selectable` (or `selection="single"` /
+     `selection="multi"`) makes it the list a person chooses from: M3 maps single- and
+     multi-select lists on the web to a **list box** of **options** with a selected state
+     (docs/reference/m3/components-actions-communication-containment.md § Lists → Accessibility),
+     so the container becomes `role="listbox"` (`aria-multiselectable` when multi) and each item
+     an `option` that announces `aria-selected`. A selected option also draws a trailing check, so
+     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`
+     (resources/js/list-rows.js marks rows; a list keyboard arrives with the list-detail pane).
+     `label` names the list. --}}
 
 @props([
     'segmented' => false,
     'dividers' => false,
     'label' => null,
+    'selectable' => false,
+    'selection' => null,
 ])
 
+@php
+    $selection = match (true) {
+        in_array($selection, ['single', 'multi'], true) => $selection,
+        $selectable || $selection !== null => 'single',
+        default => null,
+    };
+@endphp
+
 <div
-    role="list"
+    role="{{ $selection === null ? 'list' : 'listbox' }}"
+    @if ($selection === 'multi') aria-multiselectable="true" @endif
     data-list="{{ $segmented ? 'segmented' : 'plain' }}"
     @if ($label) aria-label="{{ $label }}" @endif
     {{ $attributes->class([