Andreas Reinhold / reiniandClaude Fable 5.1
dd3d8afdb9
M3's chip keyboard table makes a set one tab stop that the arrows move through; ten filter chips cost ten Tab presses today. The set now keeps a roving tabindex — re-applied whenever a Livewire morph rewrites the chips — and walks left, right, Home and End, following the writing direction. The input chip's remove button also grows to a full 48x48 target, where it was 34px wide. Plan step 20, findings IN-13 and IN-14. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
72 lines
3.3 KiB
PHP
72 lines
3.3 KiB
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: the edge it can still scroll towards fades (resources/js/chips.js), and a chip reached
|
|
with Tab scrolls 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
|
|
|
|
<div
|
|
role="group"
|
|
@if (filled($label)) aria-labelledby="material-chip-set-{{ $key }}-label" @endif
|
|
@if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
|
|
{{ $attributes->class('min-w-0') }}
|
|
>
|
|
@if (filled($label))
|
|
<p id="material-chip-set-{{ $key }}-label" class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</p>
|
|
@endif
|
|
|
|
@if ($scroll)
|
|
<div
|
|
data-chip-set
|
|
x-data="materialChipSet"
|
|
x-on:keydown="key($event)"
|
|
x-on:focusin="rove($event.target)"
|
|
wire:ignore.self
|
|
class="-mx-1.5 -my-2 flex scroll-px-6 gap-2 overflow-x-auto px-1.5 py-2 [scrollbar-width:none] [--chip-fade-end:0px] [--chip-fade-start:0px] data-scroll-end:[--chip-fade-end:1.5rem] data-scroll-start:[--chip-fade-start:1.5rem] [mask-image:linear-gradient(to_right,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)] rtl:[mask-image:linear-gradient(to_left,transparent,#000_var(--chip-fade-start),#000_calc(100%_-_var(--chip-fade-end)),transparent)]"
|
|
>
|
|
{{ $slot }}
|
|
</div>
|
|
@else
|
|
<div data-chip-set x-data="materialChipSet" x-on:keydown="key($event)" x-on:focusin="rove($event.target)" class="flex flex-wrap gap-2">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $describedBy }}">
|
|
@foreach ($messages as $message)
|
|
<p class="mt-1 type-body-sm text-error">{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@elseif (filled($hint))
|
|
<p id="{{ $describedBy }}" class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
|
|
@endif
|
|
</div>
|