{{-- A set of M3 chips: a row that wraps, 8px apart, named for screen readers as a group.
`label` is shown above the row and names the group; without it, pass `aria-label`. `hint`
sits under it, and a validation message for `error-field` (the property the chips bind, and
its items: `kinds` and `kinds.*`) replaces the hint.
`scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a narrow
screen. M3's chips accessibility page asks that a row which overflows say so, so the edge it
can still scroll towards fades (resources/js/chips.js) and, where the pointer is fine and
there is no swipe to reach for, a button sits over each fading edge and scrolls the row by
most of its width. The buttons are pointer affordances only — `tabindex="-1"` and
`aria-hidden`, because the arrow keys already walk every chip and scroll each one clear of
the fade. Removing a focused input chip moves focus within the set.
The set is one tab stop and the arrow keys move between the chips inside it, with Home and End
at the ends — M3's chip keyboard table. Backspace and Delete still remove a focused input
chip. --}}
@props([
'label' => null,
'hint' => null,
'errorField' => null,
'scroll' => false,
])
@php
$key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
$messages = filled($errorField) && isset($errors)
? array_values(array_unique(\Illuminate\Support\Arr::flatten([$errors->get($errorField), $errors->get($errorField.'.*')])))
: [];
$describedBy = $messages !== [] || filled($hint) ? "material-chip-set-{$key}-hint" : null;
@endphp
class('min-w-0') }}
>
@if (filled($label))
{{ $label }}
@endif
@if ($scroll)
{{ $slot }}
{{-- After the row, so each button can ask whether the row can still scroll its way. --}}
@foreach (['start' => 'chevron_left', 'end' => 'chevron_right'] as $edge => $glyph)
@endforeach