{{-- An M3 list: `<x-list-item>`s, one under another.

     Plain by default — the items sit on the surface around them, with `dividers` between them if
     asked, inset 16px from both ends as ListTokens' `DividerLeadingSpace`/`DividerTrailingSpace`
     say (resources/css/components/list.css draws them). `segmented` is M3 Expressive's list: each
     item its own surface tile, 2px apart, with small corners that open to large at the ends and
     while hovered, pressed, focused or selected (ListTokens, androidx Compose Material 3,
     Apache-2.0).

     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-md-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="{{ $selection === null ? 'list' : 'listbox' }}"
    @if ($selection === 'multi') aria-multiselectable="true" @endif
    data-md-list="{{ $segmented ? 'segmented' : 'plain' }}"
    @if ($dividers && ! $segmented) data-md-dividers @endif
    @if ($label) aria-label="{{ $label }}" @endif
    {{ $attributes }}
>
    {{ $slot }}
</div>