@eifi1/ui-kit 0.31.1 → 0.32.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { CURRENCIES } from \"./currency-select\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ninterface 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  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  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\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// The error line under a field — the type of `ui.tsx`'s (module-private) one, so a\n// NumberInput's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\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, `ariaLabel` 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    value,\n    onChange,\n    onCommit,\n    label,\n    ariaLabel,\n    labels,\n    placeholder,\n    disabled,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    calculator = true,\n    variant = \"field\",\n    hint,\n    invalid: invalidProp,\n    error,\n    locale: localeProp,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const hintId = useId();\n  const errorId = useId();\n  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const hasError = hasMessage(error);\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  // The standing advice first, the news second: the caller's ids, the caption, the error.\n  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n  const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const endRef = useRef<HTMLDivElement>(null);\n  const [endWidth, setEndWidth] = useState<number | null>(null);\n  const hasEnd = showCalc || suffix !== undefined;\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  useLayoutEffect(() => {\n    const el = endRef.current;\n    if (!hasEnd || !el || typeof ResizeObserver === \"undefined\") return;\n    // The first callback fires on `observe`; no layout (jsdom) keeps the class fallback.\n    const observer = new ResizeObserver(() => {\n      const width = el.getBoundingClientRect().width;\n      setEndWidth(width > 0 ? Math.ceil(width) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasEnd]);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // The mark is the locale's; see the component's note. `derived` is the value in that\n  // mark — one character for one, no grouping — and `draft` the typist's own text,\n  // shown only while it still says what the value says (see `showsTyped`).\n  const mark = decimalMark(useKitLocale(localeProp));\n  const [draft, setDraft] = useState<string | null>(null);\n  const derived = localizeMark(value, mark);\n  const display = draft !== null && showsTyped(draft, mark, value) ? draft : 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) => {\n    setDraft(raw);\n    onChange(readTyped(raw, mark));\n  };\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 = 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    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  const field = (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={textHint ? undefined : hint}\n    >\n      <input\n        ref={inputRef}\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={disabled}\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) => typed(e.target.value)}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={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        )}\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      {(showCalc || suffix !== undefined) && (\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              ariaLabel={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-[var(--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  if (!textHint && !hasError && !reserve) return field;\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      {field}\n      {textHint && (\n        <p id={hintId} className=\"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className={FIELD_ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAyZM,cA0DE,YA1DF;AAzZN,SAAS,WAAW,OAAO,iBAAiB,QAAQ,gBAAgB;AAEpE,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,kBAAkB;AAC3B,SAAS,YAAY,wBAAwB;AAC7C,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AA+H7B,SAAS,WAAW,GAAmB;AACrC,QAAM,OAAO,aAAa,CAAC;AAC3B,QAAM,MAAM,KAAK,QAAQ,GAAG;AAC5B,SAAO,QAAQ,KAAK,IAAI,KAAK,SAAS,MAAM;AAC9C;AAYO,SAAS,WACd,SACA,OACA,MACA,KACA,KACQ;AACR,QAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,OAAO,WAAW,CAAC,CAAC;AAGpF,MAAI,YAAY,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAG,QAAO,MAAM,CAAC;AACjE,QAAM,SAAS,QAAQ,UAAa,OAAO,SAAS,GAAG,IAAI,MAAM;AACjE,QAAM,OAAO,UAAU,UAAU;AACjC,QAAM,UAAU,KAAK,MAAM,GAAG;AAE9B,QAAM,SAAS,KAAK,IAAI,MAAM,OAAO,IAAI;AACzC,QAAM,IAAI,SACN,UAAU,QACV,QAAQ,IACN,KAAK,KAAK,GAAG,IAAI,QAAQ,IACzB,KAAK,MAAM,GAAG,IAAI,QAAQ;AAChC,QAAM,SAAS,KAAK,IAAI,KAAK,IAAI,WAAW,IAAI,GAAG,WAAW,MAAM,CAAC,GAAG,EAAE;AAC1E,SAAO,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,MAAM,CAAC,CAAC;AAC1D;AAIA,MAAM,oBAAoB;AAO1B,MAAM,gBAAgB,IAAI,OAAO,qBAAqB,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,eAAe;AAG5G,MAAM,kBAAkB;AAKxB,SAAS,WAAW,MAA0B;AAC5C,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,SAAU,QAAO;AACjE,QAAM,OAAO,OAAO,IAAI;AACxB,UAAQ,cAAc,KAAK,IAAI,KAAK,gBAAgB,KAAK,IAAI,MAAM,CAAC,KAAK,SAAS,GAAG,KAAK,CAAC,KAAK,SAAS,GAAG;AAC9G;AAUA,SAAS,eAAe,QAAmB,OAA6B;AACtE,MAAI,WAAW,UAAa,WAAW,QAAQ,WAAW,GAAI,QAAO,WAAW,MAAM;AACtF,SAAO,MAAM,KAAK,UAAU;AAC9B;AAUA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAoCO,SAAS,YAAY,OAAyB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,MAAM;AAEtB,QAAM,WAAY,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AAC9E,QAAM,WAAW,WAAW,KAAK;AAEjC,QAAM,UAAU,WAAW,SAAS,UAAU;AAE9C,QAAM,cAAc,iBAAiB,iBAAiB,YAAY,QAAQ,YAAY,OAAO;AAC7F,QAAM,UAAU,QAAQ,WAAW,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,SAAS,YAAY,WAAW;AAMtC,QAAM,cAAc,OAAO,WAAW,YAAY,OAAO,WAAW,WAAW,OAAO,MAAM,EAAE,SAAS;AACvG,QAAM,eACJ,gBAAgB,OAAO,QAAQ,WAAW,eAAe,WAAW,eAAe,EAAE,MAAM;AAC7F,kBAAgB,MAAM;AACpB,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,UAAU,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAE7D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,QAAQ,GAAG,sBAAsB,EAAE;AACzC,kBAAY,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,IAAI;AAAA,IACjD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAK9C,QAAM,OAAO,YAAY,aAAa,UAAU,CAAC;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,UAAU,aAAa,OAAO,IAAI;AACxC,QAAM,UAAU,UAAU,QAAQ,WAAW,OAAO,MAAM,KAAK,IAAI,QAAQ;AAI3E,QAAM,QAAQ,CAAC,QAAgB;AAC7B,aAAS,GAAG;AACZ,aAAS,UAAU,KAAK,IAAI,CAAC;AAAA,EAC/B;AAGA,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,IAAI;AACb,aAAS,IAAI;AAAA,EACf;AAGA,QAAM,cAAc,OAAO,KAAK;AAChC,YAAU,MAAM;AACd,QAAI,YAAY,WAAW,CAAC,YAAY,EAAG;AAC3C,QAAI,CAAC,eAAe,QAAQ,CAAC,OAAO,WAAW,WAAW,CAAC,EAAG;AAC9D,gBAAY,UAAU;AACtB,UAAM,OAAO,CAAC,OAAO,WAAW,MAAM,EAAE,KAAK,CAAC,MAAM,OAAO,MAAM,YAAY,OAAO,MAAM,QAAQ;AAClG,YAAQ;AAAA,MACN,uBAAuB,SAAS,SAAY,KAAK,KAAK,OAAO,IAAI,CAAC,GAAG;AAAA,IAKvE;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,WAAW,WAAW,CAAC;AAE1C,QAAM,SAAS,MAAM;AACnB,aAAS,IAAI;AACb,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,SAAS,CAAC,UAAkB;AAChC,aAAS,IAAI;AAEb,UAAM,WAAW,iBAAiB,KAAK,EAAE,KAAK;AAC9C,UAAM,IAAI,aAAa,KAAK,MAAM,OAAO,QAAQ;AACjD,UAAM,OAAO,aAAa,WAAW,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,OAAO,MAAgB,KAAK,GAAG,CAAC;AACpG,QAAI,SAAS,MAAO,UAAS,IAAI;AAAA,EACnC;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO,OAAO;AAErC,QAAI,CAAC,QAAQ,EAAE,OAAO,MAAM,CAAC,OAAO,SAAS,IAAI,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,QAAS;AAC1F,UAAM,QACJ,EAAE,QAAQ,YAAY,IAAI,EAAE,QAAQ,cAAc,KAAK,EAAE,QAAQ,WAAW,KAAK,EAAE,QAAQ,aAAa,MAAM;AAChH,QAAI,UAAU,EAAG;AAEjB,MAAE,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAEA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,MAAM,WAAW,SAAY;AAAA,MAE7B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YAEb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,YACrC,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YACzB,oBAAkB;AAAA,YAClB,iBAAe;AAAA,YAMf,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA,YAKA,OACE,UAAU,YAAY,OAClB,EAAE,kBAAkB,WAAW,EAAE,IACjC,iBAAiB,SACf,EAAE,kBAAkB,aAAa,IACjC;AAAA;AAAA,QAEV;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,KAAK,QAAQ,WAAU,8CACzB;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cAGC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cAGX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YAGC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,UAAU;AAAA,YACV,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA,YAChB,aAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEF,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,QAAS,QAAO;AAI/C,SACE,qBAAC,SACE;AAAA;AAAA,IACA,YACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,2DACtB,gBACH;AAAA,IAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\nimport { CURRENCIES } from \"./currency-select\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useInlineHint } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ninterface 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  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\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// The error line under a field — the type of `ui.tsx`'s (module-private) one, so a\n// NumberInput's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\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, `ariaLabel` 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    value,\n    onChange,\n    onCommit,\n    label,\n    ariaLabel,\n    labels,\n    placeholder,\n    disabled,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    calculator = true,\n    variant = \"field\",\n    hint: hintProp,\n    invalid: invalidProp,\n    error,\n    locale: localeProp,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const hintId = useId();\n  const errorId = useId();\n  // §4 \"No fact only in a tooltip\" (docs/text-size-harmonization.md): at Large and on a\n  // touch screen a FieldHint is its words, so it takes the caption's path below — the\n  // other kit fields do the same through `useFieldHint`.\n  const hint = useInlineHint(hintProp);\n  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const hasError = hasMessage(error);\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  // The standing advice first, the news second: the caller's ids, the caption, the error.\n  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n  const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = usePhoneLayout();\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const endRef = useRef<HTMLDivElement>(null);\n  const [endWidth, setEndWidth] = useState<number | null>(null);\n  const hasEnd = showCalc || suffix !== undefined;\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  useLayoutEffect(() => {\n    const el = endRef.current;\n    if (!hasEnd || !el || typeof ResizeObserver === \"undefined\") return;\n    // The first callback fires on `observe`; no layout (jsdom) keeps the class fallback.\n    const observer = new ResizeObserver(() => {\n      const width = el.getBoundingClientRect().width;\n      setEndWidth(width > 0 ? Math.ceil(width) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasEnd]);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // The mark is the locale's; see the component's note. `derived` is the value in that\n  // mark — one character for one, no grouping — and `draft` the typist's own text,\n  // shown only while it still says what the value says (see `showsTyped`).\n  const mark = decimalMark(useKitLocale(localeProp));\n  const [draft, setDraft] = useState<string | null>(null);\n  const derived = localizeMark(value, mark);\n  const display = draft !== null && showsTyped(draft, mark, value) ? draft : 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) => {\n    setDraft(raw);\n    onChange(readTyped(raw, mark));\n  };\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 = 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    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  const field = (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={textHint ? undefined : hint}\n    >\n      <input\n        ref={inputRef}\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={disabled}\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) => typed(e.target.value)}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={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        )}\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      {(showCalc || suffix !== undefined) && (\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              ariaLabel={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-[var(--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  if (!textHint && !hasError && !reserve) return field;\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      {field}\n      {textHint && (\n        <p id={hintId} className=\"mt-1 text-caption leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className={FIELD_ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAgaM,cA0DE,YA1DF;AAhaN,SAAS,WAAW,OAAO,iBAAiB,QAAQ,gBAAgB;AAEpE,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,qBAAqB;AAC9F,SAAS,kBAAkB;AAC3B,SAAS,YAAY,wBAAwB;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAiI7B,SAAS,WAAW,GAAmB;AACrC,QAAM,OAAO,aAAa,CAAC;AAC3B,QAAM,MAAM,KAAK,QAAQ,GAAG;AAC5B,SAAO,QAAQ,KAAK,IAAI,KAAK,SAAS,MAAM;AAC9C;AAYO,SAAS,WACd,SACA,OACA,MACA,KACA,KACQ;AACR,QAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,OAAO,WAAW,CAAC,CAAC;AAGpF,MAAI,YAAY,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAG,QAAO,MAAM,CAAC;AACjE,QAAM,SAAS,QAAQ,UAAa,OAAO,SAAS,GAAG,IAAI,MAAM;AACjE,QAAM,OAAO,UAAU,UAAU;AACjC,QAAM,UAAU,KAAK,MAAM,GAAG;AAE9B,QAAM,SAAS,KAAK,IAAI,MAAM,OAAO,IAAI;AACzC,QAAM,IAAI,SACN,UAAU,QACV,QAAQ,IACN,KAAK,KAAK,GAAG,IAAI,QAAQ,IACzB,KAAK,MAAM,GAAG,IAAI,QAAQ;AAChC,QAAM,SAAS,KAAK,IAAI,KAAK,IAAI,WAAW,IAAI,GAAG,WAAW,MAAM,CAAC,GAAG,EAAE;AAC1E,SAAO,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,MAAM,CAAC,CAAC;AAC1D;AAIA,MAAM,oBAAoB;AAO1B,MAAM,gBAAgB,IAAI,OAAO,qBAAqB,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,eAAe;AAG5G,MAAM,kBAAkB;AAKxB,SAAS,WAAW,MAA0B;AAC5C,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,SAAU,QAAO;AACjE,QAAM,OAAO,OAAO,IAAI;AACxB,UAAQ,cAAc,KAAK,IAAI,KAAK,gBAAgB,KAAK,IAAI,MAAM,CAAC,KAAK,SAAS,GAAG,KAAK,CAAC,KAAK,SAAS,GAAG;AAC9G;AAUA,SAAS,eAAe,QAAmB,OAA6B;AACtE,MAAI,WAAW,UAAa,WAAW,QAAQ,WAAW,GAAI,QAAO,WAAW,MAAM;AACtF,SAAO,MAAM,KAAK,UAAU;AAC9B;AAUA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAoCO,SAAS,YAAY,OAAyB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,UAAU;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,MAAM;AAItB,QAAM,OAAO,cAAc,QAAQ;AAEnC,QAAM,WAAY,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AAC9E,QAAM,WAAW,WAAW,KAAK;AAEjC,QAAM,UAAU,WAAW,SAAS,UAAU;AAE9C,QAAM,cAAc,iBAAiB,iBAAiB,YAAY,QAAQ,YAAY,OAAO;AAC7F,QAAM,UAAU,QAAQ,WAAW,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,eAAe;AAChC,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,SAAS,YAAY,WAAW;AAMtC,QAAM,cAAc,OAAO,WAAW,YAAY,OAAO,WAAW,WAAW,OAAO,MAAM,EAAE,SAAS;AACvG,QAAM,eACJ,gBAAgB,OAAO,QAAQ,WAAW,eAAe,WAAW,eAAe,EAAE,MAAM;AAC7F,kBAAgB,MAAM;AACpB,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,UAAU,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAE7D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,QAAQ,GAAG,sBAAsB,EAAE;AACzC,kBAAY,QAAQ,IAAI,KAAK,KAAK,KAAK,IAAI,IAAI;AAAA,IACjD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAK9C,QAAM,OAAO,YAAY,aAAa,UAAU,CAAC;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,UAAU,aAAa,OAAO,IAAI;AACxC,QAAM,UAAU,UAAU,QAAQ,WAAW,OAAO,MAAM,KAAK,IAAI,QAAQ;AAI3E,QAAM,QAAQ,CAAC,QAAgB;AAC7B,aAAS,GAAG;AACZ,aAAS,UAAU,KAAK,IAAI,CAAC;AAAA,EAC/B;AAGA,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,IAAI;AACb,aAAS,IAAI;AAAA,EACf;AAGA,QAAM,cAAc,OAAO,KAAK;AAChC,YAAU,MAAM;AACd,QAAI,YAAY,WAAW,CAAC,YAAY,EAAG;AAC3C,QAAI,CAAC,eAAe,QAAQ,CAAC,OAAO,WAAW,WAAW,CAAC,EAAG;AAC9D,gBAAY,UAAU;AACtB,UAAM,OAAO,CAAC,OAAO,WAAW,MAAM,EAAE,KAAK,CAAC,MAAM,OAAO,MAAM,YAAY,OAAO,MAAM,QAAQ;AAClG,YAAQ;AAAA,MACN,uBAAuB,SAAS,SAAY,KAAK,KAAK,OAAO,IAAI,CAAC,GAAG;AAAA,IAKvE;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,WAAW,WAAW,CAAC;AAE1C,QAAM,SAAS,MAAM;AACnB,aAAS,IAAI;AACb,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,SAAS,CAAC,UAAkB;AAChC,aAAS,IAAI;AAEb,UAAM,WAAW,iBAAiB,KAAK,EAAE,KAAK;AAC9C,UAAM,IAAI,aAAa,KAAK,MAAM,OAAO,QAAQ;AACjD,UAAM,OAAO,aAAa,WAAW,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,OAAO,MAAgB,KAAK,GAAG,CAAC;AACpG,QAAI,SAAS,MAAO,UAAS,IAAI;AAAA,EACnC;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO,OAAO;AAErC,QAAI,CAAC,QAAQ,EAAE,OAAO,MAAM,CAAC,OAAO,SAAS,IAAI,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,QAAS;AAC1F,UAAM,QACJ,EAAE,QAAQ,YAAY,IAAI,EAAE,QAAQ,cAAc,KAAK,EAAE,QAAQ,WAAW,KAAK,EAAE,QAAQ,aAAa,MAAM;AAChH,QAAI,UAAU,EAAG;AAEjB,MAAE,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAEA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,MAAM,WAAW,SAAY;AAAA,MAE7B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YAEb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,YACrC,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YACzB,oBAAkB;AAAA,YAClB,iBAAe;AAAA,YAMf,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA,YAKA,OACE,UAAU,YAAY,OAClB,EAAE,kBAAkB,WAAW,EAAE,IACjC,iBAAiB,SACf,EAAE,kBAAkB,aAAa,IACjC;AAAA;AAAA,QAEV;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,KAAK,QAAQ,WAAU,8CACzB;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cAGC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cAGX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YAGC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,UAAU;AAAA,YACV,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA,YAChB,aAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEF,MAAI,CAAC,YAAY,CAAC,YAAY,CAAC,QAAS,QAAO;AAI/C,SACE,qBAAC,SACE;AAAA;AAAA,IACA,YACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,4DACtB,gBACH;AAAA,IAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/numpad-sheet.d.ts

