{{-- 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. `segmented` is M3 Expressive's list: each item its own surface-container tile, 2px
     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).

     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="{{ $selection === null ? 'list' : 'listbox' }}"
    @if ($selection === 'multi') aria-multiselectable="true" @endif
    data-list="{{ $segmented ? 'segmented' : 'plain' }}"
    @if ($label) aria-label="{{ $label }}" @endif
    {{ $attributes->class([
        'flex flex-col',
        'gap-0.5' => $segmented,
        'divide-y divide-outline-variant' => $dividers && ! $segmented,
    ]) }}
>
    {{ $slot }}
</div>