@thomasfosterau/components 0.1.0 → 0.2.0

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

@@ -0,0 +1,75 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FieldOption, type FieldOptionInput, type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> {
+    /** The options; bare strings are both value and label. */
+    options: readonly FieldOptionInput[];
+    /**
+     * The selected values, in option order. Bindable.
+     * @defaultValue `[]`
+     */
+    values?: string[] | undefined;
+    /**
+     * Trigger text while nothing is selected.
+     * @defaultValue `'Select…'`
+     */
+    placeholder?: string | undefined;
+    /** Posts each selected value under this name, one hidden input per value. */
+    name?: string | undefined;
+    /**
+     * Show at most this many labels in the trigger, then the overflow count.
+     * @defaultValue `2`
+     */
+    maxShown?: number | undefined;
+    /**
+     * Formats the overflow count, e.g. `(n) => \`+${n} more\``.
+     * @defaultValue `(n) => \`+${n}\``
+     */
+    formatOverflow?: ((hidden: number) => string) | undefined;
+    /** Renders one option's body (an icon, a description); defaults to its label. */
+    option?: Snippet<[FieldOption, {
+        selected: boolean;
+    }]> | undefined;
+    /**
+     * Render the listbox into `<body>`.
+     * @defaultValue `true`
+     */
+    portal?: boolean | undefined;
+    /**
+     * Disables the trigger.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /**
+     * daisyUI size step of the trigger.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the trigger's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the trigger is a
+     * `<button>`, 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 `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and `select-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: sets `aria-required` on the trigger.
+     * @defaultValue `false`
+     */
+    required?: boolean | undefined;
+}
+/** Several choices from a known list in a compact trigger that summarises them, on bits-ui's `Select` (`type="multiple"`). */
+declare const MultiSelect: import("svelte").Component<Props, {}, "values">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/fields/NumberField.svelte

