Add chips, choices and search

M3's assist, filter, input and suggestion chips with chip sets; choices
as filter chips or a searchable combobox whose list is an anchored
popover; and the search bar that opens into a docked or full-screen
search view.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/js/chips.js

@@ -0,0 +1,157 @@
+/**
+ * `materialChip`: a removable `<x-chip type="input">`. `materialChipSet`: a scrolling `<x-chip-set>`.
+ *
+ * Removing always goes through the chip's remove button, so a Backspace or Delete runs exactly
+ * what a press on it runs — its `wire:click` (from `wire:remove`), its Alpine expression, or the
+ * chip taking itself off the page. Before that, focus moves to the chip before it (Backspace) or
+ * after it (Delete), because a focused element that disappears leaves focus on the body.
+ *
+ * A scrolling set marks the edges it can still scroll towards (`data-scroll-start`,
+ * `data-scroll-end`), and the set fades those edges. Its row carries `wire:ignore.self`, so a
+ * Livewire morph keeps the marks.
+ */
+const CONTROLS = 'button:not(:disabled), a[href]:not([tabindex="-1"]), input:not(:disabled):not([type="hidden"])'
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.data('materialChip', () => ({
+        init() {
+            const button = this.removeButton()
+            const label = this.$root.querySelector('[data-chip-label]')
+
+            // A chip rendered by x-for has no label on the server: its button carries the translated
+            // words with a `:label` placeholder, filled in once Alpine has written the label.
+            if (button?.dataset.chipRemove && label) {
+                this.$nextTick(() => {
+                    const text = label.textContent.trim()
+
+                    if (text !== '' && !button.hasAttribute('aria-label')) {
+                        button.setAttribute('aria-label', button.dataset.chipRemove.replace(':label', text))
+                    }
+                })
+            }
+        },
+
+        removeButton() {
+            return this.$root.querySelector('[data-chip-remove]')
+        },
+
+        removeOnKey(event) {
+            if ((event.key !== 'Backspace' && event.key !== 'Delete') || event.ctrlKey || event.metaKey || event.altKey) {
+                return
+            }
+
+            const button = this.removeButton()
+
+            if (!button || button.disabled) {
+                return
+            }
+
+            event.preventDefault()
+            this.handOffFocus(event.key === 'Backspace')
+            button.click()
+        },
+
+        removeChip() {
+            if (this.$root.contains(document.activeElement)) {
+                this.handOffFocus(false)
+            }
+        },
+
+        handOffFocus(backwards) {
+            const chip = this.$root
+            const set = chip.closest('[data-chip-set]') ?? chip.parentElement
+            const chips = [...(set?.querySelectorAll('[data-chip]') ?? [])]
+            const index = chips.indexOf(chip)
+            const before = chips.slice(0, index).reverse()
+            const after = chips.slice(index + 1)
+            const onRemove = document.activeElement?.hasAttribute('data-chip-remove')
+
+            for (const other of backwards ? [...before, ...after] : [...after, ...before]) {
+                const target = (onRemove && other.querySelector('[data-chip-remove]:not(:disabled)')) || (other.matches(CONTROLS) ? other : other.querySelector(CONTROLS))
+
+                if (target) {
+                    target.focus()
+                    this.holdFocus(target, set)
+
+                    return
+                }
+            }
+        },
+
+        // Livewire morphs without lookahead: removing a chip re-creates every keyed chip after it,
+        // and the focused one goes with them. Until the person moves focus themselves (or ten
+        // seconds pass), whenever the set changes and focus has fallen away, focus the same
+        // control again — the element itself, or the chip with its `wire:key` after a morph.
+        holdFocus(target, set) {
+            const key = target.closest('[data-chip]')?.getAttribute('wire:key')
+            const onRemove = target.hasAttribute('data-chip-remove')
+
+            const current = () => {
+                if (target.isConnected || !key) {
+                    return target.isConnected ? target : null
+                }
+
+                const chip = [...set.querySelectorAll('[data-chip]')].find((other) => other.getAttribute('wire:key') === key)
+
+                return chip && (onRemove ? chip.querySelector('[data-chip-remove]') : chip.matches(CONTROLS) ? chip : chip.querySelector(CONTROLS))
+            }
+
+            const observer = new MutationObserver(() => {
+                const active = document.activeElement
+                const control = current()
+
+                if (!control || (active && active !== document.body && active !== control)) {
+                    stop()
+                } else if (active !== control) {
+                    control.focus()
+                }
+            })
+
+            const timer = setTimeout(() => stop(), 10000)
+
+            const stop = () => {
+                observer.disconnect()
+                clearTimeout(timer)
+            }
+
+            observer.observe(set, { childList: true, subtree: true })
+        },
+    }))
+
+    window.Alpine.data('materialChipSet', () => ({
+        observers: [],
+
+        init() {
+            const row = this.$el
+
+            const mark = () => {
+                // scrollLeft runs negative towards the end in a right-to-left row.
+                const travelled = Math.abs(row.scrollLeft)
+                const room = row.scrollWidth - row.clientWidth
+
+                row.toggleAttribute('data-scroll-start', travelled > 1)
+                row.toggleAttribute('data-scroll-end', room - travelled > 1)
+            }
+
+            // A filter chip's check changes its width without resizing the row.
+            for (const type of ['scroll', 'transitionend']) {
+                row.addEventListener(type, mark, { passive: true })
+                this.observers.push(() => row.removeEventListener(type, mark))
+            }
+
+            const resize = new ResizeObserver(mark)
+            resize.observe(row)
+            this.observers.push(() => resize.disconnect())
+
+            const mutation = new MutationObserver(mark)
+            mutation.observe(row, { childList: true, subtree: true })
+            this.observers.push(() => mutation.disconnect())
+
+            mark()
+        },
+
+        destroy() {
+            this.observers.forEach((stop) => stop())
+        },
+    }))
+})