@eifi1/ui-kit 0.34.0 → 0.36.0

package/dist/components/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport {\n  assignRef,\n  EndHintRow,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_MULTI_SELECT_LABELS,\n  useKitLabels,\n  type MultiSelectLabels,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\n\n/**\n * One row of a {@link MultiSelect}. Generic over its value since 0.34 (API-4), so a list of\n * number ids hands `onChange` numbers — `MultiSelectOption` alone is the old\n * `string | number` row.\n */\nexport interface MultiSelectOption<V extends string | number = string | number> {\n  value: V;\n  label: string;\n  /** A second line under the label — a postcode, a count (keksdose #147). Searchable. */\n  hint?: string;\n  /**\n   * Shown but not takeable — {@link ComboOption.disabled}: dimmed, `aria-disabled`, passed\n   * over by the arrow keys, and a press does nothing. A chosen disabled row stays chosen:\n   * \"Select all\" and \"Clear\" leave it as it is. Say why in `hint`.\n   */\n  disabled?: boolean;\n}\n\n/** `onChange` is the kit's — \"the selection changed\", carrying the new values —\n *  rather than the div's form event. Generic over the option value (API-4): `V` is\n *  inferred from `options` and `value`, so `onChange` hands back `number[]` for number\n *  ids and `string[]` for string ones, and no call site casts. */\nexport interface MultiSelectProps<V extends string | number = string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  options: MultiSelectOption<V>[];\n  /** The chosen values — the select family's `value` (API-4). */\n  value?: V[];\n  /** @deprecated 0.34 — use `value`; removed in 0.35 (refactor audit 2026-10, API-4). */\n  values?: V[];\n  onChange: (next: V[]) => void;\n  /** @deprecated 0.34 — use `labels.all`; removed in 0.35 (API-4). Displayed when no\n   *  value is selected (i.e. \"all\"); wins over `placeholder`, as `labels.all` does. */\n  allLabel?: string;\n  /** Singular/plural countable label, used when 1+ items are selected. Default:\n   *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the\n   *  bare count in English. */\n  itemLabel?: (count: number) => string;\n  /** Shown when nothing is picked, unless `labels.all` (or `allLabel`) says otherwise —\n   *  it has always doubled as the \"nothing picked\" text. */\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /** @deprecated 0.34 — use `labels.search`; removed in 0.35 (API-4). */\n  searchLabel?: string;\n  /** @deprecated 0.34 — use `labels.selectAll`; removed in 0.35 (API-4). */\n  selectAllLabel?: string;\n  /** @deprecated 0.34 — use `labels.clear`; removed in 0.35 (API-4). */\n  clearLabel?: string;\n  /**\n   * Per-instance overrides of the provider's `multiSelect` namespace, over English — the\n   * kit's `labels` shape, where this took four string props (API-4). `all` is the trigger\n   * when nothing is picked: `labels.all`, then `allLabel`, then `placeholder`, then the\n   * provider's.\n   */\n  labels?: LabelOverride<MultiSelectLabels>;\n  /**\n   * Extra classes for the open PANEL. The panel is portalled now (dev#548) and sizes\n   * itself: as wide as the trigger and at least 16rem, growing with its rows up to 32rem\n   * (or the trigger) — what this prop was asked for (keksdose feedback #147: the market\n   * picker's postcode, distance and receipt-count hints were cut at 16rem). A `w-*` class\n   * here no longer sets the width.\n   */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /** What is wrong with the selection, in the caller's words. Rendered under the\n   *  field, pointed at by the trigger's `aria-describedby` (merged with any the\n   *  caller passed) and implies `invalid` — {@link Input}'s `error`, on the same\n   *  rules. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Combobox}'s `hint` (keksdose K4): plain TEXT\n   * is a caption under the field on the trigger's `aria-describedby`, before any error;\n   * a {@link FieldHint} \"?\" rides the label line, or with no label sits at the trigger's\n   * end edge, outside the box. Not an option's `hint`, which stays on its row.\n   */\n  hint?: ReactNode;\n  /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a\n   *  disabled {@link Select} drops its own), and a dimmed label. */\n  disabled?: boolean;\n  /**\n   * Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`: the\n   * trigger stays focusable and `aria-disabled`, the list does not open and `onChange`\n   * never fires; the reason is a line under the field at Large and on a touch screen,\n   * else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's\n   * `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** This picker COMMITS — toggling saves (a filter persisted per user, a settings row).\n   *  Locked the `disabledReason` way under a locked {@link WriteLockProvider}, with the\n   *  lock's reason. Leave it off inside a form that has its own Save. */\n  commit?: CommitScope;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link MultiEntityCombobox} (react-hook-form's focus-on-error). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a\n * search box, \"Select all\" and \"Clear\"; nothing picked reads as \"all\".\n *\n * Built on the picker family's foundation since round 0.34 (Wave 2, DUP-4):\n * `useComboboxCore` + `ComboboxPanel`, as {@link MultiEntityCombobox} is. It was an\n * absolute `DropdownPanel`, which an `overflow` ancestor clipped (dev#548) and which on a\n * phone was a 16rem panel between the field and the keyboard; it now has the full-screen\n * sheet (live #200), the portal, the live result count, disabled rows and the search\n * that folds accents (\"zurich\" finds Zürich, DUP-5).\n */\nexport function MultiSelect<V extends string | number = string | number>(props: MultiSelectProps<V>) {\n  const {\n    options,\n    value: valueProp,\n    values,\n    onChange,\n    allLabel,\n    itemLabel,\n    placeholder,\n    label,\n    searchLabel,\n    selectAllLabel,\n    clearLabel,\n    labels: labelsProp,\n    className,\n    panelClassName,\n    invalid,\n    error,\n    hint,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ref,\n    id,\n    \"aria-label\": ariaLabel,\n    // Off `rest` and onto the trigger, which is the combobox a reader meets: `Field`'s\n    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and on\n    // the wrapper div the label named nothing and the required state described nothing\n    // (DUP-8, refactor audit 2026-10 — Combobox's rule).\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const value = useMemo<V[]>(() => valueProp ?? values ?? [], [valueProp, values]);\n  // The rows as the family's options — the hint is the sublabel, searched like the label.\n  const comboOptions = useMemo(\n    () => options.map((o): ComboOption<V> => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),\n    [options],\n  );\n  // Back closes the open list, as it did on `useDropdown` (keksdose live #309).\n  const core = useComboboxCore<V>({ options: comboOptions, backCloses: true });\n  const { open, setOpen, triggerRef } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // `labels` > the deprecated string props > the provider's `multiSelect` > English. `all`\n  // is resolved apart below: between the instance's and the provider's sits `placeholder`,\n  // which has always doubled as the \"nothing picked\" text, and a caller who set it must\n  // keep seeing it.\n  const text = useKitLabels(\"multiSelect\", DEFAULT_MULTI_SELECT_LABELS, {\n    search: labelsProp?.search ?? searchLabel,\n    selectAll: labelsProp?.selectAll ?? selectAllLabel,\n    clear: labelsProp?.clear ?? clearLabel,\n    selectedCount: labelsProp?.selectedCount ?? itemLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  // The lock — EntityCombobox's: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as CountrySelect does, so no frame shows a list that can no longer be used.\n  if (inert && open) setOpen(false);\n\n  // The caller's ids, the caption, a lock's reason, the error — Select's order.\n  const field = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: lock.locked && lock.reasonId,\n  });\n  // One id per instance: `aria-controls` on the trigger names the list while the\n  // list is still closed.\n  const listboxId = `${useId()}-listbox`;\n\n  const valueSet = useMemo(() => new Set<V>(value), [value]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const selectedSummary =\n    value.length === 0 || allChecked\n      ? (labelsProp?.all ?? allLabel ?? placeholder ?? text.all)\n      : text.selectedCount(value.length);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stays open, as a pressed row always has: this control answers \"which of these\",\n    // which is rarely one of them.\n  };\n  // A chosen disabled row stays chosen, an unchosen one stays out — the row refuses to be\n  // toggled, by a press or by the two actions.\n  const selectAll = () => onChange(options.filter((o) => !o.disabled || valueSet.has(o.value)).map((o) => o.value));\n  const clearAll = () => onChange(options.filter((o) => o.disabled && valueSet.has(o.value)).map((o) => o.value));\n  const canSelectAll = options.some((o) => !o.disabled && !valueSet.has(o.value));\n  const canClear = options.some((o) => !o.disabled && valueSet.has(o.value));\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={id}\n      type=\"button\"\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={lock.locked ? undefined : disabled}\n      aria-disabled={lock.locked || undefined}\n      // A combobox, not a bare button: this trigger carried `aria-invalid`, which\n      // `button` does not support, so a required-and-empty filter painted its rose\n      // border and announced nothing (ESLint's `role-supports-aria-props`, the\n      // audit's §a11y). The role that describes it is the one that also supports\n      // the attribute.\n      role=\"combobox\"\n      aria-expanded={open}\n      aria-controls={listboxId}\n      aria-haspopup=\"listbox\"\n      // The label is a floating <span>, not a <label for>, so without this the\n      // trigger announces only its summary — \"3 selected\", with nothing saying\n      // three of WHAT. The label AND the summary, because `aria-label` replaces\n      // the content rather than adding to it; the same composition its two\n      // siblings use, so a form row of pickers reads the same way throughout.\n      // A caller's own name wins: two filters labelled \"Accounts\" on one screen have\n      // to be told apart, and only the caller knows by what.\n      aria-label={\n        ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, selectedSummary) : undefined)\n      }\n      onClick={() => {\n        if (!inert) setOpen((v) => !v);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and\n      // Space already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      // On the TRIGGER, where focus lands — the `aria-describedby` a caller put on\n      // the component is taken off the wrapper for the same reason.\n      aria-describedby={field.describedBy}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        // FIELD_TRIGGER's hover would still light a trigger nothing can open.\n        \"disabled:hover:bg-surface-2\",\n        // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;\n        // only the label was, so a disabled MultiSelect read as live (showcase audit).\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        lock.locked && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n          than restating a lighter one (Keksdose dev#477). An ellipsis at Normal; from\n          Large up it wraps and the trigger grows, as DatePicker's value does (text\n          size §10.17, round 0.34 T1). */}\n      <span className=\"truncate-until-large\">{selectedSummary}</span>\n      {!inert && <FieldChevron />}\n    </button>\n  );\n\n  return (\n    // `rest` dresses the wrapper; the name belongs to the trigger below it, which is\n    // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the\n    // handlers that open the list, cannot be replaced by accident from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && field.labelHint === undefined && (\n        <FieldLabel className={inert ? \"opacity-50\" : undefined}>{label}</FieldLabel>\n      )}\n      <EndHintRow hint={label === undefined ? field.labelHint : undefined}>\n        {lock.locked ? (\n          // Button's frame: the line under the trigger, or the Tooltip with a hidden copy\n          // for `aria-describedby`.\n          <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n            {trigger}\n          </LockedReason>\n        ) : (\n          trigger\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && field.labelHint !== undefined && (\n        <StaticLabelRow hint={field.labelHint}>\n          <FieldLabel className={cn(LABEL_IN_ROW, inert && \"opacity-50\")}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      {field.below}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the list is a full-screen sheet, which needs the field's own name\n        // to say what it asks for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={text.search}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n        // At least the trigger's width and 16rem, growing with the rows to 32rem: the\n        // hints are why it was widened at all (keksdose #147).\n        width={{ minRem: 16, fit: true, maxRem: 32 }}\n        className={panelClassName}\n        toolbar={\n          <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n            <button\n              type=\"button\"\n              onClick={selectAll}\n              disabled={!canSelectAll}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={clearAll}\n              disabled={!canClear}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.clear}\n            </button>\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport {\n  assignRef,\n  EndHintRow,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldMessages,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_MULTI_SELECT_LABELS,\n  useKitLabels,\n  type MultiSelectLabels,\n  type LabelOverride,\n} from \"../i18n/kit-labels\";\n\n/**\n * One row of a {@link MultiSelect}. Generic over its value since 0.34 (API-4), so a list of\n * number ids hands `onChange` numbers — `MultiSelectOption` alone is the old\n * `string | number` row.\n */\nexport interface MultiSelectOption<V extends string | number = string | number> {\n  value: V;\n  label: string;\n  /** A second line under the label — a postcode, a count (keksdose #147). Searchable. */\n  hint?: string;\n  /**\n   * Shown but not takeable — {@link ComboOption.disabled}: dimmed, `aria-disabled`, passed\n   * over by the arrow keys, and a press does nothing. A chosen disabled row stays chosen:\n   * \"Select all\" and \"Clear\" leave it as it is. Say why in `hint`.\n   */\n  disabled?: boolean;\n}\n\n/** `onChange` is the kit's — \"the selection changed\", carrying the new values —\n *  rather than the div's form event. Generic over the option value (API-4): `V` is\n *  inferred from `options` and `value`, so `onChange` hands back `number[]` for number\n *  ids and `string[]` for string ones, and no call site casts. */\nexport interface MultiSelectProps<V extends string | number = string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">,\n    FieldHelpProps {\n  options: MultiSelectOption<V>[];\n  /** The chosen values — the select family's `value` (API-4). */\n  value?: V[];\n  onChange: (next: V[]) => void;\n  /** Singular/plural countable label, used when 1+ items are selected. Default:\n   *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the\n   *  bare count in English. */\n  itemLabel?: (count: number) => string;\n  /** Shown when nothing is picked, unless `labels.all` says otherwise — it has always\n   *  doubled as the \"nothing picked\" text. */\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /**\n   * Per-instance overrides of the provider's `multiSelect` namespace, over English — the\n   * kit's `labels` shape, where this took four string props until 0.35 (API-4: `allLabel`,\n   * `searchLabel`, `selectAllLabel`, `clearLabel`). `all` is the trigger when nothing is\n   * picked: `labels.all`, then `placeholder`, then the provider's.\n   */\n  labels?: LabelOverride<MultiSelectLabels>;\n  /**\n   * Extra classes for the open PANEL. The panel is portalled now (dev#548) and sizes\n   * itself: as wide as the trigger and at least 16rem, growing with its rows up to 32rem\n   * (or the trigger) — what this prop was asked for (keksdose feedback #147: the market\n   * picker's postcode, distance and receipt-count hints were cut at 16rem). A `w-*` class\n   * here no longer sets the width.\n   */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n  /** What is wrong with the selection, in the caller's words. Rendered under the\n   *  field, pointed at by the trigger's `aria-describedby` (merged with any the\n   *  caller passed) and implies `invalid` — {@link Input}'s `error`, on the same\n   *  rules. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Combobox}'s `hint` (keksdose K4): plain TEXT\n   * is a caption under the field on the trigger's `aria-describedby`, before any error;\n   * a {@link FieldHint} \"?\" rides the label line, or with no label sits at the trigger's\n   * end edge, outside the box. Not an option's `hint`, which stays on its row.\n   */\n  hint?: ReactNode;\n  /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a\n   *  disabled {@link Select} drops its own), and a dimmed label. */\n  disabled?: boolean;\n  /**\n   * Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`: the\n   * trigger stays focusable and `aria-disabled`, the list does not open and `onChange`\n   * never fires; the reason is a line under the field at Large and on a touch screen,\n   * else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's\n   * `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** This picker COMMITS — toggling saves (a filter persisted per user, a settings row).\n   *  Locked the `disabledReason` way under a locked {@link WriteLockProvider}, with the\n   *  lock's reason. Leave it off inside a form that has its own Save. */\n  commit?: CommitScope;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link MultiEntityCombobox} (react-hook-form's focus-on-error). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a\n * search box, \"Select all\" and \"Clear\"; nothing picked reads as \"all\".\n *\n * Built on the picker family's foundation since round 0.34 (Wave 2, DUP-4):\n * `useComboboxCore` + `ComboboxPanel`, as {@link MultiEntityCombobox} is. It was an\n * absolute `DropdownPanel`, which an `overflow` ancestor clipped (dev#548) and which on a\n * phone was a 16rem panel between the field and the keyboard; it now has the full-screen\n * sheet (live #200), the portal, the live result count, disabled rows and the search\n * that folds accents (\"zurich\" finds Zürich, DUP-5).\n */\nexport function MultiSelect<V extends string | number = string | number>(props: MultiSelectProps<V>) {\n  const {\n    options,\n    value: valueProp,\n    onChange,\n    itemLabel,\n    placeholder,\n    label,\n    labels: labelsProp,\n    className,\n    panelClassName,\n    invalid,\n    error,\n    hint,\n    help,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ref,\n    id,\n    \"aria-label\": ariaLabel,\n    // Off `rest` and onto the trigger, which is the combobox a reader meets: `Field`'s\n    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and on\n    // the wrapper div the label named nothing and the required state described nothing\n    // (DUP-8, refactor audit 2026-10 — Combobox's rule).\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const value = useMemo<V[]>(() => valueProp ?? [], [valueProp]);\n  // The rows as the family's options — the hint is the sublabel, searched like the label.\n  const comboOptions = useMemo(\n    () => options.map((o): ComboOption<V> => ({ value: o.value, label: o.label, sublabel: o.hint, disabled: o.disabled })),\n    [options],\n  );\n  // Back closes the open list, as it did on `useDropdown` (keksdose live #309).\n  const core = useComboboxCore<V>({ options: comboOptions, backCloses: true });\n  const { open, setOpen, triggerRef } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // `labels` > the provider's `multiSelect` > English. `all` is resolved apart below:\n  // between the instance's and the provider's sits `placeholder`, which has always\n  // doubled as the \"nothing picked\" text, and a caller who set it must keep seeing it.\n  const text = useKitLabels(\"multiSelect\", DEFAULT_MULTI_SELECT_LABELS, {\n    search: labelsProp?.search,\n    selectAll: labelsProp?.selectAll,\n    clear: labelsProp?.clear,\n    selectedCount: labelsProp?.selectedCount ?? itemLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  // The lock — EntityCombobox's: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n  // rendering, as CountrySelect does, so no frame shows a list that can no longer be used.\n  if (inert && open) setOpen(false);\n\n  // The caller's ids, the caption, a lock's reason, the error — Select's order.\n  const field = useFieldMessages({\n    hint,\n    help,\n    name: label ?? ariaLabel,\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid,\n    reasonId: lock.locked && lock.reasonId,\n  });\n  // One id per instance: `aria-controls` on the trigger names the list while the\n  // list is still closed.\n  const listboxId = `${useId()}-listbox`;\n\n  const valueSet = useMemo(() => new Set<V>(value), [value]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const selectedSummary =\n    value.length === 0 || allChecked\n      ? (labelsProp?.all ?? placeholder ?? text.all)\n      : text.selectedCount(value.length);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stays open, as a pressed row always has: this control answers \"which of these\",\n    // which is rarely one of them.\n  };\n  // A chosen disabled row stays chosen, an unchosen one stays out — the row refuses to be\n  // toggled, by a press or by the two actions.\n  const selectAll = () => onChange(options.filter((o) => !o.disabled || valueSet.has(o.value)).map((o) => o.value));\n  const clearAll = () => onChange(options.filter((o) => o.disabled && valueSet.has(o.value)).map((o) => o.value));\n  const canSelectAll = options.some((o) => !o.disabled && !valueSet.has(o.value));\n  const canClear = options.some((o) => !o.disabled && valueSet.has(o.value));\n\n  const trigger = (\n    <button\n      ref={setTrigger}\n      id={id}\n      type=\"button\"\n      // The focusable kind of disabled while locked (Button's rule): native `disabled`\n      // would take the field out of the tab order, and the reason with it.\n      disabled={lock.locked ? undefined : disabled}\n      aria-disabled={lock.locked || undefined}\n      // A combobox, not a bare button: this trigger carried `aria-invalid`, which\n      // `button` does not support, so a required-and-empty filter painted its rose\n      // border and announced nothing (ESLint's `role-supports-aria-props`, the\n      // audit's §a11y). The role that describes it is the one that also supports\n      // the attribute.\n      role=\"combobox\"\n      aria-expanded={open}\n      aria-controls={listboxId}\n      aria-haspopup=\"listbox\"\n      // The label is a floating <span>, not a <label for>, so without this the\n      // trigger announces only its summary — \"3 selected\", with nothing saying\n      // three of WHAT. The label AND the summary, because `aria-label` replaces\n      // the content rather than adding to it; the same composition its two\n      // siblings use, so a form row of pickers reads the same way throughout.\n      // A caller's own name wins: two filters labelled \"Accounts\" on one screen have\n      // to be told apart, and only the caller knows by what.\n      aria-label={\n        ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, selectedSummary) : undefined)\n      }\n      onClick={() => {\n        if (!inert) setOpen((v) => !v);\n      }}\n      // Down/Up opens the list from the closed trigger, per the APG; Enter and\n      // Space already do through the button's own click.\n      onKeyDown={(e) => {\n        if (inert) return;\n        if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      aria-invalid={field.isInvalid || undefined}\n      aria-required={ariaRequired}\n      // On the TRIGGER, where focus lands — the `aria-describedby` a caller put on\n      // the component is taken off the wrapper for the same reason.\n      aria-describedby={field.describedBy}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        label !== undefined && FIELD_FLOATING_PAD,\n        // FIELD_TRIGGER's hover would still light a trigger nothing can open.\n        \"disabled:hover:bg-surface-2\",\n        // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;\n        // only the label was, so a disabled MultiSelect read as live (showcase audit).\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        lock.locked && \"cursor-not-allowed opacity-50\",\n        field.isInvalid && FIELD_INVALID,\n      )}\n    >\n      {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n          than restating a lighter one (Keksdose dev#477). An ellipsis at Normal; from\n          Large up it wraps and the trigger grows, as DatePicker's value does (text\n          size §10.17, round 0.34 T1). */}\n      <span className=\"truncate-until-large\">{selectedSummary}</span>\n      {!inert && <FieldChevron />}\n    </button>\n  );\n\n  return (\n    // `rest` dresses the wrapper; the name belongs to the trigger below it, which is\n    // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the\n    // handlers that open the list, cannot be replaced by accident from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && field.labelHint === undefined && (\n        <FieldLabel className={inert ? \"opacity-50\" : undefined}>{label}</FieldLabel>\n      )}\n      <EndHintRow hint={label === undefined ? field.labelHint : undefined}>\n        {lock.locked ? (\n          // Button's frame: the line under the trigger, or the Tooltip with a hidden copy\n          // for `aria-describedby`.\n          <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n            {trigger}\n          </LockedReason>\n        ) : (\n          trigger\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && field.labelHint !== undefined && (\n        <StaticLabelRow hint={field.labelHint}>\n          <FieldLabel className={cn(LABEL_IN_ROW, inert && \"opacity-50\")}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      {field.below}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the list is a full-screen sheet, which needs the field's own name\n        // to say what it asks for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={text.search}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={false}\n        onCreate={() => {}}\n        createContent={null}\n        // At least the trigger's width and 16rem, growing with the rows to 32rem: the\n        // hints are why it was widened at all (keksdose #147).\n        width={{ minRem: 16, fit: true, maxRem: 32 }}\n        className={panelClassName}\n        toolbar={\n          <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n            <button\n              type=\"button\"\n              onClick={selectAll}\n              disabled={!canSelectAll}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={clearAll}\n              disabled={!canClear}\n              className=\"rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40\"\n            >\n              {text.clear}\n            </button>\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/number-input.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode, Ref } from "react";
 import { type CalculatorButtonLabels } from "./calculator.js";
 import { type NumberPadSheetLabels } from "./numpad-sheet.js";
-import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 import type { CommitScope } from "./write-lock.js";
 /** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a
  *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */
-export interface NumberInputProps {
+export interface NumberInputProps extends FieldHelpProps {
     /** The text, DOT-decimal ("1234.5", or a calculation being typed: "12+5"), as
      *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it
      *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,
@@ -22,9 +22,6 @@ export interface NumberInputProps {
     /** Names the field when it has no visible `label` (a table cell, a phone's display
      *  shape). */
     "aria-label"?: string;
-    /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-     *  Names the field only when `aria-label` is absent. */
-    ariaLabel?: string;
     /** Names for the calculator this field renders — its trigger, and the controls
      *  inside the popover — and for the numpad sheet it opens on a phone. Overrides
      *  for THIS field only: both resolve the `calculator` namespace of

package/dist/components/number-input.js

@@ -10,7 +10,7 @@ import {
   FLOATING_INPUT_CLASS,
   FloatingField
 } from "./field-base.js";
-import { CURRENCIES } from "./currency-select.js";
+import { CURRENCIES } from "../currencies.js";
 import { FieldCaption, LockedReason, mergeRefs } from "./field-parts.js";
 import { useEndWidth, useNumericField } from "./numeric-field.js";
 import { cn } from "../lib/cn.js";
@@ -53,8 +53,7 @@ function NumberInput(props) {
     onChange,
     onCommit,
     label,
-    "aria-label": ariaLabelAttr,
-    ariaLabel: ariaLabelProp,
+    "aria-label": ariaLabel,
     labels,
     placeholder,
     autoFocus,
@@ -68,7 +67,6 @@ function NumberInput(props) {
     max,
     disabledReasonDisplay
   } = props;
-  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;
   const generatedId = useId();
   const fieldId = id ?? generatedId;
   const numeric = useNumericField(props, { settle: asTyped, display: () => value });

package/dist/components/number-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport {\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\nimport { CURRENCIES } from \"./currency-select\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay } from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\n\n/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */\nexport interface NumberInputProps {\n  /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n   *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n   *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n   *  never as grouping. */\n  value: string;\n  /** Fired on every keystroke with the text as a number reads it: grouping marks read\n   *  off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n   *  folded to a dot, operators kept so a typed expression survives. */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  /** Names the field when it has no visible `label` (a table cell, a phone's display\n   *  shape). */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the field only when `aria-label` is absent. */\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. Overrides\n   *  for THIS field only: both resolve the `calculator` namespace of\n   *  `<UiKitProvider labels>` themselves, then fall back to English.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n   *  the field and attached through `aria-describedby` after the caller's own —\n   *  the same rule as {@link Select}'s `hint`: the label line has no room for a\n   *  sentence, and one placed there ran over the label and into the value.\n   *  Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n   *  where a \"?\" cannot be hovered open (`useInlineHint`). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n   * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n   * `NumberField` had one, so a goal target or a rate field wrote its message as a\n   * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n   * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n   * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n   * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n   *\n   * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n   * message or not, so the message coming and going never remounts the `<input>` and\n   * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n   * `error` renders exactly the DOM it did before the prop existed.\n   */\n  error?: ReactNode;\n  /**\n   * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n   * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n   * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n   * decides, not a guess about a country. Display only: `value` and `onChange` stay\n   * dot-decimal. {@link NumberField} passes its own `locale` through here.\n   */\n  locale?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n   * and error are described, a required number is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n  /**\n   * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n   * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n   * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n   * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n   *\n   * A step changes the text through `onChange` like a keystroke would; `onCommit`\n   * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n   */\n  step?: number;\n  /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n   *  value is a STRING, so typed text is not clamped: {@link NumberField} is the\n   *  numeric field that clamps what is typed as well. */\n  min?: number;\n  max?: number;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number\n   * that SAVES itself: a setting committed on blur, a figure in a row editor\n   * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab\n   * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own\n   * `CommitInput` to keep it in.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the\n   * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the\n   * calculator and the phone's numpad are not offered, and neither blur nor Enter\n   * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the\n   * field does not submit the form around it. The reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on the input's `aria-describedby`, between the caption and the error. Wins over\n   * `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through the\n   * form's Save leaves this off and stays editable under the lock; the Save takes\n   * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and\n   * {@link IntegerField} pass it on.\n   */\n  commit?: CommitScope;\n  /**\n   * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one\n   * focusable field of its family with no ref at all, so react-hook-form's focus-on-error\n   * could reach it only through /rhf's id lookup, and an app not at all.\n   * {@link NumberField} and {@link IntegerField} pass it on.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n *  stepping. */\nfunction decimalsOf(n: number): number {\n  const text = formatResult(n);\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(\n  current: number | null,\n  count: number,\n  step: number,\n  min?: number,\n  max?: number,\n): number {\n  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n  // Nothing to step from: land on the value nearest zero the bounds allow, rather\n  // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n  if (current === null || !Number.isFinite(current)) return clamp(0);\n  const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n  const raw = (current - origin) / step;\n  const nearest = Math.round(raw);\n  // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n  const onGrid = Math.abs(raw - nearest) < 1e-9;\n  const k = onGrid\n    ? nearest + count\n    : count > 0\n      ? Math.ceil(raw) + count - 1\n      : Math.floor(raw) + count + 1;\n  const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n  return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n/** NumberInput never rounds: what was typed (or calculated) is what it reports. */\nconst asTyped = (text: string) => text;\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers offer, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes too,\n// and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n *  a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n *  business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n  if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n  const text = String(node);\n  return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `aria-label` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n  if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n  return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    onCommit,\n    label,\n    \"aria-label\": ariaLabelAttr,\n    ariaLabel: ariaLabelProp,\n    labels,\n    placeholder,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n    disabledReasonDisplay,\n  } = props;\n  // The DOM spelling wins; `ariaLabel` is the fallback for call sites not moved yet.\n  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // The engine AmountInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or commits — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft and\n  // the locale's mark (see the component's note), the calculator and the numpad.\n  // NumberInput never rounds; it shows the value as it is.\n  const numeric = useNumericField(props, { settle: asTyped, display: () => value });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;\n  const invalid = numeric.isInvalid;\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const hasEnd = showCalc || suffix !== undefined;\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  // Before the first measurement (and wherever there is no layout), a TEXT unit\n  // reserves an estimate from its length — one `ch` a character, in the input's own\n  // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n  // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n  // \"km/h\" too little.\n  const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n  const estimatedEnd =\n    suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close. The caller's `ref`\n  // gets the same element.\n  const inputRef = useRef<HTMLInputElement>(null);\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n\n  // `derived` is the value in the locale's mark — one character for one, no grouping —\n  // and the draft the typist's own text, shown only while it still says what the value\n  // says (see `showsTyped`).\n  const display = numeric.typedFor(value) ?? derived;\n\n  // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n  // a number reads it as.\n  const typed = (raw: string) => onChange(numeric.read(raw));\n  // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n  // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n  const result = (next: string) => {\n    setDraft(null);\n    onChange(next);\n  };\n\n  // The money guard: once per field, development only. See `looksLikeMoney`.\n  const warnedMoney = useRef(false);\n  useEffect(() => {\n    if (warnedMoney.current || !devWarnings()) return;\n    if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n    warnedMoney.current = true;\n    const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n    console.warn(\n      `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n        `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n        `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n        `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n        `(Development builds only; once per field.)`,\n    );\n  }, [suffix, label, ariaLabel, placeholder]);\n\n  const commit = () => {\n    setDraft(null);\n    const next = numeric.settle(commitExpression(value));\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const stepBy = (count: number) => {\n    setDraft(null);\n    // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n    const resolved = commitExpression(value).trim();\n    const n = resolved === \"\" ? NaN : Number(resolved);\n    const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n    if (next !== value) onChange(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    // Locked: Enter submits no form and commits nothing, and no key steps the value.\n    // The arrows and Home/End stay the caret's, for a long value someone is reading.\n    if (locked) {\n      if (e.key === \"Enter\") e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\") return commit();\n    // A zero, negative or non-finite step is no step: the keys stay the caret's.\n    if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n    const count =\n      e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n    if (count === 0) return;\n    // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n    e.preventDefault();\n    stepBy(count);\n  };\n\n  // While locked the field sits in the reason's frame (line or Tooltip), its outermost\n  // box — so `className` (a width, a flex or grid cell) moves onto that, and the form\n  // keeps its layout, as on Select.\n  const field = (\n    <FloatingField\n      className={cn(\"w-full\", !locked && className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={numeric.hint.labelHint}\n    >\n      <input\n        ref={setInput}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n        autoFocus={autoFocus}\n        disabled={off}\n        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n        readOnly={locked || undefined}\n        aria-disabled={locked || undefined}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={display}\n        onChange={(e) => {\n          if (!locked) typed(e.target.value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          // Nothing commits under the lock — not even a draft typed before it arrived,\n          // which stays in the field for when it lifts.\n          if (!locked) commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={numeric.describedBy}\n        aria-required={ariaRequired}\n        // The end padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n          invalid && FIELD_INVALID,\n          locked && \"cursor-not-allowed\",\n        )}\n        // The classes above are the fallback; once the end controls are measured the\n        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n        // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n        // (keksdose live #367); a long unit (\"km/h\") got too little.\n        style={\n          hasEnd && endWidth != null\n            ? { paddingInlineEnd: endWidth + 4 }\n            : estimatedEnd !== undefined\n              ? { paddingInlineEnd: estimatedEnd }\n              : undefined\n        }\n      />\n      {hasEnd && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              // Seeded with the value in the field's mark but WITHOUT the typist's\n              // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n              value={derived}\n              onChange={result}\n              className=\"self-stretch px-2.5\"\n              aria-label={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n              // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n              className=\"pointer-events-none pe-2 text-xs font-medium text-muted\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors, as AmountInput's is: its keys are\n          // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n          value={display}\n          onChange={typed}\n          onResult={result}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </FloatingField>\n  );\n  const box = locked ? (\n    <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block w-full\", className)}>\n      {field}\n    </LockedReason>\n  ) : (\n    field\n  );\n  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) return box;\n  // Outside the field's own `relative` box, as Select's caption is: the calculator\n  // and the unit are `inset-y-0` in it and would stretch down over a second line.\n  // `className` stays on the field, so adding a caption cannot change what it styles.\n  return (\n    <div>\n      {box}\n      <FieldCaption parts={numeric.hint} />\n      {numeric.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport {\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\n// The data alone (0.35): not the picker, which this field does not render.\nimport { CURRENCIES } from \"../currencies\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\n\n/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */\nexport interface NumberInputProps extends FieldHelpProps {\n  /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n   *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n   *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n   *  never as grouping. */\n  value: string;\n  /** Fired on every keystroke with the text as a number reads it: grouping marks read\n   *  off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n   *  folded to a dot, operators kept so a typed expression survives. */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  /** Names the field when it has no visible `label` (a table cell, a phone's display\n   *  shape). */\n  \"aria-label\"?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. Overrides\n   *  for THIS field only: both resolve the `calculator` namespace of\n   *  `<UiKitProvider labels>` themselves, then fall back to English.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n   *  the field and attached through `aria-describedby` after the caller's own —\n   *  the same rule as {@link Select}'s `hint`: the label line has no room for a\n   *  sentence, and one placed there ran over the label and into the value.\n   *  Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n   *  where a \"?\" cannot be hovered open (`useInlineHint`). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n   * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n   * `NumberField` had one, so a goal target or a rate field wrote its message as a\n   * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n   * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n   * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n   * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n   *\n   * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n   * message or not, so the message coming and going never remounts the `<input>` and\n   * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n   * `error` renders exactly the DOM it did before the prop existed.\n   */\n  error?: ReactNode;\n  /**\n   * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n   * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n   * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n   * decides, not a guess about a country. Display only: `value` and `onChange` stay\n   * dot-decimal. {@link NumberField} passes its own `locale` through here.\n   */\n  locale?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n   * and error are described, a required number is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n  /**\n   * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n   * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n   * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n   * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n   *\n   * A step changes the text through `onChange` like a keystroke would; `onCommit`\n   * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n   */\n  step?: number;\n  /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n   *  value is a STRING, so typed text is not clamped: {@link NumberField} is the\n   *  numeric field that clamps what is typed as well. */\n  min?: number;\n  max?: number;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number\n   * that SAVES itself: a setting committed on blur, a figure in a row editor\n   * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab\n   * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own\n   * `CommitInput` to keep it in.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the\n   * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the\n   * calculator and the phone's numpad are not offered, and neither blur nor Enter\n   * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the\n   * field does not submit the form around it. The reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on the input's `aria-describedby`, between the caption and the error. Wins over\n   * `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through the\n   * form's Save leaves this off and stays editable under the lock; the Save takes\n   * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and\n   * {@link IntegerField} pass it on.\n   */\n  commit?: CommitScope;\n  /**\n   * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one\n   * focusable field of its family with no ref at all, so react-hook-form's focus-on-error\n   * could reach it only through /rhf's id lookup, and an app not at all.\n   * {@link NumberField} and {@link IntegerField} pass it on.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n *  stepping. */\nfunction decimalsOf(n: number): number {\n  const text = formatResult(n);\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(\n  current: number | null,\n  count: number,\n  step: number,\n  min?: number,\n  max?: number,\n): number {\n  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n  // Nothing to step from: land on the value nearest zero the bounds allow, rather\n  // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n  if (current === null || !Number.isFinite(current)) return clamp(0);\n  const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n  const raw = (current - origin) / step;\n  const nearest = Math.round(raw);\n  // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n  const onGrid = Math.abs(raw - nearest) < 1e-9;\n  const k = onGrid\n    ? nearest + count\n    : count > 0\n      ? Math.ceil(raw) + count - 1\n      : Math.floor(raw) + count + 1;\n  const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n  return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n/** NumberInput never rounds: what was typed (or calculated) is what it reports. */\nconst asTyped = (text: string) => text;\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers offer, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes too,\n// and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n *  a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n *  business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n  if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n  const text = String(node);\n  return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `aria-label` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n  if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n  return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    onCommit,\n    label,\n    \"aria-label\": ariaLabel,\n    labels,\n    placeholder,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n    disabledReasonDisplay,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // The engine AmountInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or commits — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft and\n  // the locale's mark (see the component's note), the calculator and the numpad.\n  // NumberInput never rounds; it shows the value as it is.\n  const numeric = useNumericField(props, { settle: asTyped, display: () => value });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;\n  const invalid = numeric.isInvalid;\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const hasEnd = showCalc || suffix !== undefined;\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  // Before the first measurement (and wherever there is no layout), a TEXT unit\n  // reserves an estimate from its length — one `ch` a character, in the input's own\n  // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n  // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n  // \"km/h\" too little.\n  const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n  const estimatedEnd =\n    suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close. The caller's `ref`\n  // gets the same element.\n  const inputRef = useRef<HTMLInputElement>(null);\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n\n  // `derived` is the value in the locale's mark — one character for one, no grouping —\n  // and the draft the typist's own text, shown only while it still says what the value\n  // says (see `showsTyped`).\n  const display = numeric.typedFor(value) ?? derived;\n\n  // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n  // a number reads it as.\n  const typed = (raw: string) => onChange(numeric.read(raw));\n  // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n  // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n  const result = (next: string) => {\n    setDraft(null);\n    onChange(next);\n  };\n\n  // The money guard: once per field, development only. See `looksLikeMoney`.\n  const warnedMoney = useRef(false);\n  useEffect(() => {\n    if (warnedMoney.current || !devWarnings()) return;\n    if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n    warnedMoney.current = true;\n    const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n    console.warn(\n      `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n        `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n        `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n        `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n        `(Development builds only; once per field.)`,\n    );\n  }, [suffix, label, ariaLabel, placeholder]);\n\n  const commit = () => {\n    setDraft(null);\n    const next = numeric.settle(commitExpression(value));\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const stepBy = (count: number) => {\n    setDraft(null);\n    // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n    const resolved = commitExpression(value).trim();\n    const n = resolved === \"\" ? NaN : Number(resolved);\n    const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n    if (next !== value) onChange(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    // Locked: Enter submits no form and commits nothing, and no key steps the value.\n    // The arrows and Home/End stay the caret's, for a long value someone is reading.\n    if (locked) {\n      if (e.key === \"Enter\") e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\") return commit();\n    // A zero, negative or non-finite step is no step: the keys stay the caret's.\n    if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n    const count =\n      e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n    if (count === 0) return;\n    // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n    e.preventDefault();\n    stepBy(count);\n  };\n\n  // While locked the field sits in the reason's frame (line or Tooltip), its outermost\n  // box — so `className` (a width, a flex or grid cell) moves onto that, and the form\n  // keeps its layout, as on Select.\n  const field = (\n    <FloatingField\n      className={cn(\"w-full\", !locked && className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={numeric.hint.labelHint}\n    >\n      <input\n        ref={setInput}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n        autoFocus={autoFocus}\n        disabled={off}\n        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n        readOnly={locked || undefined}\n        aria-disabled={locked || undefined}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={display}\n        onChange={(e) => {\n          if (!locked) typed(e.target.value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          // Nothing commits under the lock — not even a draft typed before it arrived,\n          // which stays in the field for when it lifts.\n          if (!locked) commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={numeric.describedBy}\n        aria-required={ariaRequired}\n        // The end padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n          invalid && FIELD_INVALID,\n          locked && \"cursor-not-allowed\",\n        )}\n        // The classes above are the fallback; once the end controls are measured the\n        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n        // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n        // (keksdose live #367); a long unit (\"km/h\") got too little.\n        style={\n          hasEnd && endWidth != null\n            ? { paddingInlineEnd: endWidth + 4 }\n            : estimatedEnd !== undefined\n              ? { paddingInlineEnd: estimatedEnd }\n              : undefined\n        }\n      />\n      {hasEnd && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              // Seeded with the value in the field's mark but WITHOUT the typist's\n              // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n              value={derived}\n              onChange={result}\n              className=\"self-stretch px-2.5\"\n              aria-label={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n              // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n              className=\"pointer-events-none pe-2 text-xs font-medium text-muted\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors, as AmountInput's is: its keys are\n          // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n          value={display}\n          onChange={typed}\n          onResult={result}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </FloatingField>\n  );\n  const box = locked ? (\n    <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block w-full\", className)}>\n      {field}\n    </LockedReason>\n  ) : (\n    field\n  );\n  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) return box;\n  // Outside the field's own `relative` box, as Select's caption is: the calculator\n  // and the unit are `inset-y-0` in it and would stretch down over a second line.\n  // `className` stays on the field, so adding a caption cannot change what it styles.\n  return (\n    <div>\n      {box}\n      <FieldCaption parts={numeric.hint} />\n      {numeric.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/numeric-field.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, RefObject } from "react";
-import { type FieldHintParts, type LockReason } from "./field-parts.js";
+import { type FieldHelpProps, type FieldHintParts, type LockReason } from "./field-parts.js";
 import type { CommitScope } from "./write-lock.js";
 /**
  * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the
@@ -15,7 +15,9 @@ import type { CommitScope } from "./write-lock.js";
  * controls. Package-private — not re-exported from the barrel.
  */
 /** The props both fields take and this engine reads. */
-export interface NumericFieldProps {
+export interface NumericFieldProps extends FieldHelpProps {
+    /** What names the `help` "?" — "About <label>" — with the `aria-label`. */
+    label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
     invalid?: boolean;
@@ -26,6 +28,7 @@ export interface NumericFieldProps {
     calculator?: boolean;
     variant?: "field" | "display";
     locale?: string;
+    "aria-label"?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean | "true" | "false";
 }

package/dist/components/numeric-field.js

@@ -12,7 +12,10 @@ import {
 function useNumericField(props, { settle, display }) {
   const lock = useLockReason(props.commit, props.disabledReason);
   const locked = lock.locked;
-  const hint = useFieldHint(props.hint, props["aria-describedby"]);
+  const hint = useFieldHint(props.hint, props["aria-describedby"], {
+    help: props.help,
+    name: props.label ?? props["aria-label"]
+  });
   const field = useFieldError(
     props.error,
     props.invalid,

package/dist/components/numeric-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numeric-field.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport {\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type FieldHintParts,\n  type LockReason,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the\n * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's\n * draft and what the field shows, the calculator and the phone's numpad, and the room\n * its end controls take. They were two copies of it, and each fix had to be made twice —\n * some reached only one: NumberInput measured its end controls (keksdose live #367) and\n * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached\n * AmountInput two releases late.\n *\n * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`\n * against NumberInput's \"what was typed\"), the caller-owned sign, and its trailing\n * controls. Package-private — not re-exported from the barrel.\n */\n\n/** The props both fields take and this engine reads. */\nexport interface NumericFieldProps {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  disabledReason?: ReactNode;\n  commit?: CommitScope;\n  /** Show the desktop calculator trigger. Default `true`. */\n  calculator?: boolean;\n  variant?: \"field\" | \"display\";\n  locale?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\nexport interface NumericFieldOptions {\n  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and\n   *  `min` / `max`; NumberInput's identity (it never rounds). */\n  settle: (text: string) => string;\n  /** What the field shows while no typed draft stands, dot-decimal, given whether it\n   *  has focus — spelt in the locale's mark here (`derived`). */\n  display: (focused: boolean) => string;\n}\n\nexport interface NumericField {\n  /** The write lock: focusable, `readOnly`, nothing changes or commits. */\n  lock: LockReason;\n  locked: boolean;\n  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */\n  off: boolean;\n  /** The hint, split into the caption under the field and the label line's \"?\". */\n  hint: FieldHintParts;\n  /** `invalid`, a message, or a form library's `aria-invalid`. */\n  isInvalid: boolean;\n  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */\n  describedBy: string | undefined;\n  /** The message under the field, or `null`. */\n  errorEl: ReactNode;\n  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */\n  isMobile: boolean;\n  /** `variant=\"display\"`, on a phone. */\n  asDisplay: boolean;\n  showCalc: boolean;\n  showNumpad: boolean;\n  focused: boolean;\n  setFocused: (focused: boolean) => void;\n  /** The locale's decimal mark — the field's `locale`, else the provider's. */\n  mark: \",\" | \".\";\n  /** The typist's own text while a figure is typed, else `null`. */\n  draft: string | null;\n  setDraft: (draft: string | null) => void;\n  /** `display(focused)` in the locale's mark. */\n  derived: string;\n  /** The draft, while it still says what `canonical` (dot-decimal) says and holds\n   *  nothing the field would drop — see `showsTyped`; else `null`. */\n  typedFor: (canonical: string) => string | null;\n  /** A keystroke's raw text: kept as the draft, and read as a number reads it —\n   *  grouping off, dot-decimal. */\n  read: (raw: string) => string;\n  settle: (text: string) => string;\n}\n\nexport function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {\n  const lock = useLockReason(props.commit, props.disabledReason);\n  const locked = lock.locked;\n  // §4: a FieldHint is the caption at Large and on touch, as on every field.\n  const hint = useFieldHint(props.hint, props[\"aria-describedby\"]);\n  // The standing advice first, the news second: the caller's ids, the caption, the\n  // error — a lock's reason between the last two, as on Select.\n  const field = useFieldError(\n    props.error,\n    props.invalid,\n    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),\n    props[\"aria-invalid\"],\n  );\n  // On phones the OS keyboard is suppressed (`inputMode=\"none\"`) for the kit's numpad\n  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field\n  // offers neither: their result would be a value.\n  const isMobile = usePhoneLayout();\n  const [focused, setFocused] = useState(false);\n  const mark = decimalMark(useKitLocale(props.locale));\n  const [draft, setDraft] = useState<string | null>(null);\n  return {\n    lock,\n    locked,\n    off: Boolean(props.disabled) && !locked,\n    hint,\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    errorEl: field.errorEl,\n    isMobile,\n    asDisplay: isMobile && props.variant === \"display\",\n    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,\n    showNumpad: isMobile && !props.disabled && !locked && focused,\n    focused,\n    setFocused,\n    mark,\n    draft,\n    setDraft,\n    derived: localizeMark(display(focused), mark),\n    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),\n    read: (raw) => {\n      setDraft(raw);\n      return readTyped(raw, mark);\n    },\n    settle,\n  };\n}\n\n/**\n * The measured width of a field's end controls (keksdose live #367), and the ref for\n * their track: `null` before the first measurement and wherever there is no layout\n * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once\n * on `observe`, and again whenever the controls change size (a chip's code, a translated\n * label, the text size). A pair, so the width reads as the plain number it is.\n */\nexport function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!present || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setWidth(measured > 0 ? Math.ceil(measured) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [present]);\n  return [ref, width];\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAgFA,SAAS,gBAAgB,OAA0B,EAAE,QAAQ,QAAQ,GAAsC;AAChH,QAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc;AAC7D,QAAM,SAAS,KAAK;AAEpB,QAAM,OAAO,aAAa,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAG/D,QAAM,QAAQ;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB,KAAK,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC1D,MAAM,cAAc;AAAA,EACtB;AAIA,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,aAAa,MAAM,MAAM,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,WAAW,YAAY,MAAM,YAAY;AAAA,IACzC,WAAW,MAAM,cAAc,SAAS,CAAC,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACvE,YAAY,YAAY,CAAC,MAAM,YAAY,CAAC,UAAU;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,aAAa,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5C,UAAU,CAAC,cAAe,UAAU,QAAQ,WAAW,OAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACzF,MAAM,CAAC,QAAQ;AACb,eAAS,GAAG;AACZ,aAAO,UAAU,KAAK,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,YAAY,SAAqE;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,WAAW,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAC9D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,WAAW,GAAG,sBAAsB,EAAE;AAC5C,eAAS,WAAW,IAAI,KAAK,KAAK,QAAQ,IAAI,IAAI;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}
+{"version":3,"sources":["../../src/components/numeric-field.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport {\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type FieldHelpProps,\n  type FieldHintParts,\n  type LockReason,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the\n * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's\n * draft and what the field shows, the calculator and the phone's numpad, and the room\n * its end controls take. They were two copies of it, and each fix had to be made twice —\n * some reached only one: NumberInput measured its end controls (keksdose live #367) and\n * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached\n * AmountInput two releases late.\n *\n * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`\n * against NumberInput's \"what was typed\"), the caller-owned sign, and its trailing\n * controls. Package-private — not re-exported from the barrel.\n */\n\n/** The props both fields take and this engine reads. */\nexport interface NumericFieldProps extends FieldHelpProps {\n  /** What names the `help` \"?\" — \"About <label>\" — with the `aria-label`. */\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  disabledReason?: ReactNode;\n  commit?: CommitScope;\n  /** Show the desktop calculator trigger. Default `true`. */\n  calculator?: boolean;\n  variant?: \"field\" | \"display\";\n  locale?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\nexport interface NumericFieldOptions {\n  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and\n   *  `min` / `max`; NumberInput's identity (it never rounds). */\n  settle: (text: string) => string;\n  /** What the field shows while no typed draft stands, dot-decimal, given whether it\n   *  has focus — spelt in the locale's mark here (`derived`). */\n  display: (focused: boolean) => string;\n}\n\nexport interface NumericField {\n  /** The write lock: focusable, `readOnly`, nothing changes or commits. */\n  lock: LockReason;\n  locked: boolean;\n  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */\n  off: boolean;\n  /** The hint, split into the caption under the field and the label line's \"?\". */\n  hint: FieldHintParts;\n  /** `invalid`, a message, or a form library's `aria-invalid`. */\n  isInvalid: boolean;\n  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */\n  describedBy: string | undefined;\n  /** The message under the field, or `null`. */\n  errorEl: ReactNode;\n  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */\n  isMobile: boolean;\n  /** `variant=\"display\"`, on a phone. */\n  asDisplay: boolean;\n  showCalc: boolean;\n  showNumpad: boolean;\n  focused: boolean;\n  setFocused: (focused: boolean) => void;\n  /** The locale's decimal mark — the field's `locale`, else the provider's. */\n  mark: \",\" | \".\";\n  /** The typist's own text while a figure is typed, else `null`. */\n  draft: string | null;\n  setDraft: (draft: string | null) => void;\n  /** `display(focused)` in the locale's mark. */\n  derived: string;\n  /** The draft, while it still says what `canonical` (dot-decimal) says and holds\n   *  nothing the field would drop — see `showsTyped`; else `null`. */\n  typedFor: (canonical: string) => string | null;\n  /** A keystroke's raw text: kept as the draft, and read as a number reads it —\n   *  grouping off, dot-decimal. */\n  read: (raw: string) => string;\n  settle: (text: string) => string;\n}\n\nexport function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {\n  const lock = useLockReason(props.commit, props.disabledReason);\n  const locked = lock.locked;\n  // §4: a FieldHint is the caption at Large and on touch, as on every field.\n  // A `help` is the label line's one \"?\" and turns the hint into the caption (0.36).\n  const hint = useFieldHint(props.hint, props[\"aria-describedby\"], {\n    help: props.help,\n    name: props.label ?? props[\"aria-label\"],\n  });\n  // The standing advice first, the news second: the caller's ids, the caption, the\n  // error — a lock's reason between the last two, as on Select.\n  const field = useFieldError(\n    props.error,\n    props.invalid,\n    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),\n    props[\"aria-invalid\"],\n  );\n  // On phones the OS keyboard is suppressed (`inputMode=\"none\"`) for the kit's numpad\n  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field\n  // offers neither: their result would be a value.\n  const isMobile = usePhoneLayout();\n  const [focused, setFocused] = useState(false);\n  const mark = decimalMark(useKitLocale(props.locale));\n  const [draft, setDraft] = useState<string | null>(null);\n  return {\n    lock,\n    locked,\n    off: Boolean(props.disabled) && !locked,\n    hint,\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    errorEl: field.errorEl,\n    isMobile,\n    asDisplay: isMobile && props.variant === \"display\",\n    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,\n    showNumpad: isMobile && !props.disabled && !locked && focused,\n    focused,\n    setFocused,\n    mark,\n    draft,\n    setDraft,\n    derived: localizeMark(display(focused), mark),\n    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),\n    read: (raw) => {\n      setDraft(raw);\n      return readTyped(raw, mark);\n    },\n    settle,\n  };\n}\n\n/**\n * The measured width of a field's end controls (keksdose live #367), and the ref for\n * their track: `null` before the first measurement and wherever there is no layout\n * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once\n * on `observe`, and again whenever the controls change size (a chip's code, a translated\n * label, the text size). A pair, so the width reads as the plain number it is.\n */\nexport function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!present || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setWidth(measured > 0 ? Math.ceil(measured) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [present]);\n  return [ref, width];\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmFA,SAAS,gBAAgB,OAA0B,EAAE,QAAQ,QAAQ,GAAsC;AAChH,QAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc;AAC7D,QAAM,SAAS,KAAK;AAGpB,QAAM,OAAO,aAAa,MAAM,MAAM,MAAM,kBAAkB,GAAG;AAAA,IAC/D,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM,SAAS,MAAM,YAAY;AAAA,EACzC,CAAC;AAGD,QAAM,QAAQ;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB,KAAK,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC1D,MAAM,cAAc;AAAA,EACtB;AAIA,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,aAAa,MAAM,MAAM,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,WAAW,YAAY,MAAM,YAAY;AAAA,IACzC,WAAW,MAAM,cAAc,SAAS,CAAC,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACvE,YAAY,YAAY,CAAC,MAAM,YAAY,CAAC,UAAU;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,aAAa,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5C,UAAU,CAAC,cAAe,UAAU,QAAQ,WAAW,OAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACzF,MAAM,CAAC,QAAQ;AACb,eAAS,GAAG;AACZ,aAAO,UAAU,KAAK,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,YAAY,SAAqE;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,WAAW,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAC9D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,WAAW,GAAG,sBAAsB,EAAE;AAC5C,eAAS,WAAW,IAAI,KAAK,KAAK,QAAQ,IAAI,IAAI;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}

package/dist/components/one-time-code-input.d.ts

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { type FieldHelpProps } from "./field-parts.js";
 /**
  * The field for a verification code — the six digits an authenticator app shows, or the
  * ones a sign-in mail or SMS carries.
@@ -45,7 +46,7 @@ import type { InputHTMLAttributes, ReactNode, Ref } from "react";
  * as a caption under the field (a {@link FieldHint} "?" rides the label line instead),
  * the error under that, both attached through `aria-describedby` after the caller's own.
  */
-export interface OneTimeCodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "autoComplete" | "maxLength" | "pattern"> {
+export interface OneTimeCodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "autoComplete" | "maxLength" | "pattern">, FieldHelpProps {
     /** The digits so far — a string, so leading zeros survive. */
     value: string;
     /** The cleaned code after every edit: digits only, never longer than `length`. */

package/dist/components/one-time-code-input.js

@@ -23,6 +23,7 @@ function OneTimeCodeInput(props) {
     onComplete,
     label,
     hint,
+    help,
     error,
     invalid: invalidProp,
     className,
@@ -40,7 +41,7 @@ function OneTimeCodeInput(props) {
   const size = Math.max(1, Math.floor(length) || 1);
   const generatedId = useId();
   const fieldId = id ?? generatedId;
-  const hintParts = useFieldHint(hint, ariaDescribedBy);
+  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? rest["aria-label"] });
   const {
     isInvalid: invalid,
     describedBy,

package/dist/components/one-time-code-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { EndHintRow, FieldCaption, useFieldError, useFieldHint } from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_INVALID,\n  FIELD_WRITABLE_LOOK,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\n\n/**\n * The field for a verification code — the six digits an authenticator app shows, or the\n * ones a sign-in mail or SMS carries.\n *\n * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in\n * verification step, and already written twice by hand inside {@link TwoFactorSetting}.\n * The three copies agreed on `inputMode=\"numeric\"` and `autoComplete=\"one-time-code\"`\n * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's\n * capped at eight and kept whatever was typed, and the settings card kept everything,\n * spaces included — so \"123 456\" pasted from an authenticator that groups its digits\n * reached the server with the space in it.\n *\n * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of\n * it works against the two ways a code actually arrives. A paste lands in ONE input,\n * so the boxes need a paste handler that spreads it; the platform's own code autofill\n * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's\n * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need\n * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs\n * of one character each. One text field gets all three right for free.\n *\n * WHAT IT DOES TO THE TEXT:\n *  - **Digits only**, as a STRING. A code may start with 0, and a number field would\n *    drop it (\"012345\" → 12345) — kastlan's login says as much in a comment. Every\n *    character that is not a digit is dropped as it arrives, so the spaces and dashes\n *    of \"123 456\" and \"123-456\" go, whether typed or pasted. Full-width digits (what a\n *    Chinese input method types: \"１２３\") are folded to ASCII first (NFKC).\n *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so\n *    pasting \"123 456\" into a `maxLength={6}` field kept \"123 45\" and the cleaning saw\n *    one digit short. The length is enforced here instead, after the cleaning: a field\n *    that is full refuses another digit, as `maxLength` would.\n *  - **A paste that is a whole code replaces the field**, wherever the caret is: a\n *    person pasting six digits means \"this is the code\", not \"insert these into the\n *    stale one\".\n *  - **The caret stays put** when a character is dropped, rather than jumping to the\n *    end as a controlled input does when its value is put back.\n *\n * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —\n * makes the code `length` digits long. It is a notification, nothing more: the field\n * never submits a form on its own. Whether a full code verifies at once is the app's\n * call (a sign-in step may; a \"turn off two-factor\" form that also wants a password\n * should not). It does not fire for a value set from outside.\n *\n * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint\n * as a caption under the field (a {@link FieldHint} \"?\" rides the label line instead),\n * the error under that, both attached through `aria-describedby` after the caller's own.\n */\nexport interface OneTimeCodeInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"autoComplete\" | \"maxLength\" | \"pattern\"\n  > {\n  /** The digits so far — a string, so leading zeros survive. */\n  value: string;\n  /** The cleaned code after every edit: digits only, never longer than `length`. */\n  onChange: (code: string) => void;\n  /** How many digits the code has. Default 6. The field refuses digits past it. */\n  length?: number;\n  /** Called with the code when an edit makes it `length` digits long. Never submits\n   *  anything itself. */\n  onComplete?: (code: string) => void;\n  /** The floating label, as on {@link Input}. Without one, name the field with\n   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */\n  label?: ReactNode;\n  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything\n   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when\n   *  there is no label. The rule {@link Select}'s `hint` follows. */\n  hint?: ReactNode;\n  /** What is wrong (\"That code has expired\"). Rendered under the field, attached with\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Paint the field invalid and set `aria-invalid` without a message of its own. */\n  invalid?: boolean;\n  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a\n   *  label, the `<input>` itself when it has none — as on {@link Input}. */\n  inputClassName?: string;\n  /**\n   * Keep the field `readOnly` until it first takes focus.\n   *\n   * A browser that has a login saved for the site fills it in on load — and on a page\n   * where the code field is the only text field near a password field, it can take the\n   * code field for the username and write the address into it. A read-only field is\n   * never autofilled, and focus is the moment a person (or the platform's code\n   * suggestion, which needs a focused field anyway) starts to use it. So the field\n   * stays read-only until then, and only until then.\n   *\n   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):\n   * this is the one place where read-only does not mean \"you may not type here\", and\n   * without the opt-out the field would sit there greyed until it is clicked.\n   *\n   * {@link TwoFactorSetting} has always done this — its code fields share a page with\n   * the current-password field of the disable form — and keeps doing it through this\n   * prop. Off by default, because it is a trade: a field that is read-only at the\n   * moment focus lands can be announced as read-only by a screen reader, and on some\n   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where\n   * a saved login actually lands in the field.\n   */\n  readOnlyUntilFocus?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n// Equal-width digits, spaced a little apart, so a code reads — and compares against the\n// authenticator's screen — digit by digit.\nconst CODE_TYPE = \"tabular-nums tracking-widest\";\n\n/** The ASCII digits in `text`, in order. NFKC folds full-width digits (\"１\") to \"1\". */\nfunction digitsOf(text: string): string {\n  return text.normalize(\"NFKC\").replace(/\\D/g, \"\");\n}\n\nexport function OneTimeCodeInput(props: OneTimeCodeInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    length = 6,\n    onComplete,\n    label,\n    hint,\n    error,\n    invalid: invalidProp,\n    className,\n    inputClassName,\n    readOnlyUntilFocus = false,\n    readOnly,\n    id,\n    placeholder,\n    onFocus,\n    onPaste,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  } = props;\n  // A length below one is no code at all; a fractional one is a typo.\n  const size = Math.max(1, Math.floor(length) || 1);\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). See `hint`. Through useFieldHint and\n  // useFieldError since 0.34, not copies of their rules (DUP-2, DUP-8).\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const {\n    isInvalid: invalid,\n    describedBy,\n    errorEl,\n  } = useFieldError(error, invalidProp, hintParts.describedBy, ariaInvalid);\n  // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is\n  // never re-parented (and never loses focus) when a message comes or goes. See\n  // `FieldGroup` in field-base.tsx.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n\n  // Focused once = in use; the guard is down for good from then on (see the prop).\n  const [focusedOnce, setFocusedOnce] = useState(false);\n  const guarding = readOnlyUntilFocus && !focusedOnce;\n\n  const commit = (next: string) => {\n    if (next === value) return;\n    onChange(next);\n    if (next.length === size) onComplete?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const raw = input.value;\n    const cleaned = digitsOf(raw);\n    // Past the length: a full field refuses the digit (what `maxLength` does), a\n    // partial one keeps the first `size` — a paste longer than the room left.\n    const refused = cleaned.length > size && value.length >= size;\n    const next = refused ? value : cleaned.slice(0, size);\n    if (next !== raw) {\n      // Write the cleaned text back NOW, with the caret where the typist left it.\n      // React would otherwise put its value back after this handler, and setting an\n      // input's value moves the caret to the end — so a space typed mid-code threw\n      // the caret to the last digit. React finds the DOM already agreeing and leaves\n      // it alone.\n      const caret = input.selectionStart ?? raw.length;\n      const at = refused\n        ? Math.max(0, caret - (raw.length - value.length))\n        : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);\n      input.value = next;\n      try {\n        input.setSelectionRange(at, at);\n      } catch {\n        /* not every input type has a selection; a text field does */\n      }\n    }\n    commit(next);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(e);\n    // A read-only field still receives the event; it must not take the code.\n    if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;\n    const pasted = digitsOf(e.clipboardData.getData(\"text\"));\n    // Anything else — a few digits into a partial code — is an ordinary insertion,\n    // and the change handler cleans it.\n    if (pasted.length !== size) return;\n    e.preventDefault();\n    commit(pasted);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    if (guarding) setFocusedOnce(true);\n    onFocus?.(e);\n  };\n\n  const input = (\n    <input\n      ref={ref}\n      id={labelled ? fieldId : id}\n      {...rest}\n      type=\"text\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      // The numeric keypad's older cue, for the browsers that predate `inputMode`.\n      // The value is digits only, so it can never fail the pattern.\n      pattern=\"[0-9]*\"\n      // A labelled field's placeholder is a single space: it drives the floating\n      // label's `placeholder-shown` trick. Unlabelled, the caller's (\"000000\") shows.\n      placeholder={labelled ? \" \" : placeholder}\n      value={value}\n      readOnly={readOnly || guarding}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onFocus={handleFocus}\n      aria-invalid={invalid || undefined}\n      aria-describedby={describedBy}\n      className={cn(\n        labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,\n        CODE_TYPE,\n        // Read-only for the guard's sake only: keep the editable look. A caller's\n        // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.\n        guarding && !readOnly && FIELD_WRITABLE_LOOK,\n        !labelled && className,\n        inputClassName,\n        invalid && FIELD_INVALID,\n      )}\n    />\n  );\n\n  const field: ReactNode = labelled ? (\n    <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n      {input}\n    </FloatingField>\n  ) : (\n    // No label line to ride: a \"?\" goes at the field's end edge, outside the box —\n    // where an unlabelled Select puts it.\n    <EndHintRow hint={hintParts.labelHint}>{input}</EndHintRow>\n  );\n\n  if (hintParts.captionText === undefined && errorEl === null && !reserve) return field;\n  return (\n    <div>\n      {field}\n      <FieldCaption parts={hintParts} />\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":["input"]}
+{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { EndHintRow, FieldCaption, useFieldError, useFieldHint, type FieldHelpProps } from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_INVALID,\n  FIELD_WRITABLE_LOOK,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\n\n/**\n * The field for a verification code — the six digits an authenticator app shows, or the\n * ones a sign-in mail or SMS carries.\n *\n * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in\n * verification step, and already written twice by hand inside {@link TwoFactorSetting}.\n * The three copies agreed on `inputMode=\"numeric\"` and `autoComplete=\"one-time-code\"`\n * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's\n * capped at eight and kept whatever was typed, and the settings card kept everything,\n * spaces included — so \"123 456\" pasted from an authenticator that groups its digits\n * reached the server with the space in it.\n *\n * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of\n * it works against the two ways a code actually arrives. A paste lands in ONE input,\n * so the boxes need a paste handler that spreads it; the platform's own code autofill\n * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's\n * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need\n * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs\n * of one character each. One text field gets all three right for free.\n *\n * WHAT IT DOES TO THE TEXT:\n *  - **Digits only**, as a STRING. A code may start with 0, and a number field would\n *    drop it (\"012345\" → 12345) — kastlan's login says as much in a comment. Every\n *    character that is not a digit is dropped as it arrives, so the spaces and dashes\n *    of \"123 456\" and \"123-456\" go, whether typed or pasted. Full-width digits (what a\n *    Chinese input method types: \"１２３\") are folded to ASCII first (NFKC).\n *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so\n *    pasting \"123 456\" into a `maxLength={6}` field kept \"123 45\" and the cleaning saw\n *    one digit short. The length is enforced here instead, after the cleaning: a field\n *    that is full refuses another digit, as `maxLength` would.\n *  - **A paste that is a whole code replaces the field**, wherever the caret is: a\n *    person pasting six digits means \"this is the code\", not \"insert these into the\n *    stale one\".\n *  - **The caret stays put** when a character is dropped, rather than jumping to the\n *    end as a controlled input does when its value is put back.\n *\n * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —\n * makes the code `length` digits long. It is a notification, nothing more: the field\n * never submits a form on its own. Whether a full code verifies at once is the app's\n * call (a sign-in step may; a \"turn off two-factor\" form that also wants a password\n * should not). It does not fire for a value set from outside.\n *\n * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint\n * as a caption under the field (a {@link FieldHint} \"?\" rides the label line instead),\n * the error under that, both attached through `aria-describedby` after the caller's own.\n */\nexport interface OneTimeCodeInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"autoComplete\" | \"maxLength\" | \"pattern\"\n  >,\n    FieldHelpProps {\n  /** The digits so far — a string, so leading zeros survive. */\n  value: string;\n  /** The cleaned code after every edit: digits only, never longer than `length`. */\n  onChange: (code: string) => void;\n  /** How many digits the code has. Default 6. The field refuses digits past it. */\n  length?: number;\n  /** Called with the code when an edit makes it `length` digits long. Never submits\n   *  anything itself. */\n  onComplete?: (code: string) => void;\n  /** The floating label, as on {@link Input}. Without one, name the field with\n   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */\n  label?: ReactNode;\n  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything\n   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when\n   *  there is no label. The rule {@link Select}'s `hint` follows. */\n  hint?: ReactNode;\n  /** What is wrong (\"That code has expired\"). Rendered under the field, attached with\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Paint the field invalid and set `aria-invalid` without a message of its own. */\n  invalid?: boolean;\n  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a\n   *  label, the `<input>` itself when it has none — as on {@link Input}. */\n  inputClassName?: string;\n  /**\n   * Keep the field `readOnly` until it first takes focus.\n   *\n   * A browser that has a login saved for the site fills it in on load — and on a page\n   * where the code field is the only text field near a password field, it can take the\n   * code field for the username and write the address into it. A read-only field is\n   * never autofilled, and focus is the moment a person (or the platform's code\n   * suggestion, which needs a focused field anyway) starts to use it. So the field\n   * stays read-only until then, and only until then.\n   *\n   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):\n   * this is the one place where read-only does not mean \"you may not type here\", and\n   * without the opt-out the field would sit there greyed until it is clicked.\n   *\n   * {@link TwoFactorSetting} has always done this — its code fields share a page with\n   * the current-password field of the disable form — and keeps doing it through this\n   * prop. Off by default, because it is a trade: a field that is read-only at the\n   * moment focus lands can be announced as read-only by a screen reader, and on some\n   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where\n   * a saved login actually lands in the field.\n   */\n  readOnlyUntilFocus?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n// Equal-width digits, spaced a little apart, so a code reads — and compares against the\n// authenticator's screen — digit by digit.\nconst CODE_TYPE = \"tabular-nums tracking-widest\";\n\n/** The ASCII digits in `text`, in order. NFKC folds full-width digits (\"１\") to \"1\". */\nfunction digitsOf(text: string): string {\n  return text.normalize(\"NFKC\").replace(/\\D/g, \"\");\n}\n\nexport function OneTimeCodeInput(props: OneTimeCodeInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    length = 6,\n    onComplete,\n    label,\n    hint,\n    help,\n    error,\n    invalid: invalidProp,\n    className,\n    inputClassName,\n    readOnlyUntilFocus = false,\n    readOnly,\n    id,\n    placeholder,\n    onFocus,\n    onPaste,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  } = props;\n  // A length below one is no code at all; a fractional one is a typo.\n  const size = Math.max(1, Math.floor(length) || 1);\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). See `hint`. Through useFieldHint and\n  // useFieldError since 0.34, not copies of their rules (DUP-2, DUP-8).\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? rest[\"aria-label\"] });\n  const {\n    isInvalid: invalid,\n    describedBy,\n    errorEl,\n  } = useFieldError(error, invalidProp, hintParts.describedBy, ariaInvalid);\n  // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is\n  // never re-parented (and never loses focus) when a message comes or goes. See\n  // `FieldGroup` in field-base.tsx.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n\n  // Focused once = in use; the guard is down for good from then on (see the prop).\n  const [focusedOnce, setFocusedOnce] = useState(false);\n  const guarding = readOnlyUntilFocus && !focusedOnce;\n\n  const commit = (next: string) => {\n    if (next === value) return;\n    onChange(next);\n    if (next.length === size) onComplete?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const raw = input.value;\n    const cleaned = digitsOf(raw);\n    // Past the length: a full field refuses the digit (what `maxLength` does), a\n    // partial one keeps the first `size` — a paste longer than the room left.\n    const refused = cleaned.length > size && value.length >= size;\n    const next = refused ? value : cleaned.slice(0, size);\n    if (next !== raw) {\n      // Write the cleaned text back NOW, with the caret where the typist left it.\n      // React would otherwise put its value back after this handler, and setting an\n      // input's value moves the caret to the end — so a space typed mid-code threw\n      // the caret to the last digit. React finds the DOM already agreeing and leaves\n      // it alone.\n      const caret = input.selectionStart ?? raw.length;\n      const at = refused\n        ? Math.max(0, caret - (raw.length - value.length))\n        : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);\n      input.value = next;\n      try {\n        input.setSelectionRange(at, at);\n      } catch {\n        /* not every input type has a selection; a text field does */\n      }\n    }\n    commit(next);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(e);\n    // A read-only field still receives the event; it must not take the code.\n    if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;\n    const pasted = digitsOf(e.clipboardData.getData(\"text\"));\n    // Anything else — a few digits into a partial code — is an ordinary insertion,\n    // and the change handler cleans it.\n    if (pasted.length !== size) return;\n    e.preventDefault();\n    commit(pasted);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    if (guarding) setFocusedOnce(true);\n    onFocus?.(e);\n  };\n\n  const input = (\n    <input\n      ref={ref}\n      id={labelled ? fieldId : id}\n      {...rest}\n      type=\"text\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      // The numeric keypad's older cue, for the browsers that predate `inputMode`.\n      // The value is digits only, so it can never fail the pattern.\n      pattern=\"[0-9]*\"\n      // A labelled field's placeholder is a single space: it drives the floating\n      // label's `placeholder-shown` trick. Unlabelled, the caller's (\"000000\") shows.\n      placeholder={labelled ? \" \" : placeholder}\n      value={value}\n      readOnly={readOnly || guarding}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onFocus={handleFocus}\n      aria-invalid={invalid || undefined}\n      aria-describedby={describedBy}\n      className={cn(\n        labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,\n        CODE_TYPE,\n        // Read-only for the guard's sake only: keep the editable look. A caller's\n        // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.\n        guarding && !readOnly && FIELD_WRITABLE_LOOK,\n        !labelled && className,\n        inputClassName,\n        invalid && FIELD_INVALID,\n      )}\n    />\n  );\n\n  const field: ReactNode = labelled ? (\n    <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n      {input}\n    </FloatingField>\n  ) : (\n    // No label line to ride: a \"?\" goes at the field's end edge, outside the box —\n    // where an unlabelled Select puts it.\n    <EndHintRow hint={hintParts.labelHint}>{input}</EndHintRow>\n  );\n\n  if (hintParts.captionText === undefined && errorEl === null && !reserve) return field;\n  return (\n    <div>\n      {field}\n      <FieldCaption parts={hintParts} />\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":["input"]}

package/dist/components/phone-input.d.ts

@@ -72,4 +72,4 @@ export interface PhoneInputProps extends Omit<InputProps, "type" | "value" | "de
  * the number with `aria-describedby`. The select is named by `labels.countryCode`, and
  * the pair is a group named by a string `label`.
  */
-export declare function PhoneInput({ ref, value, onValueChange, onChange, onBlur, defaultCountry, countries, labels, className, inputClassName, label, hint, error, invalid, disabled, "aria-describedby": ariaDescribedBy, ...rest }: PhoneInputProps): import("react").JSX.Element;
+export declare function PhoneInput({ ref, value, onValueChange, onChange, onBlur, defaultCountry, countries, labels, className, inputClassName, label, hint, help, error, invalid, disabled, "aria-describedby": ariaDescribedBy, ...rest }: PhoneInputProps): import("react").JSX.Element;

package/dist/components/phone-input.js

@@ -50,6 +50,7 @@ function PhoneInput({
   inputClassName,
   label,
   hint,
+  help,
   error,
   invalid,
   disabled,
@@ -105,6 +106,9 @@ function PhoneInput({
   if (country !== "other" && !options.includes(country)) options.push(country);
   const messages = useFieldMessages({
     hint,
+    // The number's label line takes the help's "?" (0.36); the hint is then the caption.
+    help,
+    name: label ?? rest["aria-label"],
     error,
     invalid,
     describedBy: ariaDescribedBy,