@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/fields/Select.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { type FieldOptionInput, type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLSelectAttributes, 'value' | 'size'> {
+    /** Full options, or bare strings when value and label are the same. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The selected option’s value; `''` selects the placeholder. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Disabled first option, shown while nothing is selected. */
+    placeholder?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — this control is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+}
+/** A native `<select>` in daisyUI styling over a list of options, with an optional placeholder and `FieldControl` wiring. */
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/fields/Slider.svelte

@@ -0,0 +1,194 @@
+<!-- @component
+A number, or a `[low, high]` range, picked from a bounded, stepped scale by dragging or with the arrow keys, on bits-ui's `Slider`.
+-->
+<!--
+  Slider — one component, two modes. `type="single"` binds a `number`;
+  `type="multiple"` binds a `number[]` with one thumb per entry. Built on
+  bits-ui's `Slider` (pointer drag, arrow / Home / End keys, non-crossing
+  thumbs) and wired through the `FieldControl` contract like every other
+  control in `fields/`.
+
+  Why not `TextInput type="range"` or daisyUI's `range` on a native input: a
+  native range has one thumb, no ticks and no consistent value readout, and
+  the keyboard model across two thumbs is exactly what AGENTS.md reserves for
+  bits-ui. The daisyUI `range` CLASSES are still the colour and size
+  vocabulary: `rangeTone` sets `color` (the fill, read as `currentColor`) and
+  `--range-thumb` (the thumb face), and `rangeSize` sets `--range-thumb-size`,
+  which the thumb and the track are sized from. The `range` class itself is
+  not used — it styles a native input's pseudo-elements.
+
+  ARIA contract (APG slider and multi-thumb slider): every thumb is
+  `role="slider"` with `aria-valuemin/max/now` and `aria-orientation` from
+  bits-ui. This file adds `aria-valuetext` from `formatValue`, the accessible
+  name, `aria-describedby` / `aria-invalid` from `FieldControl`, Page Up /
+  Page Down (bits-ui 2.20 handles only the arrows, Home and End; a page is a
+  tenth of the scale, at least one step), and one hidden `<input>` per thumb
+  under `name`, so a plain form posts the value.
+
+  Naming: a `<label for>` cannot name a `role="slider"` span, so the `id` goes
+  on the first thumb (the second is `${id}-1`) and the name comes from
+  `aria-labelledby={labelId}` — the visible label's id, which `FormField`
+  hands its control as `FieldControl.labelId` (#179). In range mode each
+  thumb is labelled by the label AND itself (`aria-labelledby="label thumb"`
+  with `aria-label` = its `thumbLabels` entry), so the second thumb reads
+  "Hours of sun Maximum". Outside a `FormField`, pass `label` instead; it
+  becomes the thumbs' `aria-label`.
+
+  The visible readout is `aria-hidden`: the same text is each thumb's
+  `aria-valuetext`, and announcing it twice would be noise.
+
+  Known limitation: bits-ui 2.20 gives every thumb the slider's global
+  `aria-valuemin` / `aria-valuemax` rather than its neighbour's value, so in
+  range mode a thumb over-reports how far it can move (it still cannot cross:
+  `autoSort` is left on). Not hand-patched, so a bits-ui fix lands for free.
+
+  `required` is accepted so `{...control}` spreads cleanly, but a slider
+  always has a value, so it changes nothing.
+-->
+<script lang="ts">import { Slider } from "bits-ui";
+import { getComponentsContext } from "../context.svelte.js";
+import { rangeTone } from "../ui/tones.js";
+import { rangeSize } from "./field-types.js";
+import { clampToNeighbours, pageStep } from "./slider-keys.js";
+let { type = "single", value = $bindable(), min = 0, max = 100, step = 1, orientation = "horizontal", ticks = false, formatValue, locales = getComponentsContext().locale(), showValue = true, thumbLabels = ["Minimum", "Maximum"], onCommit, name, disabled = false, tone = "primary", size = "md", label, id: idProp, labelId, describedBy = "", invalid = false, required: _required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+const multiple = $derived(type === "multiple");
+const vertical = $derived(orientation === "vertical");
+/** The bound value, normalised to one entry per thumb. */
+const values = $derived.by(() => {
+	if (multiple) return Array.isArray(value) ? value : [min, max];
+	return [typeof value === "number" ? value : min];
+});
+const numberFormat = $derived(new Intl.NumberFormat(locales));
+const format = $derived(formatValue ?? ((n) => numberFormat.format(n)));
+const readout = $derived(values.map((n) => format(n)).join(" – "));
+// bits-ui wants a mutable array; ours is readonly at the API.
+const steps = $derived(typeof step === "number" ? step : [...step]);
+/** What both `Slider.Root` branches share; only `type` and the bound value differ. */
+const rootProps = $derived({
+	onValueCommit: commit,
+	min,
+	max,
+	step: steps,
+	orientation,
+	disabled,
+	class: ["relative flex touch-none items-center select-none data-[disabled]:opacity-30", vertical ? "h-full w-(--range-thumb-size) flex-col" : "h-(--range-thumb-size) w-full"]
+});
+function thumbId(index) {
+	return index === 0 ? id : `${id}-${index}`;
+}
+function thumbLabel(index) {
+	return thumbLabels[index] ?? `${index + 1}`;
+}
+function ariaLabel(index) {
+	if (labelId !== undefined) return multiple ? thumbLabel(index) : undefined;
+	if (!multiple) return label;
+	return label === undefined ? thumbLabel(index) : `${label} ${thumbLabel(index)}`;
+}
+function ariaLabelledBy(index) {
+	if (labelId === undefined) return undefined;
+	return multiple ? `${labelId} ${thumbId(index)}` : labelId;
+}
+function commit(next) {
+	onCommit?.(next);
+}
+/** Page Up / Page Down: a tenth of the scale (at least one step), clamped between the neighbouring thumbs. */
+function onThumbKeydown(event, index) {
+	if (disabled || event.key !== "PageUp" && event.key !== "PageDown") return;
+	event.preventDefault();
+	const scale = {
+		min,
+		max,
+		step
+	};
+	const current = values[index] ?? min;
+	const next = clampToNeighbours(values, index, pageStep(current, event.key === "PageUp" ? 1 : -1, scale), scale);
+	if (next === current) return;
+	const updated = values.map((n, i) => i === index ? next : n);
+	value = multiple ? updated : next;
+	commit(multiple ? updated : next);
+}
+</script>
+
+{#snippet parts({
+  thumbItems,
+  tickItems,
+}: {
+  thumbItems: { index: number }[];
+  tickItems: { index: number }[];
+})}
+  <span
+    class={[
+      'relative grow overflow-hidden rounded-full bg-base-300',
+      vertical ? 'h-full w-[calc(var(--range-thumb-size)*0.5)]' : 'h-[calc(var(--range-thumb-size)*0.5)] w-full',
+    ]}
+  >
+    <Slider.Range class={['bg-current', vertical ? 'w-full' : 'h-full']} />
+  </span>
+  {#if ticks}
+    {#each tickItems as { index } (index)}
+      <Slider.Tick {index} class="size-1 rounded-full bg-base-content/30" />
+    {/each}
+  {/if}
+  {#each thumbItems as { index } (index)}
+    <Slider.Thumb
+      {index}
+      id={thumbId(index)}
+      aria-label={ariaLabel(index)}
+      aria-labelledby={ariaLabelledBy(index)}
+      aria-valuetext={format(values[index] ?? min)}
+      aria-describedby={describedBy === '' ? undefined : describedBy}
+      aria-invalid={invalid ? 'true' : undefined}
+      onkeydown={(event: KeyboardEvent) => onThumbKeydown(event, index)}
+      class="size-(--range-thumb-size) cursor-grab rounded-full border-4 border-current bg-(--range-thumb) shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current data-[active]:cursor-grabbing data-[disabled]:cursor-not-allowed"
+    />
+  {/each}
+{/snippet}
+
+<span
+  {...rest}
+  class={[
+    'inline-flex items-center gap-3',
+    vertical ? 'h-48 flex-col' : 'w-full',
+    rangeTone[invalid ? 'error' : tone],
+    rangeSize[size],
+    className,
+  ]}
+>
+  {#if multiple}
+    <Slider.Root
+      type="multiple"
+      bind:value={
+        () => [...values],
+        (next: number[]) => {
+          value = next;
+        }
+      }
+      {...rootProps}
+    >
+      {#snippet children(snippetProps)}{@render parts(snippetProps)}{/snippet}
+    </Slider.Root>
+  {:else}
+    <Slider.Root
+      type="single"
+      bind:value={
+        () => values[0] ?? min,
+        (next: number) => {
+          value = next;
+        }
+      }
+      {...rootProps}
+    >
+      {#snippet children(snippetProps)}{@render parts(snippetProps)}{/snippet}
+    </Slider.Root>
+  {/if}
+  {#if showValue}
+    <span aria-hidden="true" class="text-sm whitespace-nowrap text-base-content tabular-nums">{readout}</span>
+  {/if}
+  {#if name !== undefined}
+    {#each values as entry, index (index)}
+      <input type="hidden" {name} value={entry} {disabled} />
+    {/each}
+  {/if}
+</span>

package/dist/fields/Slider.svelte.d.ts

@@ -0,0 +1,100 @@
+import { Slider } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+import { type FieldSize } from './field-types.ts';
+interface SliderBaseProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'dir' | 'onchange' | 'children'> {
+    /**
+     * The lowest value.
+     * @defaultValue `0`
+     */
+    min?: number | undefined;
+    /**
+     * The highest value.
+     * @defaultValue `100`
+     */
+    max?: number | undefined;
+    /**
+     * Increment between values; an array gives explicit snap points.
+     * @defaultValue `1`
+     */
+    step?: number | readonly number[] | undefined;
+    /**
+     * Track direction.
+     * @defaultValue `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Draw a tick per step.
+     * @defaultValue `false`
+     */
+    ticks?: boolean | undefined;
+    /** Format a value for each thumb's `aria-valuetext` and the visible readout, e.g. `(v) => \`${v} cm\``. Falls back to `Intl.NumberFormat(locales)`. */
+    formatValue?: ((value: number) => string) | undefined;
+    /** BCP 47 locale(s) for the default formatter; falls back to the context's `locale()`. */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * Show the formatted value(s) beside the track.
+     * @defaultValue `true`
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Accessible name of each thumb in range mode, in order.
+     * @defaultValue `['Minimum', 'Maximum']`
+     */
+    thumbLabels?: readonly string[] | undefined;
+    /** Fired once per finished interaction (pointer-up, or a key press), for work that should not run per pixel. */
+    onCommit?: ((value: number | readonly number[]) => void) | undefined;
+    /** Posts the value under this name: one hidden input per thumb. */
+    name?: string | undefined;
+    /**
+     * Disables every thumb (and the hidden inputs, so nothing posts).
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * daisyUI tone of the fill and thumbs; `invalid` overrides it with `error`.
+     * @defaultValue `'primary'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI size step (the thumb diameter; the track is half of it).
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** Accessible name, for a slider outside a `FormField`; ignored when `labelId` is set. */
+    label?: string | undefined;
+    /** `FieldControl`: the first thumb's `id` (the others are `${id}-1`, …). Minted when omitted. */
+    id?: string | undefined;
+    /** `FieldControl`: the visible label's id; every thumb is `aria-labelledby` it. */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for each thumb's `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and the `error` tone.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /** `FieldControl`: accepted for the spread; a slider always has a value, so it has no effect. */
+    required?: boolean | undefined;
+}
+type Props = (SliderBaseProps & {
+    /**
+     * One thumb, binding a `number`.
+     * @defaultValue `'single'`
+     */
+    type?: 'single' | undefined;
+    /** The value. Bindable; defaults to `min`. */
+    value?: number | undefined;
+}) | (SliderBaseProps & {
+    /** One thumb per entry of `value`, binding a `number[]`. */
+    type: 'multiple';
+    /** The values, low to high. Bindable; defaults to `[min, max]`. */
+    value?: number[] | undefined;
+});
+/** A number, or a `[low, high]` range, picked from a bounded, stepped scale by dragging or with the arrow keys, on bits-ui's `Slider`. */
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/fields/TagsInput.svelte

@@ -0,0 +1,256 @@
+<!-- @component
+An open-ended list of short strings the reader types — tags, aliases, keywords — each a removable chip, with optional suggestions.
+-->
+<!--
+  TagsInput — type and press Enter (or a delimiter such as `,`) to commit a
+  tag; each tag renders as a chip with a remove button; Backspace in an empty
+  input reaches back into the tags. Optional suggestions, from a static list
+  or an async search, appear in a listbox.
+
+  Hand-rolled, and why (AGENTS.md: bits-ui owns interaction): bits-ui 2.20
+  has no tags input, and the token list plus one text input is a small
+  keyboard model, pinned key by key in `tests/fields/TagsInput.test.ts`. The
+  SUGGESTION half is not hand-rolled: with `suggestions` or `onSearch` the
+  text input is bits-ui's `Combobox` input, and the async lifecycle
+  (debounce, latest-wins, stale-while-revalidate) is the one `Combobox`
+  uses, `latest-search.svelte.ts`. Without either, no bits-ui is rendered.
+
+  ARIA contract (a composition — there is no single APG pattern): a
+  `role="list"` of tags, each `role="listitem"` holding its text and a
+  remove `<button>` named by `removeLabel(tag)`; then the text input, which
+  carries the `FieldControl` id (so `FormField`'s `<label for>` names it),
+  `aria-describedby` and `aria-invalid`, and is a combobox
+  (`aria-expanded`, `aria-controls`, `aria-activedescendant`) when
+  suggestions are on. The tag list is not folded into the description: adds
+  and removes reach assistive technology through a polite live region
+  (`addedMessage` / `removedMessage`).
+
+  Keyboard, in the text input: Enter or a delimiter commits the text (or, with
+  a suggestion highlighted, that suggestion; Enter on an empty input is left
+  alone so a wrapping form can submit); Backspace with empty text focuses the
+  last tag's remove button, and a second Backspace removes it; Arrow Left with
+  the caret at the start does the same move; Arrow Up / Down walk the
+  suggestions; a paste containing delimiters is split into one tag each. On a
+  remove button: Arrow Left / Right move between tags (Right past the last
+  returns to the input); Delete / Backspace / Enter / Space remove the tag.
+  Focus is never lost after a removal: it lands on the tag that took its
+  place, else the one before, else the input.
+
+  `required` means "at least one committed tag": while there are none, the
+  text input carries a custom validity error (`requiredMessage`), so the
+  browser blocks submission even when uncommitted text sits in the input;
+  `aria-required` is set throughout. `max` disables the input at the cap. `name`
+  posts one hidden input per tag.
+-->
+<script lang="ts">import { X } from "@lucide/svelte";
+import { Combobox } from "bits-ui";
+import { tick } from "svelte";
+import { inputSize } from "./field-types.js";
+import { LatestSearch } from "./latest-search.svelte.js";
+let { values = $bindable([]), name, delimiters = [","], normalise = (text) => text.trim() === "" ? undefined : text.trim(), allowDuplicates = false, max, suggestions, onSearch, debounceMs = 150, placeholder = "Add a tag", removeLabel = (tag) => `Remove ${tag}`, addedMessage = (tag) => `${tag} added`, removedMessage = (tag) => `${tag} removed`, tag: tagBody, disabled = false, size = "md", id: idProp, labelId: _labelId, describedBy = "", invalid = false, required = false, requiredMessage = "Add at least one tag.", class: className, ...rest } = $props();
+const uid = $props.id();
+const inputId = $derived(idProp ?? uid);
+let text = $state("");
+let announcement = $state("");
+let open = $state(false);
+/** The suggestion bits-ui currently has under the cursor, if any. */
+let highlighted = $state();
+let input = $state(null);
+const removeButtons = $state([]);
+const searcher = new LatestSearch(() => onSearch, () => debounceMs);
+$effect(() => () => searcher.dispose());
+const suggesting = $derived(suggestions !== undefined || onSearch !== undefined);
+const full = $derived(max !== undefined && values.length >= max);
+const present = $derived(new Set(values.map((value) => value.toLowerCase())));
+const visible = $derived.by(() => {
+	const pool = onSearch === undefined ? suggestions ?? [] : searcher.results;
+	const needle = text.trim().toLowerCase();
+	return pool.filter((entry) => (allowDuplicates || !present.has(entry.toLowerCase())) && (onSearch !== undefined || entry.toLowerCase().includes(needle)));
+});
+/** What both the plain and the combobox input carry. */
+const inputProps = $derived({
+	id: inputId,
+	placeholder,
+	autocomplete: "off",
+	disabled: disabled || full,
+	"aria-required": required ? "true" : undefined,
+	"aria-describedby": describedBy === "" ? undefined : describedBy,
+	"aria-invalid": invalid ? "true" : undefined,
+	class: "min-w-24 grow"
+});
+// Validity follows the committed tags, not the text: typed-but-uncommitted
+// text must not satisfy `required`.
+$effect(() => {
+	input?.setCustomValidity(required && values.length === 0 ? requiredMessage : "");
+});
+/** Add `raw` as a tag if `normalise`, the duplicate rule and `max` allow it. */
+function add(raw) {
+	if (full) return false;
+	const candidate = normalise(raw);
+	if (candidate === undefined) return false;
+	if (!allowDuplicates && present.has(candidate.toLowerCase())) return false;
+	values = [...values, candidate];
+	announcement = addedMessage(candidate);
+	return true;
+}
+function clearText() {
+	text = "";
+	if (input !== null) input.value = "";
+	searcher.clear();
+	open = false;
+}
+function commitText() {
+	if (add(text)) clearText();
+}
+async function remove(index) {
+	const removed = values[index];
+	if (removed === undefined) return;
+	values = values.filter((_, at) => at !== index);
+	announcement = removedMessage(removed);
+	await tick();
+	(removeButtons[index] ?? removeButtons[index - 1] ?? input)?.focus();
+}
+function focusTag(index) {
+	(removeButtons[index] ?? input)?.focus();
+}
+function typed(event) {
+	text = event.currentTarget.value;
+	if (!suggesting) return;
+	open = text.trim() !== "";
+	if (onSearch === undefined) return;
+	if (open) searcher.schedule(text);
+	else searcher.clear();
+}
+/** Enter commits the text, unless a suggestion is highlighted (bits-ui's) or there is no text (the form's). */
+function enterKey(event) {
+	if (open && highlighted !== undefined || text.trim() === "") return;
+	event.preventDefault();
+	commitText();
+}
+/** Backspace in an empty input, or Arrow Left at its start, moves into the tags. */
+function reachesTags(event) {
+	if (values.length === 0) return false;
+	if (event.key === "Backspace") return text === "";
+	const target = event.currentTarget;
+	return event.key === "ArrowLeft" && target.selectionStart === 0 && target.selectionEnd === 0;
+}
+function inputKeydown(event) {
+	// An IME uses Enter (and may use the delimiter keys) to confirm a candidate.
+	if (event.isComposing) return;
+	if (event.key === "Enter") {
+		enterKey(event);
+	} else if (delimiters.includes(event.key)) {
+		event.preventDefault();
+		commitText();
+	} else if (reachesTags(event)) {
+		event.preventDefault();
+		focusTag(values.length - 1);
+	}
+}
+function paste(event) {
+	const pasted = event.clipboardData?.getData("text/plain") ?? "";
+	const separators = [...delimiters, "\n"];
+	if (!separators.some((separator) => pasted.includes(separator))) return;
+	event.preventDefault();
+	// Splice the paste into the caret / selection, as a native paste would, then split.
+	const target = event.currentTarget;
+	const start = target.selectionStart ?? text.length;
+	const end = target.selectionEnd ?? text.length;
+	const pieces = separators.reduce((parts, separator) => parts.flatMap((part) => part.split(separator)), [`${text.slice(0, start)}${pasted}${text.slice(end)}`]);
+	for (const piece of pieces) add(piece);
+	clearText();
+}
+const removeKeys = new Set(["Delete", "Backspace"]);
+function tagKeydown(event, index) {
+	if (removeKeys.has(event.key)) {
+		event.preventDefault();
+		void remove(index);
+	} else if (event.key === "ArrowLeft") {
+		event.preventDefault();
+		focusTag(Math.max(0, index - 1));
+	} else if (event.key === "ArrowRight") {
+		event.preventDefault();
+		focusTag(index + 1);
+	}
+}
+/** A suggestion was chosen. bits-ui writes the item's label into the input after this returns, so clear on the next tick. */
+function pick(next) {
+	if (next === "") return;
+	add(next);
+	void tick().then(clearText);
+}
+</script>
+
+<div
+  {...rest}
+  class={[
+    'input h-auto min-h-(--size) w-full flex-wrap items-center gap-1 py-1',
+    inputSize[size],
+    invalid && 'input-error',
+    className,
+  ]}
+>
+  {#if values.length > 0}
+    <ul role="list" class="flex flex-wrap gap-1">
+      {#each values as value, index (`${index}:${value}`)}
+        <li class="badge badge-soft gap-1 pe-0">
+          {#if tagBody}{@render tagBody(value)}{:else}<span>{value}</span>{/if}
+          <button
+            bind:this={removeButtons[index]}
+            type="button"
+            {disabled}
+            class="btn btn-circle btn-ghost btn-xs"
+            onclick={() => void remove(index)}
+            onkeydown={(event) => tagKeydown(event, index)}
+          >
+            <X class="size-3" aria-hidden="true" />
+            <span class="sr-only">{removeLabel(value)}</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if suggesting}
+    <Combobox.Root
+      type="single"
+      bind:open
+      bind:value={() => '', pick}
+      inputValue={text}
+      {disabled}
+    >
+      <Combobox.Input {...inputProps} bind:ref={input} oninput={typed} onkeydown={inputKeydown} onpaste={paste} />
+      <Combobox.Portal>
+        <Combobox.Content
+          sideOffset={4}
+          class="menu bg-base-100 rounded-box border-base-300 z-50 max-h-72 min-w-48 overflow-auto border p-2 shadow-md"
+        >
+          <Combobox.Viewport>
+            {#each visible as entry (entry)}
+              <Combobox.Item
+                value={entry}
+                label={entry}
+                onHighlight={() => (highlighted = entry)}
+                onUnhighlight={() => {
+                  if (highlighted === entry) highlighted = undefined;
+                }}
+                class="rounded-field data-highlighted:bg-base-200 cursor-pointer px-3 py-2"
+              >
+                {entry}
+              </Combobox.Item>
+            {/each}
+          </Combobox.Viewport>
+        </Combobox.Content>
+      </Combobox.Portal>
+    </Combobox.Root>
+  {:else}
+    <input {...inputProps} bind:this={input} type="text" oninput={typed} onkeydown={inputKeydown} onpaste={paste} />
+  {/if}
+
+  {#if name !== undefined}
+    {#each values as value, index (`${index}:${value}`)}
+      <input type="hidden" {name} {value} {disabled} />
+    {/each}
+  {/if}
+  <p class="sr-only" aria-live="polite">{announcement}</p>
+</div>

package/dist/fields/TagsInput.svelte.d.ts

@@ -0,0 +1,102 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> {
+    /**
+     * The tags. Bindable.
+     * @defaultValue `[]`
+     */
+    values?: string[] | undefined;
+    /** Posts each tag under this name, one hidden input per tag. */
+    name?: string | undefined;
+    /**
+     * Characters that commit the current text as a tag, besides Enter; a paste is split on them too.
+     * @defaultValue `[',']`
+     */
+    delimiters?: readonly string[] | undefined;
+    /**
+     * Normalise or refuse a candidate; return `undefined` to refuse it.
+     * @defaultValue trims, and refuses an empty string
+     */
+    normalise?: ((text: string) => string | undefined) | undefined;
+    /**
+     * Allow a tag already present (compared case-insensitively after `normalise`).
+     * @defaultValue `false`
+     */
+    allowDuplicates?: boolean | undefined;
+    /** Cap on the number of tags; the input disables at the cap. */
+    max?: number | undefined;
+    /** Static suggestions, filtered by the typed text. */
+    suggestions?: readonly string[] | undefined;
+    /** Async suggestions, debounced and latest-wins; `signal` aborts a superseded search. */
+    onSearch?: ((query: string, signal: AbortSignal) => Promise<readonly string[]>) | undefined;
+    /**
+     * Quiet time before `onSearch` runs.
+     * @defaultValue `150`
+     */
+    debounceMs?: number | undefined;
+    /**
+     * Placeholder in the text input.
+     * @defaultValue `'Add a tag'`
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of a tag's remove button.
+     * @defaultValue `(tag) => \`Remove ${tag}\``
+     */
+    removeLabel?: ((tag: string) => string) | undefined;
+    /**
+     * Live-region text after a tag is added.
+     * @defaultValue `(tag) => \`${tag} added\``
+     */
+    addedMessage?: ((tag: string) => string) | undefined;
+    /**
+     * Live-region text after a tag is removed.
+     * @defaultValue `(tag) => \`${tag} removed\``
+     */
+    removedMessage?: ((tag: string) => string) | undefined;
+    /** Renders one tag's body; defaults to its text. */
+    tag?: Snippet<[string]> | undefined;
+    /**
+     * Disables the input and every remove button.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the text input's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the text input is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for the input's `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and `input-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: at least one tag is required.
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation message while `required` and no tag has been committed.
+     * @defaultValue `'Add at least one tag.'`
+     */
+    requiredMessage?: string | undefined;
+}
+/** An open-ended list of short strings the reader types — tags, aliases, keywords — each a removable chip, with optional suggestions. */
+declare const TagsInput: import("svelte").Component<Props, {}, "values">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;