@@ -1,17 +1,19 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { bI as CalculatorLabels } from '../delete-account-setting-CpIhzxxZ.js';
+import { bP as CalculatorLabels } from '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -93,7 +98,7 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to

package/dist/components/numpad-sheet.js

@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
 import { Delete } from "lucide-react";
 import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { useEscapeKey } from "../hooks/use-dismiss.js";
 import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc.js";
 import {
@@ -28,7 +29,7 @@ const PAD_KEYS = [
   { kind: "back" },
   { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" }
 ];
-const PAD_BTN = "flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] active:scale-[0.97]";
+const PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;
 const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
 const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
 function NumberPadSheet({

package/dist/components/numpad-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels extends Partial<CalculatorLabels> {\n  /** The pad's own name — the `calculator.panel` key under its older name here. */\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: PadKeyName }\n  | { kind: \"back\" };\n\n/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */\ntype PadKeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n/** Every key's shape — including the thing this pad used to delete without replacing.\n *\n *  `focus:outline-none` alone is not a style choice, it is the removal of the only\n *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all\n *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as\n *  the dropdown search box).\n *\n *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already\n *  writes down. This is a touch control first, and a plain `focus:` ring paints itself\n *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is\n *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the\n *  ring inside the key it describes.\n *\n *  --brand rather than --border-strong: the operator keys are filled with --border, and\n *  a ring in the colour of the thing it surrounds is not an indicator. */\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n  decimalMark = \".\",\n  onResult,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** The glyph on the decimal key — \",\" where the host shows a comma (AmountInput\n   *  in fr-CH, kastlan 40). With \",\" the key inserts a comma and the text is handed\n   *  back unsanitized, for the host to read by its locale (keksdose G1). */\n  decimalMark?: \".\" | \",\";\n  /** \"=\": the evaluated result, dot-decimal. Default `onChange`. A host that reads\n   *  typed text by the locale's marks takes it apart from keystrokes, since a result\n   *  like \"1.234\" is a decimal and never a grouped thousand. */\n  onResult?: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its non-digit keys — screen-reader names, except\n   * `done`, which is the visible text on the primary key. Merged over `calculator`\n   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,\n   * on a phone, and one translation covers both. Digits need no name — their glyph\n   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */\n  labels?: NumberPadSheetLabels;\n}) {\n  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.\n  const fromProps = useMemo(() => {\n    if (!labels) return undefined;\n    const { pad, ...rest } = labels;\n    return pad === undefined ? rest : { ...rest, panel: pad };\n  }, [labels]);\n  const text = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  // ── NO focus trap either, and for a harder reason than the scroll lock ────────\n  //\n  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the\n  // exception, and it is not an oversight to be tidied up later: a trap here would\n  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with\n  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host\n  // input's own focus state. Moving focus into the pad blurs that input, the host\n  // sets `focused` false, and the pad unmounts — on mount, before a single key can be\n  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed\n  // expression on the way out.\n  //\n  // That is the contract, not an accident of it. This sheet exists because a PWA\n  // cannot swap the system keyboard for its own: the host keeps real focus, caret and\n  // selection while `inputMode=\"none\"` suppresses the OS keys, and the root's\n  // `onPointerDown` preventDefault below is there for the same reason. The pad is\n  // `role=\"group\"`, not a dialog. A keyboard does not trap focus; it is what you type\n  // WITH.\n  //\n  // What was genuinely missing is a way OUT that is not a tap. `useEscapeKey` and not\n  // a handler on the sheet, because the sheet never has the focus a keydown would\n  // bubble from — the host does, and the host is not this component. Escape does what\n  // the Done key does rather than cancelling, because committing on blur is the\n  // host's contract and a cancel would have to be the host's to offer.\n  //\n  // The limit, since it is better written down than discovered: inside a `Modal` the\n  // dialog's own Escape handler sits on the focus path and stops the event before a\n  // document listener sees it, so there the press closes the dialog — which it did\n  // before this line existed too, and which takes the pad with it either way.\n  useEscapeKey(onDone);\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  // With a \",\" mark the host keeps the typist's own text (AmountInput, keksdose G1):\n  // the key inserts the comma it shows, and the host, not this pad, decides which mark\n  // is the decimal one — sanitizing here would fold a grouping \".\" into a decimal.\n  const insert = (ch: string) =>\n    onChange(decimalMark === \",\" ? value + (ch === \".\" ? \",\" : ch) : sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) (onResult ?? onChange)(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={text.panel}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        {/* At the logical end, opposite the label; the figures themselves stay\n            left-to-right and right-aligned, like the desktop calculator's. */}\n        <div className=\"ms-auto min-w-0\">\n          <div dir=\"ltr\" className=\"truncate text-right font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div dir=\"ltr\" className=\"h-4 text-right font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={text.backspace}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? text[key.name] : key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.kind === \"ins\" && key.name === \"decimal\" ? decimalMark : key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          // The one key whose own fill is --brand, so it rings in the colour that fill\n          // was chosen to be legible against instead (tailwind-merge keeps the later\n          // ring colour). A --brand ring here would be present in the DOM and invisible\n          // on screen, which is the defect this change exists to fix.\n          className={cn(\n            PAD_BTN,\n            \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] focus-visible:ring-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\",\n          )}\n        >\n          {text.done}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels extends Partial<CalculatorLabels> {\n  /** The pad's own name — the `calculator.panel` key under its older name here. */\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: PadKeyName }\n  | { kind: \"back\" };\n\n/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */\ntype PadKeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n/** Every key's shape — including the thing this pad used to delete without replacing.\n *\n *  `focus:outline-none` alone is not a style choice, it is the removal of the only\n *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all\n *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as\n *  the dropdown search box).\n *\n *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already\n *  writes down. This is a touch control first, and a plain `focus:` ring paints itself\n *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is\n *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the\n *  ring inside the key it describes.\n *\n *  --brand rather than --border-strong: the operator keys are filled with --border, and\n *  a ring in the colour of the thing it surrounds is not an indicator. */\nconst PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n  decimalMark = \".\",\n  onResult,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** The glyph on the decimal key — \",\" where the host shows a comma (AmountInput\n   *  in fr-CH, kastlan 40). With \",\" the key inserts a comma and the text is handed\n   *  back unsanitized, for the host to read by its locale (keksdose G1). */\n  decimalMark?: \".\" | \",\";\n  /** \"=\": the evaluated result, dot-decimal. Default `onChange`. A host that reads\n   *  typed text by the locale's marks takes it apart from keystrokes, since a result\n   *  like \"1.234\" is a decimal and never a grouped thousand. */\n  onResult?: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its non-digit keys — screen-reader names, except\n   * `done`, which is the visible text on the primary key. Merged over `calculator`\n   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,\n   * on a phone, and one translation covers both. Digits need no name — their glyph\n   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */\n  labels?: NumberPadSheetLabels;\n}) {\n  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.\n  const fromProps = useMemo(() => {\n    if (!labels) return undefined;\n    const { pad, ...rest } = labels;\n    return pad === undefined ? rest : { ...rest, panel: pad };\n  }, [labels]);\n  const text = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  // ── NO focus trap either, and for a harder reason than the scroll lock ────────\n  //\n  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the\n  // exception, and it is not an oversight to be tidied up later: a trap here would\n  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with\n  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host\n  // input's own focus state. Moving focus into the pad blurs that input, the host\n  // sets `focused` false, and the pad unmounts — on mount, before a single key can be\n  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed\n  // expression on the way out.\n  //\n  // That is the contract, not an accident of it. This sheet exists because a PWA\n  // cannot swap the system keyboard for its own: the host keeps real focus, caret and\n  // selection while `inputMode=\"none\"` suppresses the OS keys, and the root's\n  // `onPointerDown` preventDefault below is there for the same reason. The pad is\n  // `role=\"group\"`, not a dialog. A keyboard does not trap focus; it is what you type\n  // WITH.\n  //\n  // What was genuinely missing is a way OUT that is not a tap. `useEscapeKey` and not\n  // a handler on the sheet, because the sheet never has the focus a keydown would\n  // bubble from — the host does, and the host is not this component. Escape does what\n  // the Done key does rather than cancelling, because committing on blur is the\n  // host's contract and a cancel would have to be the host's to offer.\n  //\n  // The limit, since it is better written down than discovered: inside a `Modal` the\n  // dialog's own Escape handler sits on the focus path and stops the event before a\n  // document listener sees it, so there the press closes the dialog — which it did\n  // before this line existed too, and which takes the pad with it either way.\n  useEscapeKey(onDone);\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  // With a \",\" mark the host keeps the typist's own text (AmountInput, keksdose G1):\n  // the key inserts the comma it shows, and the host, not this pad, decides which mark\n  // is the decimal one — sanitizing here would fold a grouping \".\" into a decimal.\n  const insert = (ch: string) =>\n    onChange(decimalMark === \",\" ? value + (ch === \".\" ? \",\" : ch) : sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) (onResult ?? onChange)(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={text.panel}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        {/* At the logical end, opposite the label; the figures themselves stay\n            left-to-right and right-aligned, like the desktop calculator's. */}\n        <div className=\"ms-auto min-w-0\">\n          <div dir=\"ltr\" className=\"truncate text-right font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div dir=\"ltr\" className=\"h-4 text-right font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={text.backspace}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? text[key.name] : key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.kind === \"ins\" && key.name === \"decimal\" ? decimalMark : key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          // The one key whose own fill is --brand, so it rings in the colour that fill\n          // was chosen to be legible against instead (tailwind-merge keeps the later\n          // ring colour). A --brand ring here would be present in the DOM and invisible\n          // on screen, which is the defect this change exists to fix.\n          className={cn(\n            PAD_BTN,\n            \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] focus-visible:ring-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\",\n          )}\n        >\n          {text.done}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}

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

@@ -4,8 +4,8 @@ import { forwardRef, useId, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
 import { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from "./ui.js";
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
-const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
+const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
 const CODE_TYPE = "tabular-nums tracking-widest";
 function digitsOf(text) {
   return text.normalize("NFKC").replace(/\D/g, "");

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\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}\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this\n// field's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\nconst FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\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 const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(\n  function OneTimeCodeInput(props, ref) {\n    const {\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    const hintId = useId();\n    const errorId = useId();\n    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n    const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n    const hasError = hasMessage(error);\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 ui.tsx.\n    const reserve = \"error\" in props || \"hint\" in props;\n    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\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 nonTextHint = hasMessage(hint) && !textHint;\n    let field: ReactNode;\n    if (labelled) {\n      field = (\n        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>\n          {input}\n        </FloatingField>\n      );\n    } else if (nonTextHint) {\n      // No label line to ride: the \"?\" goes at the field's end edge, outside the box —\n      // where an unlabelled Select puts it.\n      field = (\n        <div className=\"flex items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">{input}</div>\n          <span className=\"flex shrink-0 items-center\">{hint}</span>\n        </div>\n      );\n    } else {\n      field = input;\n    }\n\n    if (!textHint && !hasError && !reserve) return field;\n    return (\n      <div>\n        {field}\n        {textHint && (\n          <p id={hintId} className={FIELD_CAPTION_CLASS}>\n            {hint}\n          </p>\n        )}\n        {hasError && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nOneTimeCodeInput.displayName = \"OneTimeCodeInput\";\n"],"mappings":"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","names":["OneTimeCodeInput","input"]}
+{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\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}\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this\n// field's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\nconst FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-[var(--text-muted)]\";\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 const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(\n  function OneTimeCodeInput(props, ref) {\n    const {\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    const hintId = useId();\n    const errorId = useId();\n    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n    const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n    const hasError = hasMessage(error);\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 ui.tsx.\n    const reserve = \"error\" in props || \"hint\" in props;\n    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\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 nonTextHint = hasMessage(hint) && !textHint;\n    let field: ReactNode;\n    if (labelled) {\n      field = (\n        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>\n          {input}\n        </FloatingField>\n      );\n    } else if (nonTextHint) {\n      // No label line to ride: the \"?\" goes at the field's end edge, outside the box —\n      // where an unlabelled Select puts it.\n      field = (\n        <div className=\"flex items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">{input}</div>\n          <span className=\"flex shrink-0 items-center\">{hint}</span>\n        </div>\n      );\n    } else {\n      field = input;\n    }\n\n    if (!textHint && !hasError && !reserve) return field;\n    return (\n      <div>\n        {field}\n        {textHint && (\n          <p id={hintId} className={FIELD_CAPTION_CLASS}>\n            {hint}\n          </p>\n        )}\n        {hasError && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nOneTimeCodeInput.displayName = \"OneTimeCodeInput\";\n"],"mappings":"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","names":["OneTimeCodeInput","input"]}

package/dist/components/page-contents.js

@@ -91,7 +91,7 @@ function PageContents({
             "aria-current": current ? "location" : void 0,
             onClick: () => setClicked(item.id),
             className: cn(
-              "-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150",
+              "-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150",
               variant === "rail" && "[overflow-wrap:anywhere]",
               item.level === 2 ? "ps-6" : "ps-3",
               current ? "border-[var(--brand)] font-medium text-[var(--brand)]" : "border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]"
@@ -127,7 +127,7 @@ function PageContents({
     );
   }
   return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": l.title, className, children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: l.title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: l.title }),
     list
   ] });
 }

package/dist/components/page-contents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\nexport const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {\n  title: \"On this page\",\n};\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: Partial<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-[var(--border)]\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-[var(--brand)] font-medium text-[var(--brand)]\"\n                  : \"border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details\n        className={cn(\n          \"group rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          className,\n        )}\n      >\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-[var(--text-secondary)] [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-[var(--border)] px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n        {l.title}\n      </p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\nexport const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {\n  title: \"On this page\",\n};\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: Partial<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-[var(--border)]\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-[var(--brand)] font-medium text-[var(--brand)]\"\n                  : \"border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details\n        className={cn(\n          \"group rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          className,\n        )}\n      >\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-[var(--text-secondary)] [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-[var(--border)] px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n        {l.title}\n      </p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,17 +1,19 @@
 import 'react';
 import '../lib/phone.js';
-export { cz as DEFAULT_PHONE_INPUT_LABELS, ee as PhoneInput, ef as PhoneInputLabels, eg as PhoneInputProps } from '../delete-account-setting-CpIhzxxZ.js';
+export { cJ as DEFAULT_PHONE_INPUT_LABELS, eq as PhoneInput, er as PhoneInputLabels, es as PhoneInputProps } from '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -92,4 +97,4 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';

package/dist/components/phone-input.js

@@ -21,8 +21,8 @@ function usePhoneInputLabels(prop) {
   const labels = useKitLabels("phoneInput", DEFAULT_PHONE_INPUT_LABELS, prop);
   return labels;
 }
-const CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
-const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
+const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 const isTextHint = (hint) => typeof hint === "string" && hint !== "" || typeof hint === "number";
 function storedNumber(value) {
   return isE164(value) ? parsePhone(value, "other") : null;
@@ -119,7 +119,7 @@ const PhoneInput = forwardRef(function PhoneInput2({
       role: named ? "group" : void 0,
       "aria-label": named ? label : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2 large:max-sm:flex-wrap", children: [
           /* @__PURE__ */ jsxs(
             Select,
             {
@@ -135,7 +135,7 @@ const PhoneInput = forwardRef(function PhoneInput2({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 large:max-sm:basis-full", children: /* @__PURE__ */ jsx(
             Input,
             {
               ref,