tags-input — input × multiselect

The shell is a chip host at hit height and a typing input in the same row. Commit paths are real keys: Enter / comma / Tab (via blur) commit a chip — a pasted a,b,c splits into one commit per part — and Backspace on an empty input deletes the last removable chip. Duplicates are flashed, not added (200ms primary border + shake, reduced motion keeps the border flash only); the typed text resolving to a suggestion commits the suggestion's value; maxTags hides the input at the cap behind an N/N readout.

The two law-heaviest surfaces meet here. The KEYED LIST: chips render from a keyed each whose key is the composite value#index — duplicate tag VALUES cannot collide, the LAW #18 worst case (constant add/remove/reorder) stays hydration-safe by construction. The COMBOBOX: the typing input is role=combobox over the suggestion popover — aria-expanded live, the roving highlight riding aria-activedescendant + aria-owns with focus never entering the panel, committed suggestions flipping their rows' aria-selected. The chip host itself is a horizontal listbox of options; every × announces "remove (label)".

Values reach FormData through the faceless jx-form-field bridge — ONE JSON array string under the field name (lossless when a tag value contains a comma). The eight axes: density is the ONE consumed axis (the field's metrics ARE the kernel lanes — measured hit-height flip), size and color are consumed at the passthrough boundary (§1: the native element never receives them), theme rides the ROOT-PINNED alias inks (frozen under a scoped dark island, re-derived at root-level dark), and shape/radius/elevation/motion supply unread. Kinship: input (the single-value shell), select (the single-select popover law spin-off), combobox (the full law this popover miniaturizes).

Type in the first one: matching suggestions (label or value contains, case-insensitive) pop under the shell with ↑/↓ + Enter; type svelte again to see the duplicate flash on the existing chip. Enter / comma / Tab commits chips directly — pasting rust, ffi splits into two — and Backspace on an empty input deletes the last removable chip.

The component keeps the popover orchestration law of the family: popover="auto" panels anchored with CSS Anchor Positioning (anchor-size(width), flip fallbacks, viewport-center when the engine lacks it), focus that never enters the panel — the roving highlight rides aria-activedescendant + aria-owns off the input itself — and geometry from logical properties only, so dir="rtl" mirrors the chip order with zero branches.

const stack = $state<Tag[]>([{ value: 'svelte' }]);
const stackSuggestions: Tag[] = [
  { value: 'svelte' }, { value: 'typescript' }, { value: 'node' },
];

<!-- Enter / comma / Tab commits a chip; Backspace on empty deletes the
     last; typing filters the suggestion popover (↑/↓ + Enter) -->
<TagsInput label="stack" bind:tags={stack} suggestions={stackSuggestions} />

<!-- maxTags hides the input at the cap ("N/N tags"); duplicates flash the
     existing chip instead of adding; removable={false} pins a chip -->
<TagsInput label="targets" bind:tags={targets} maxTags={3} />