Andreas Reinhold / reiniandClaude Opus 5
fef20a9178
tests / lint (push) Failing after 2m6s
tests / feature (8.4) (push) Successful in 1m3s
tests / feature (8.5) (push) Successful in 1m7s
tests / browser (safari, webkit) (push) Successful in 3m14s
tests / browser (chrome, chromium) (push) Successful in 2m9s
tests / browser (firefox, firefox) (push) Successful in 2m29s
<x-card> (filled, elevated, outlined), <x-list> and <x-list-item> (plain or M3 Expressive's segmented list), <x-divider>, <x-collapse> on <details>, <x-modal> on the native <dialog>, <x-drawer> as a side sheet or list-detail pane, and <x-bottom-sheet> with drag to dismiss. Dialogs and sheets bind to a Livewire flag or id and write back false or null on close, or use the surrounding Alpine scope. Rows open from anywhere on them through data-list-row and data-list-open. DesignGuard now also reports Blade directives written inside a component tag, where they do not compile. Browser test helpers wait for a complete document with Alpine and Livewire running: in Firefox, networkidle alone could return before a repeated visit had loaded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
30 lines
1.0 KiB
PHP
30 lines
1.0 KiB
PHP
{{-- 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>
|