@@ -0,0 +1,190 @@
+<!-- @component
+An exact number the reader types or nudges, shown locale-formatted (units, percent, currency) with − / + stepper buttons: the APG spinbutton.
+-->
+<!--
+  NumberField — a `role="spinbutton"` text input showing its value through
+  `Intl.NumberFormat`, plus − / + buttons, stepping clamped to `min` / `max`.
+
+  Hand-rolled, and why that is acceptable here (AGENTS.md asks for the
+  reason): bits-ui 2.20 has no number field, and the APG spinbutton pattern is
+  one input plus two buttons — no popover, no roving focus, no ARIA
+  relationship beyond `aria-controls` — so every part of the contract is
+  small and pinned by `tests/fields/NumberField.test.ts`. It replaces the
+  native `<input type="number">` for callers who need what that cannot do:
+  locale formatting and parsing ("1.234,5" in `de-DE`), a `number` value
+  rather than a string, no accidental scroll-wheel changes (there is no wheel
+  handling at all), and stepper buttons that are labelled and styleable.
+
+  Editing: while focused the input holds the text as typed. On blur or Enter
+  it is parsed with the locale's separators (`number-format.ts`), clamped to
+  `min` / `max`, rounded to the step's or the format's precision, written to
+  `value`, re-formatted, and passed to `onCommit`. Unparseable text reverts
+  to the last valid value; clearing the field commits `undefined`.
+
+  ARIA contract (APG spinbutton): the input is `role="spinbutton"` with
+  `aria-valuenow`, `aria-valuemin` / `aria-valuemax` when set, and
+  `aria-valuetext` — the formatted string, so "45%" is read rather than
+  "0.45" — plus `inputmode` (`numeric` when the format has no fraction
+  digits, else `decimal`) and the `FieldControl` wiring. The − / + are real
+  buttons named by `decrementLabel` / `incrementLabel`, `aria-controls` the
+  input, `tabindex="-1"` so the field stays one tab stop, and disabled at the
+  bounds. Keys: Arrow Up / Down ± `step`, Page Up / Down ± `largeStep`,
+  Home / End to `min` / `max` (when set), Enter commits.
+
+  Press-and-hold on − / + auto-repeats: one step on press, then after
+  `REPEAT_DELAY_MS` it repeats, speeding up to `REPEAT_MIN_MS`, as GTK's spin
+  button, WinUI's NumberBox and SwiftUI's Stepper do. The pointer is captured,
+  so moving off the button keeps the capture and `pointerup` /
+  `pointercancel` / `lostpointercapture` (or reaching a bound) stops it. A
+  pointer press never moves focus off the input. A click with no pointer
+  press before it (assistive technology activating the button) steps once.
+
+  `name` posts the raw number through a hidden input, never the formatted
+  text, so a server never parses "1.234,5 cm".
+-->
+<script lang="ts">import { Minus, Plus } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import { inputButtonSize, inputSize } from "./field-types.js";
+import { clamp, formatNumber, parseNumber, roundTo, valuePrecision } from "./number-format.js";
+/** How long a press is held before it starts repeating. */
+const REPEAT_DELAY_MS = 400;
+/** The first repeat interval; each repeat shortens it towards `REPEAT_MIN_MS`. */
+const REPEAT_START_MS = 150;
+const REPEAT_MIN_MS = 40;
+let { value = $bindable(), min, max, step = 1, largeStep, formatOptions, locales = getComponentsContext().locale(), showStepper = true, decrementLabel = "Decrease", incrementLabel = "Increase", onCommit, name, size = "md", disabled = false, id: idProp, describedBy = "", labelId: _labelId, invalid = false, class: className, onkeydown, onblur, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+const formatted = $derived(formatNumber(value, locales, formatOptions));
+/** The input's text: the formatted value, overwritten by typing until the next commit. */
+let text = $derived(formatted);
+const precision = $derived(valuePrecision(step, locales, formatOptions));
+const atMin = $derived(value !== undefined && min !== undefined && value <= min);
+const atMax = $derived(value !== undefined && max !== undefined && value >= max);
+let input = $state(null);
+let repeat;
+/** Write a new value: clamp, round, re-format, and tell `onCommit`. */
+function commit(next) {
+	value = next === undefined ? undefined : roundTo(clamp(next, min, max), precision);
+	text = formatNumber(value, locales, formatOptions);
+	onCommit?.(value);
+}
+function commitText() {
+	if (text === formatted) return;
+	const parsed = parseNumber(text, locales, formatOptions);
+	if (parsed !== undefined && Number.isNaN(parsed)) {
+		text = formatted;
+		return;
+	}
+	commit(parsed);
+}
+/** Move by `delta`; from empty, land on `min` (or 0) rather than stepping. */
+function stepBy(delta) {
+	commit(value === undefined ? min ?? 0 : value + delta);
+}
+const keySteps = {
+	ArrowUp: () => step,
+	ArrowDown: () => -step,
+	PageUp: () => largeStep ?? step * 10,
+	PageDown: () => -(largeStep ?? step * 10)
+};
+function handleKeydown(event) {
+	const delta = keySteps[event.key]?.();
+	if (delta !== undefined) {
+		event.preventDefault();
+		stepBy(delta);
+	} else if (event.key === "Home" && min !== undefined) {
+		event.preventDefault();
+		commit(min);
+	} else if (event.key === "End" && max !== undefined) {
+		event.preventDefault();
+		commit(max);
+	} else if (event.key === "Enter") {
+		commitText();
+	}
+}
+function stopRepeat() {
+	clearTimeout(repeat);
+	repeat = undefined;
+}
+/** Step now, then keep stepping while held, faster each time, until a bound. */
+function startRepeat(event, delta) {
+	if (event.button !== 0 || disabled) return;
+	event.preventDefault();
+	input?.focus();
+	try {
+		event.currentTarget.setPointerCapture(event.pointerId);
+	} catch {}
+	stepBy(delta);
+	const tick = (interval) => {
+		repeat = setTimeout(() => {
+			if (delta > 0 && atMax || delta < 0 && atMin) return stopRepeat();
+			stepBy(delta);
+			tick(Math.max(REPEAT_MIN_MS, interval * .8));
+		}, interval);
+	};
+	stopRepeat();
+	repeat = setTimeout(() => tick(REPEAT_START_MS), REPEAT_DELAY_MS - REPEAT_START_MS);
+}
+/** A click that no pointer press preceded (`detail === 0`): assistive technology, step once. */
+function clickStep(event, delta) {
+	if (event.detail === 0) stepBy(delta);
+}
+</script>
+
+{#snippet stepper(delta: number, label: string, bounded: boolean)}
+  <button
+    type="button"
+    tabindex="-1"
+    aria-controls={id}
+    disabled={disabled || bounded}
+    class={['btn btn-square btn-ghost', inputButtonSize[size]]}
+    onpointerdown={(event) => startRepeat(event, delta)}
+    onpointerup={stopRepeat}
+    onpointercancel={stopRepeat}
+    onlostpointercapture={stopRepeat}
+    onclick={(event) => clickStep(event, delta)}
+  >
+    {#if delta < 0}
+      <Minus class="size-4" aria-hidden="true" />
+    {:else}
+      <Plus class="size-4" aria-hidden="true" />
+    {/if}
+    <span class="sr-only">{label}</span>
+  </button>
+{/snippet}
+
+<div class={['input w-full pe-1', inputSize[size], invalid && 'input-error', className]}>
+  <input
+    {...rest}
+    bind:this={input}
+    {id}
+    type="text"
+    role="spinbutton"
+    autocomplete="off"
+    inputmode={formatOptions?.maximumFractionDigits === 0 ? 'numeric' : 'decimal'}
+    {disabled}
+    aria-valuenow={value}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuetext={value === undefined ? undefined : formatted}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    aria-invalid={invalid ? 'true' : undefined}
+    bind:value={text}
+    onkeydown={(event) => {
+      handleKeydown(event);
+      onkeydown?.(event);
+    }}
+    onblur={(event) => {
+      stopRepeat();
+      commitText();
+      onblur?.(event);
+    }}
+  />
+  {#if showStepper}
+    {@render stepper(-step, decrementLabel, atMin)}
+    {@render stepper(step, incrementLabel, atMax)}
+  {/if}
+  {#if name !== undefined}
+    <input type="hidden" {name} value={value === undefined ? '' : String(value)} {disabled} />
+  {/if}
+</div>

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

@@ -0,0 +1,76 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+import { type NumberLocales } from './number-format.ts';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'size' | 'min' | 'max' | 'step' | 'inputmode' | 'children'> {
+    /** The number, or `undefined` while the field is empty. Bindable. */
+    value?: number | undefined;
+    /** The lowest value; also what Home goes to. */
+    min?: number | undefined;
+    /** The highest value; also what End goes to. */
+    max?: number | undefined;
+    /**
+     * Increment for the buttons and the arrow keys.
+     * @defaultValue `1`
+     */
+    step?: number | undefined;
+    /**
+     * Increment for Page Up / Page Down.
+     * @defaultValue `step * 10`
+     */
+    largeStep?: number | undefined;
+    /** How the value is displayed and parsed, e.g. `{ style: 'unit', unit: 'centimeter' }`, `{ style: 'percent' }`, `{ style: 'currency', currency: 'AUD' }`. */
+    formatOptions?: Intl.NumberFormatOptions | undefined;
+    /** BCP 47 locale(s) to format and parse in; falls back to the context's `locale()`. */
+    locales?: NumberLocales;
+    /**
+     * Show the − / + buttons.
+     * @defaultValue `true`
+     */
+    showStepper?: boolean | undefined;
+    /**
+     * Accessible name of the − button.
+     * @defaultValue `'Decrease'`
+     */
+    decrementLabel?: string | undefined;
+    /**
+     * Accessible name of the + button.
+     * @defaultValue `'Increase'`
+     */
+    incrementLabel?: string | undefined;
+    /** Called with the committed number on blur, Enter or a step — not on every keystroke. */
+    onCommit?: ((value: number | undefined) => void) | undefined;
+    /** Posts the raw number (not the formatted text) under this name, through a hidden input. */
+    name?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /**
+     * Disables the input and both buttons.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the input's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the 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`: the field is in error — sets `aria-invalid` and `input-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** An exact number the reader types or nudges, shown locale-formatted (units, percent, currency) with − / + stepper buttons: the APG spinbutton. */
+declare const NumberField: import("svelte").Component<Props, {}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/fields/PasswordInput.svelte

@@ -0,0 +1,95 @@
+<!-- @component
+A password field with a "Show password" toggle and the `autocomplete` a password manager needs to fill or generate it.
+-->
+<!--
+  PasswordInput — a `TextInput`-styled password field inside a daisyUI
+  `input` composite, with a trailing toggle that flips the input between
+  `type="password"` and `type="text"`, and a `purpose` prop that sets
+  `autocomplete` to `current-password` or `new-password`, which is what makes
+  a password manager fill (sign-in) or offer to generate (sign-up).
+
+  Why not a `revealable` prop on `TextInput`: `TextInput` IS a bare `<input>`,
+  and a toggle needs a wrapper and a button, which would move where `class`
+  and `...rest` land for every existing caller. So this follows `SearchInput`,
+  the composite-input precedent: a `<div class="input">` (not a `<label>`,
+  which would fold the toggle's name into the input's accessible name when
+  the field sits inside `FormField`), the native input inside it, a trailing
+  button. `...rest` (`id`, `name`, `minlength`, `aria-*`, `data-*`) goes on
+  the inner input, the element a label, a test and a form need; `class` goes
+  on the wrapper and `inputClass` on the input. `passwordrules` is passed
+  through when given, never defaulted.
+
+  ARIA contract: the toggle is an APG button with `aria-pressed` — a real
+  `<button type="button">` (so it never submits the form) with a CONSTANT
+  name, `showLabel`, and a pressed state ("Show password, toggle button,
+  pressed"), rather than a name that swaps between "Show" and "Hide", which
+  some screen readers do not re-announce. It `aria-controls` the input; its
+  icon is `aria-hidden`. Activating it leaves focus on the toggle and keeps
+  the input's selection range across the type flip. The input keeps native
+  semantics plus `FieldControl`'s `aria-describedby`, `aria-invalid` and
+  `required`.
+
+  The field is hidden again when its form submits, so a revealed password
+  does not survive into the browser's form-restore cache.
+-->
+<script lang="ts">import { Eye, EyeOff } from "@lucide/svelte";
+import { inputButtonSize, inputSize } from "./field-types.js";
+let { value = $bindable(""), purpose = "current", revealed = $bindable(false), revealable = true, showLabel = "Show password", size = "md", inputClass, id: idProp, describedBy = "", labelId: _labelId, invalid = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+let input = $state(null);
+/**
+* Flip `revealed`, keeping the caret / selection where it was. Chromium
+* rebuilds a text field's inner editor when its `type` changes and drops the
+* selection at the next rendering step, so the range is put back in the
+* following animation frame.
+*/
+function toggle() {
+	const start = input?.selectionStart ?? null;
+	const end = input?.selectionEnd ?? null;
+	revealed = !revealed;
+	if (start === null || end === null) return;
+	requestAnimationFrame(() => input?.setSelectionRange(start, end));
+}
+// Hide again on submit, so a revealed password is not restored with the form.
+$effect(() => {
+	const form = input?.form;
+	if (form === null || form === undefined) return;
+	const hide = () => {
+		revealed = false;
+	};
+	form.addEventListener("submit", hide);
+	return () => form.removeEventListener("submit", hide);
+});
+</script>
+
+<div class={['input w-full', inputSize[size], invalid && 'input-error', revealable && 'pe-1', className]}>
+  <input
+    {...rest}
+    bind:this={input}
+    {id}
+    type={revealed ? 'text' : 'password'}
+    autocomplete={purpose === 'new' ? 'new-password' : 'current-password'}
+    bind:value
+    aria-invalid={invalid ? 'true' : undefined}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    class={inputClass}
+  />
+  {#if revealable}
+    <button
+      type="button"
+      aria-pressed={revealed}
+      aria-controls={id}
+      disabled={rest.disabled === true}
+      class={['btn btn-square btn-ghost', inputButtonSize[size]]}
+      onclick={toggle}
+    >
+      {#if revealed}
+        <EyeOff class="size-4" aria-hidden="true" />
+      {:else}
+        <Eye class="size-4" aria-hidden="true" />
+      {/if}
+      <span class="sr-only">{showLabel}</span>
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,58 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size' | 'autocomplete'> {
+    /**
+     * The password. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Which password: sets `autocomplete` to `current-password` (sign-in) or `new-password` (sign-up, change password).
+     * @defaultValue `'current'`
+     */
+    purpose?: 'current' | 'new' | undefined;
+    /**
+     * Whether the text is currently shown. Bindable.
+     * @defaultValue `false`
+     */
+    revealed?: boolean | undefined;
+    /**
+     * Render the show/hide toggle; without it the field is a styled `type="password"`.
+     * @defaultValue `true`
+     */
+    revealable?: boolean | undefined;
+    /**
+     * The toggle's accessible name; its `aria-pressed` state says whether it is on.
+     * @defaultValue `'Show password'`
+     */
+    showLabel?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** Extra classes on the inner `<input>`; `class` goes on the wrapper. */
+    inputClass?: string | undefined;
+    /** `FieldControl`: the input's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the 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`: the field is in error — sets `aria-invalid` and `input-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** A password field with a "Show password" toggle and the `autocomplete` a password manager needs to fill or generate it. */
+declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "revealed">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/fields/PickerPopover.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+The trigger and calendar popover `DatePicker` and `DateRangePicker` share; internal, not exported.
+-->
+<!--
+  PickerPopover — the calendar button that sits in a picker's shell, and
+  the popover it opens. `parts` is `DatePicker` or `DateRangePicker`; both
+  expose `Trigger`, `Portal`, `Content` and `Calendar` with the same props,
+  and their calendar body is `CalendarMonths`, the same one `Calendar`
+  renders inline.
+
+  The trigger is icon-only, so it is named by `triggerLabel` ("Choose
+  date"), the glyph `aria-hidden`; bits-ui gives it `aria-haspopup="dialog"`
+  and `aria-expanded`. The popover is a `role="dialog"` named by
+  `calendarLabel`; bits-ui moves focus into the grid, closes on Escape and
+  returns focus to the trigger.
+-->
+<script lang="ts">import { Calendar as CalendarIcon } from "@lucide/svelte";
+import { Portal } from "bits-ui";
+import CalendarMonths from "./CalendarMonths.svelte";
+let { parts, triggerLabel, calendarLabel, months, disabled } = $props();
+// SAFETY: both namespaces' Trigger / Content / Calendar are the same
+// bits-ui popover and calendar parts under two names. (`DateRangePicker`
+// exports no `Portal`, so the shared utility is used for both.)
+const P = $derived(parts);
+</script>
+
+<P.Trigger {disabled}>
+  {#snippet child({ props })}
+    <button {...props} type="button" class="btn btn-ghost btn-xs btn-square ms-1" aria-label={triggerLabel}>
+      <CalendarIcon class="size-4" aria-hidden="true" />
+    </button>
+  {/snippet}
+</P.Trigger>
+<Portal>
+  <P.Content
+    sideOffset={6}
+    role="dialog"
+    aria-label={calendarLabel}
+    class="card card-border bg-base-100 rounded-box z-50 p-3 shadow-md"
+  >
+    <P.Calendar>
+      {#snippet children({ months: grid, weekdays })}
+        <CalendarMonths {parts} {...months} months={grid} {weekdays} />
+      {/snippet}
+    </P.Calendar>
+  </P.Content>
+</Portal>

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

@@ -0,0 +1,16 @@
+import { type DatePicker, type DateRangePicker } from 'bits-ui';
+interface Props {
+    parts: typeof DatePicker | typeof DateRangePicker;
+    triggerLabel: string;
+    calendarLabel: string;
+    months: {
+        readonly locale: string;
+        readonly previousLabel: string;
+        readonly nextLabel: string;
+    };
+    disabled: boolean;
+}
+/** The trigger and calendar popover `DatePicker` and `DateRangePicker` share; internal, not exported. */
+declare const PickerPopover: import("svelte").Component<Props, {}, "">;
+type PickerPopover = ReturnType<typeof PickerPopover>;
+export default PickerPopover;

package/dist/fields/PinInput.svelte

@@ -0,0 +1,83 @@
+<!-- @component
+A fixed-length code — a sign-in code, a TOTP, an invite code — typed one character per visible cell into one real input, on bits-ui's `PinInput`.
+-->
+<!--
+  PinInput — one real `<input>` (bits-ui `PinInput`) drawn as a row of
+  cells. Being one input is the whole point: paste, SMS autofill
+  (`autocomplete="one-time-code"`), password managers and form posting all
+  treat it as one field, and a screen reader hears one text field rather
+  than six unlabelled one-character edits — the failure mode of the
+  hand-rolled six-`<input maxlength=1>` pattern.
+
+  ARIA contract: there is no APG pattern for segmented code entry; the
+  contract is "a single text input". The input carries the `FieldControl` id
+  (bits-ui `inputId`), so `FormField`'s `<label for>` names it, plus
+  `aria-describedby`, `aria-invalid`, `required`, `inputmode`,
+  `autocomplete` and `maxlength`. The cells are `aria-hidden` presentation
+  and nothing in them is focusable. The keyboard is the platform's: typing
+  advances, Backspace deletes, arrows move the caret, paste fills the code;
+  bits-ui draws the fake caret in the active cell.
+
+  `charset` maps to `inputmode` and to bits-ui's own patterns
+  (`REGEXP_ONLY_DIGITS` / `REGEXP_ONLY_DIGITS_AND_CHARS`), which both reject
+  a keystroke that does not match and become the input's `pattern`.
+  `pasteTransformer` defaults to stripping whitespace and hyphens, so a code
+  pasted from an email as "123 456" or "123-456" lands as "123456".
+
+  Styling decision (the issue asked for one to be recorded): bits-ui's
+  explicit `PinInput.Cell` elements, styled with `input`-like utilities and
+  the literal `pinCellSize` table, rather than daisyUI `otp` on the hidden
+  input. bits-ui renders the real input transparent over the cells, so
+  `otp`'s CSS-drawn cells would sit on an invisible element, and bits-ui's
+  fake caret and its password-manager badge offset
+  (`pushPasswordManagerStrategy`) are positioned against the cells.
+
+  `masked` renders `•` in each filled cell in place of the character (bits-ui
+  2.20 has no masking prop). The input itself is unchanged — it keeps
+  `autocomplete` so a password manager can still fill it, and it is
+  transparent, so the characters are never drawn.
+-->
+<script lang="ts">import { PinInput, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
+import { pinCellSize } from "./field-types.js";
+let { value = $bindable(""), length = 6, charset = "numeric", masked = false, onComplete, pasteTransformer = (text) => text.replace(/[\s-]/g, ""), autocomplete = "one-time-code", size = "md", disabled = false, id, describedBy = "", labelId: _labelId, invalid = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const inputId = $derived(id ?? uid);
+</script>
+
+<PinInput.Root
+  {...rest}
+  bind:value
+  {inputId}
+  maxlength={length}
+  pattern={charset === 'numeric' ? REGEXP_ONLY_DIGITS : REGEXP_ONLY_DIGITS_AND_CHARS}
+  inputmode={charset === 'numeric' ? 'numeric' : 'text'}
+  {autocomplete}
+  {disabled}
+  {pasteTransformer}
+  onComplete={(code: string) => onComplete?.(code)}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  aria-invalid={invalid ? 'true' : undefined}
+  class={['flex items-center gap-2 has-disabled:opacity-50', className]}
+>
+  {#snippet children({ cells })}
+    {#each cells as cell, index (index)}
+      <PinInput.Cell
+        {cell}
+        aria-hidden="true"
+        class={[
+          'relative flex items-center justify-center rounded-field border bg-base-100 font-mono',
+          'data-active:outline-2 data-active:outline-offset-2',
+          invalid ? 'border-error data-active:outline-error' : 'border-base-content/20 data-active:outline-primary',
+          pinCellSize[size],
+        ]}
+      >
+        {#if cell.char !== null && cell.char !== undefined}
+          {masked ? '•' : cell.char}
+        {/if}
+        {#if cell.hasFakeCaret}
+          <span class="h-1/2 w-px animate-pulse bg-base-content motion-reduce:animate-none"></span>
+        {/if}
+      </PinInput.Cell>
+    {/each}
+  {/snippet}
+</PinInput.Root>