Suggestion Chips

<form wire:submit="save" class="space-y-2">
    <brok:suggestion-chips
        wire:model="value"
        :aria-invalid="$errors->has('value') ? 'true' : 'false'"
        aria-describedby="value-error"
    />

    @error('value')
        <p id="value-error" role="alert">{{ $message }}</p>
    @enderror

    <brok:button type="submit" wire:loading.attr="disabled">
        <span wire:loading.remove>Save</span>
        <span wire:loading>Saving…</span>
    </brok:button>
</form>

@props([
    'items' => ['All', 'Popular', 'Recent', 'Favourites'],
])

{{--
    Suggestion chips — a wrapping row of pills. Each is a real <button>, so it is
    keyboard- and screen-reader-accessible. select() records the choice and
    dispatches a `suggestion-chips-select` CustomEvent (detail.value) for the host to act on.
--}}
<div
    x-data="uiSuggestionChips({ items: @js(array_values($items)) })"
    data-slot="suggestion-chips"
    {{ $attributes->merge(['class' => 'flex flex-wrap gap-2']) }}
>
    <template x-for="(item, i) in items" :key="i">
        <button
            type="button"
            @click="select(item)"
            :aria-pressed="selected === item"
            class="rounded-full border border-border bg-card px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
            x-text="item"
        ></button>
    </template>
</div>

/**
 * Suggestion chips behavior.
 *
 * Renders a set of pills. Selecting one records it in `selected` and dispatches
 * a bubbling `suggestion-chips-select` CustomEvent carrying the chosen text, so the
 * host can act on the selection.
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiSuggestionChips', (cfg = {}) => ({
        items: cfg.items ?? [],
        selected: null,

        select(item) {
            this.selected = item;
            this.$el.dispatchEvent(
                new CustomEvent('suggestion-chips-select', {
                    detail: { value: item },
                    bubbles: true,
                })
            );
        },
    }));
});