{{-- 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).

     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. --}}

@props([
    'segmented' => false,
    'dividers' => false,
    'label' => null,
])

<div
    role="list"
    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>