livewire-material/resources/views/components/chip-set.blade.php

{{-- A set of M3 chips: a row that wraps, 8px apart, named for screen readers as a group.

         <x-chip-set label="File types" hint="Show only these" error-field="kinds">
             <x-chip type="filter" label="Photos" value="photos" wire:model.live="kinds" />
             <x-chip type="filter" label="Documents" value="documents" wire:model.live="kinds" />
         </x-chip-set>

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

     The root renders `data-md-chip-set` (and `data-md-scroll`), the row `data-md-chip-set-row`, which
     resources/js/chips.js marks `data-md-scroll-start` and `data-md-scroll-end`; the drawing is
     resources/css/components/chip-set.css. `class` and every other attribute land on the root. --}}

@props([
    'label' => null,
    'hint' => null,
    'errorField' => null,
    'scroll' => false,
])

@php
    $key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
    $messages = \NoNameWeb\LivewireMaterial\Support\Field::messages($errors ?? null, filled($errorField) ? $errorField : null, wildcard: true);
    $describedBy = $messages !== [] || filled($hint) ? "material-chip-set-{$key}-hint" : null;
@endphp

<div
    data-md-chip-set
    @if ($scroll) data-md-scroll @endif
    role="group"
    @if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
    @if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
    {{ $attributes }}
>
    @if (filled($label))
        <p id="material-chip-set-{{ $key }}-label" data-md-chip-set-label>{{ $label }}</p>
    @endif

    @if ($scroll)
        <div x-data="materialChipSet" data-md-chip-set-scroller>
            <div
                data-md-chip-set-row
                x-ref="row"
                x-on:keydown="key($event)"
                x-on:focusin="rove($event.target)"
                wire:ignore.self
            >
                {{ $slot }}
            </div>

            {{-- 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)
                <button
                    type="button"
                    tabindex="-1"
                    aria-hidden="true"
                    data-md-chip-scroll="{{ $edge }}"
                    x-on:click="nudge('{{ $edge }}')"
                >
                    <x-livewire-material::icon :name="$glyph" size="18" mirror-rtl />
                </button>
            @endforeach
        </div>
    @else
        <div data-md-chip-set-row x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)">
            {{ $slot }}
        </div>
    @endif

    @if ($messages !== [])
        <div id="{{ $describedBy }}" data-md-chip-set-errors>
            @foreach ($messages as $message)
                <p>{{ $message }}</p>
            @endforeach
        </div>
    @elseif (filled($hint))
        <p id="{{ $describedBy }}" data-md-chip-set-hint>{{ $hint }}</p>
    @endif
</div>