@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/fields/FormField.svelte

@@ -0,0 +1,78 @@
+<!-- @component
+The label, hint and errors frame around one control, handing it the `FieldControl` wiring.
+-->
+<!--
+  FormField — the label + hint + errors frame around one control.
+
+  The control is a snippet that receives a `FieldControl` (`id`, `labelId`,
+  `describedBy`, `invalid`, `required`) to spread onto the primitive, so the
+  label's `for`, the control's `aria-describedby` and `aria-invalid`, and the
+  error region's `role="alert"` all stay wired together from a single `id`.
+  Neither side has to know the other's markup, which is what lets a caller
+  drop any of the field primitives — or their own `<input>` — into the slot.
+
+  ARIA contract: `<label for>` names the control (so clicking the text focuses
+  it). `<label for>` only reaches a labelable element (`input`, `select`,
+  `textarea`, `button`, `meter`, `output`, `progress`), so the label also
+  carries an id — `labelId` — for a role-based control (a slider thumb, a
+  `group` / `radiogroup` root) to point `aria-labelledby` at, and a click on
+  the label is forwarded to such a control: it focuses the control itself if
+  it is focusable, else its first focusable descendant (a roving group's
+  current tab stop). `describedBy` lists the hint's id then the error region's id, in that
+  reading order, and is empty when there is neither; `invalid` is true exactly
+  when there is at least one error. The required marker is a `*` that is
+  `aria-hidden` beside a visually-hidden `requiredLabel`, both inside the
+  `<label>`, so the accessible name reads "Scientific name (required)" rather
+  than "Scientific name star".
+
+  `errors` is a LIST. A field that fails several rules says so; collapsing
+  them to the first message is a decision the call site should make, not one
+  this frame makes for it.
+-->
+<script lang="ts">import FieldErrors from "./FieldErrors.svelte";
+let { id: idProp, label, hint, errors = [], required = false, requiredLabel = "(required)", children, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+const labelId = $derived(`${id}-label`);
+const hintId = $derived(`${id}-hint`);
+const errorId = $derived(`${id}-error`);
+const invalid = $derived(errors.length > 0);
+const control = $derived({
+	id,
+	labelId,
+	describedBy: [hint === undefined ? "" : hintId, invalid ? errorId : ""].filter((part) => part !== "").join(" "),
+	invalid,
+	required
+});
+// The elements a `<label for>` can name; the platform handles those.
+const LABELABLE = "button, input, meter, output, progress, select, textarea";
+// `<label for>` does nothing for a role-based control, so forward the click:
+// focus the control if it is focusable, else its first focusable descendant.
+const forwardClick = () => {
+	const control = document.getElementById(id);
+	if (control === null || control.matches(LABELABLE)) return;
+	const focusable = (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled");
+	const target = focusable(control) ? control : Array.from(control.querySelectorAll("*")).find(focusable);
+	target?.focus();
+};
+</script>
+
+<div {...rest} class={['fieldset', className]}>
+  <!-- The click handler restores what `<label for>` does natively — a pointer
+       shortcut to the control — for a control `for` cannot reach. Keyboard
+       users reach the control itself with Tab, as with any label, so there is
+       no key handler to add and the label stays non-interactive. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+  <label class="label" for={id} id={labelId} onclick={forwardClick}>
+    <span>{label}</span>
+    {#if required}
+      <span class="text-error" aria-hidden="true">*</span>
+      <span class="sr-only">{requiredLabel}</span>
+    {/if}
+  </label>
+  {@render children(control)}
+  {#if hint !== undefined}
+    <p class="fieldset-label" id={hintId}>{hint}</p>
+  {/if}
+  <FieldErrors {errors} id={errorId} />
+</div>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FieldControl } from './field-types.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The control's `id`. Minted when omitted. */
+    id?: string | undefined;
+    /** Visible label; becomes the control's accessible name. */
+    label: string;
+    /** Guidance rendered under the control. */
+    hint?: string | undefined;
+    /**
+     * Validation messages; any at all marks the control invalid.
+     * @defaultValue `[]`
+     */
+    errors?: readonly string[] | undefined;
+    /** Marks the control required and reads `requiredLabel` after the label. */
+    required?: boolean | undefined;
+    /**
+     * Read out after the label when `required`.
+     * @defaultValue `'(required)'`
+     */
+    requiredLabel?: string | undefined;
+    /** The control; receives the `FieldControl` props to spread. */
+    children: Snippet<[FieldControl]>;
+}
+/** The label, hint and errors frame around one control, handing it the `FieldControl` wiring. */
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/fields/ImageInput.svelte

@@ -0,0 +1,87 @@
+<!-- @component
+A `FileInput` that also measures the chosen image and previews it.
+-->
+<!--
+  ImageInput — a `FileInput` that also measures the picture and previews it.
+
+  It exists for one thing a server cannot do cheaply: read a file's INTRINSIC
+  DIMENSIONS. `createImageBitmap` (via `media/image-dimensions.ts`) decodes it in the browser the moment it is
+  chosen, so the form has `width` / `height` to submit alongside the binary and
+  the page that later renders the image can reserve its box on first paint
+  instead of reflowing when it loads.
+
+  The preview is an object URL, so the file never leaves the browser until the
+  form is submitted. The URL is revoked as soon as it is replaced and again on
+  teardown — an un-revoked object URL pins the whole file in memory for the
+  life of the document.
+
+  A decode failure means the browser could not read the file as an image; the
+  server's own media-type gate will refuse it too, so the dimensions are left
+  unset rather than blocking the submission.
+
+  ARIA contract: `FileInput`'s. The preview `<img>` is named by `previewAlt`,
+  and the measured size is a `<figcaption>` rather than an `aria-label`,
+  because it is information about the file that a sighted reader gets too.
+-->
+<script lang="ts">import { imageDimensions } from "../media/image-dimensions.js";
+import FileInput from "./FileInput.svelte";
+let { file = $bindable(), width = $bindable(), height = $bindable(), previewAlt = "Preview of the selected image", accept = "image/jpeg,image/png,image/gif,image/webp,image/avif", name, class: className, ...rest } = $props();
+let previewUrl = $state();
+let measuring = $state(false);
+// Revoke the PREVIOUS url whenever this one changes, and the last one when
+// the component goes away. Reading `previewUrl` inside the effect is what
+// makes the cleanup run on every change rather than only on teardown.
+$effect(() => {
+	const url = previewUrl;
+	return () => {
+		if (url !== undefined) URL.revokeObjectURL(url);
+	};
+});
+const measure = async (chosen) => {
+	measuring = true;
+	try {
+		({width, height} = await imageDimensions(chosen));
+	} catch {
+		width = undefined;
+		height = undefined;
+	} finally {
+		measuring = false;
+	}
+};
+const select = (chosen) => {
+	if (chosen === undefined) {
+		previewUrl = undefined;
+		width = undefined;
+		height = undefined;
+		return;
+	}
+	previewUrl = URL.createObjectURL(chosen);
+	void measure(chosen);
+};
+</script>
+
+<div class={['flex flex-col gap-2', className]}>
+  <FileInput {...rest} {name} {accept} bind:file onSelect={select} />
+
+  {#if previewUrl !== undefined}
+    <figure>
+      <!-- The caller's own file, not a served image, so a plain `<img>`. -->
+      <img src={previewUrl} alt={previewAlt} class="rounded-box border-base-300 max-h-64 border" />
+      <figcaption class="fieldset-label mt-1">
+        {#if measuring}
+          &nbsp;
+        {:else if width !== undefined && height !== undefined}
+          {width} × {height}
+        {/if}
+      </figcaption>
+    </figure>
+  {/if}
+
+  <!-- The measured dimensions ride the same multipart body as the binary. -->
+  {#if name !== undefined && width !== undefined}
+    <input type="hidden" name="width" value={width} />
+  {/if}
+  {#if name !== undefined && height !== undefined}
+    <input type="hidden" name="height" value={height} />
+  {/if}
+</div>

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

@@ -0,0 +1,45 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'size'> {
+    /** The chosen file. */
+    file?: File | undefined;
+    /** Measured intrinsic width, in pixels. */
+    width?: number | undefined;
+    /** Measured intrinsic height, in pixels. */
+    height?: number | undefined;
+    /**
+     * Alternative text for the local preview.
+     * @defaultValue `'Preview of the selected image'`
+     */
+    previewAlt?: string | undefined;
+    /**
+     * The `accept` filter passed to the file input.
+     * @defaultValue `'image/jpeg,image/png,image/gif,image/webp,image/avif'`
+     */
+    accept?: string | undefined;
+    /** Largest accepted file, in bytes; a larger file is rejected with `tooLargeMessage`. */
+    maxBytes?: number | undefined;
+    /**
+     * Shown when the chosen file exceeds `maxBytes`.
+     * @defaultValue `'That file is too large.'` (from `FileInput`)
+     */
+    tooLargeMessage?: string | undefined;
+    /** Called with the accepted file, or `undefined` when the selection is cleared. */
+    onSelect?: ((file: File | undefined) => void) | undefined;
+    /** daisyUI size step. */
+    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`. */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the file input is
+     * labelable, so `<label for>` names it; passed through to `FileInput`,
+     * which drops it.
+     */
+    labelId?: string | undefined;
+}
+/** A `FileInput` that also measures the chosen image and previews it. */
+declare const ImageInput: import("svelte").Component<Props, {}, "height" | "width" | "file">;
+type ImageInput = ReturnType<typeof ImageInput>;
+export default ImageInput;

package/dist/fields/MultiSelect.svelte

@@ -0,0 +1,112 @@
+<!-- @component
+Several choices from a known list in a compact trigger that summarises them, on bits-ui's `Select` (`type="multiple"`).
+-->
+<!--
+  MultiSelect — any number of options from a medium-sized known list: the
+  trigger summarises the selection ("Full sun, Well-drained, +1"), a listbox
+  popover holds the options with checkmarks. Built on bits-ui's `Select`
+  with `type="multiple"`, bound to a `string[]`.
+
+  When to use which: `CheckboxGroup` puts every option on screen (right for
+  about seven or fewer); `Select` is the native single-choice `<select>`;
+  `MultiSelect` is for a longer list where several may be chosen. It takes
+  the same `options` shape as `Select`, so the two swap at the call site. It
+  is a separate component rather than a mode on `Select` because `Select`'s
+  point is to be the native control, with no script and the platform picker.
+
+  ARIA contract (APG select-only combobox / listbox): bits-ui gives the
+  trigger `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded` and
+  `aria-controls`; the content `role="listbox"` with `aria-multiselectable`;
+  each option `role="option"` with `aria-selected` (and `aria-disabled`,
+  which bits-ui 2.20 leaves out, added here); typeahead (fed from
+  `options` through bits-ui's `items`), Home / End, and Escape / Tab closing
+  with focus back on the trigger. Selecting an option keeps the listbox open.
+  This file adds the trigger's name (the `FieldControl` id goes on the
+  trigger, so `FormField`'s `<label for>` names it), `aria-describedby`,
+  `aria-invalid`, `aria-required`, the summary text and the `aria-hidden`
+  check icon.
+
+  The summary is plain text, not removable badges: focusable children inside
+  a button-like trigger are an accessibility trap.
+
+  `values` is always kept in `options` order, whatever order the reader
+  clicked in, so the summary is stable. `name` posts one hidden input per
+  value, in option order (and nothing at all while none is selected).
+-->
+<script lang="ts">import { Check } from "@lucide/svelte";
+import { Select } from "bits-ui";
+import { selectSize, toFieldOptions } from "./field-types.js";
+let { options, values = $bindable([]), placeholder = "Select…", name, maxShown = 2, formatOverflow = (hidden) => `+${hidden}`, option, portal = true, disabled = false, size = "md", id, labelId: _labelId, describedBy = "", invalid = false, required = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const triggerId = $derived(id ?? uid);
+const entries = $derived(toFieldOptions(options));
+const items = $derived(entries.map((entry) => ({
+	...entry,
+	disabled: entry.disabled === true
+})));
+const selectedEntries = $derived(entries.filter((entry) => values.includes(entry.value)));
+const selectedLabels = $derived(selectedEntries.map((entry) => entry.label));
+const summary = $derived(selectedLabels.length <= maxShown ? selectedLabels.join(", ") : [...selectedLabels.slice(0, maxShown), formatOverflow(selectedLabels.length - maxShown)].join(", "));
+const triggerText = $derived(selectedLabels.length === 0 ? placeholder : summary);
+const ariaDescribedBy = $derived(describedBy === "" ? undefined : describedBy);
+/** Keep `values` in option order, whatever order they were clicked in. */
+function setValues(next) {
+	values = entries.map((entry) => entry.value).filter((value) => next.includes(value));
+}
+</script>
+
+{#snippet optionBody(entry: FieldOption, selected: boolean)}
+  <Check class={['size-4 shrink-0', !selected && 'invisible']} aria-hidden="true" />
+  {#if option}
+    {@render option(entry, { selected })}
+  {:else}
+    <span>{entry.label}</span>
+  {/if}
+{/snippet}
+
+<div {...rest} class={['w-full', className]}>
+  <Select.Root
+    type="multiple"
+    bind:value={() => values, setValues}
+    {items}
+    {disabled}
+    {required}
+  >
+    <Select.Trigger
+      id={triggerId}
+      aria-describedby={ariaDescribedBy}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-required={required ? 'true' : undefined}
+      class={['select w-full text-start', selectSize[size], invalid && 'select-error']}
+    >
+      <span class={['truncate', selectedLabels.length === 0 && 'text-base-content/60']}>
+        {triggerText}
+      </span>
+    </Select.Trigger>
+    <Select.Portal disabled={!portal}>
+      <Select.Content
+        sideOffset={4}
+        class="menu bg-base-100 rounded-box border-base-300 z-50 max-h-72 w-(--bits-select-anchor-width) min-w-48 overflow-auto border p-2 shadow-lg"
+      >
+        <Select.Viewport>
+          {#each entries as entry (entry.value)}
+            <Select.Item
+              value={entry.value}
+              label={entry.label}
+              disabled={entry.disabled === true}
+              aria-disabled={entry.disabled === true ? 'true' : undefined}
+              class="rounded-field data-highlighted:bg-base-200 data-disabled:opacity-50 flex cursor-pointer items-center gap-2 px-3 py-2"
+            >
+              {#snippet children({ selected })}{@render optionBody(entry, selected)}{/snippet}
+            </Select.Item>
+          {/each}
+        </Select.Viewport>
+      </Select.Content>
+    </Select.Portal>
+  </Select.Root>
+  {#if name !== undefined}
+    {#each selectedEntries as entry (entry.value)}
+      <input type="hidden" {name} value={entry.value} {disabled} />
+    {/each}
+  {/if}
+</div>

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>