@eifi1/ui-kit 0.4.1 → 0.5.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\n\nexport interface MultiSelectOption {\n  value: string | number;\n  label: string;\n  hint?: string;\n}\n\ninterface Props {\n  options: MultiSelectOption[];\n  values: (string | number)[];\n  onChange: (next: (string | number)[]) => void;\n  /** Displayed when no value is selected (i.e. \"all\"). Defaults to \"All\"; pass a\n   * translated string for i18n. */\n  allLabel?: string;\n  /** Singular/plural countable label, used when 1+ items are selected. */\n  itemLabel?: (count: number) => string;\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /** Search-box placeholder (default \"Search\"). */\n  searchLabel?: string;\n  /** \"Select all\" action label (default \"Select all\"). */\n  selectAllLabel?: string;\n  /** \"Clear\" action label (default \"Clear\"). */\n  clearLabel?: string;\n  className?: string;\n  /** Extra classes for the open dropdown PANEL — the way to widen it past its\n   *  16rem default when the rows carry more than a label (Keksdose feedback #147). */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n}\n\nexport function MultiSelect({\n  options,\n  values,\n  onChange,\n  allLabel,\n  itemLabel,\n  placeholder,\n  label,\n  searchLabel = \"Search\",\n  selectAllLabel = \"Select all\",\n  clearLabel = \"Clear\",\n  className,\n  panelClassName,\n  invalid,\n}: Props) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(q) ||\n        (o.hint ?? \"\").toLowerCase().includes(q),\n    );\n  }, [options, query]);\n\n  const valueSet = useMemo(() => new Set(values), [values]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const anyChecked = values.length > 0;\n  const selectedSummary = (() => {\n    if (!anyChecked) return allLabel ?? placeholder ?? \"All\";\n    if (allChecked) return allLabel ?? placeholder ?? \"All\";\n    return itemLabel ? itemLabel(values.length) : `${values.length}`;\n  })();\n\n  const toggle = (val: string | number) => {\n    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));\n    else onChange([...values, val]);\n  };\n\n  const selectAll = () => onChange(options.map((o) => o.value));\n  const clearAll = () => onChange([]);\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pr-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}\n      >\n        {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n            than restating a lighter one (Keksdose dev#477). */}\n        <span className=\"truncate\">{selectedSummary}</span>\n        <FieldChevron />\n      </button>\n      {open && (\n        <DropdownPanel\n          // 16rem by default; `panelClassName` is how a caller widens it (Keksdose\n          // feedback #147: the market picker's rows carry a postcode, a town, a\n          // distance and a receipt count, all of which were being truncated). The\n          // override used to be applied from the OUTSIDE with a\n          // `[&>div]:w-full` descendant selector, which worked and was a hack —\n          // \"change the package\" was the right call.\n          className={cn(\"w-64\", panelClassName)}\n          empty={filtered.length === 0}\n          header={\n            <>\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={searchLabel}\n              />\n              <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n                <button\n                  type=\"button\"\n                  onClick={selectAll}\n                  disabled={allChecked}\n                  className=\"rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800\"\n                >\n                  {selectAllLabel}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={clearAll}\n                  disabled={!anyChecked}\n                  className=\"rounded px-2 py-0.5 text-slate-600 hover:bg-slate-100 disabled:opacity-40 dark:text-slate-300 dark:hover:bg-slate-800\"\n                >\n                  {clearLabel}\n                </button>\n              </div>\n            </>\n          }\n        >\n          {filtered.map((o) => {\n              const checked = valueSet.has(o.value);\n              return (\n                <li key={o.value}>\n                  <button\n                    type=\"button\"\n                    onClick={() => toggle(o.value)}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800\",\n                      checked && \"bg-slate-100/60 dark:bg-slate-800/60\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <span\n                        className={cn(\n                          \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                          checked\n                            ? \"border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900\"\n                            : \"border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900\",\n                        )}\n                      >\n                        {checked && <Check className=\"size-3\" />}\n                      </span>\n                      <span className=\"truncate text-slate-900 dark:text-slate-100\">{o.label}</span>\n                      {o.hint && (\n                        <span className=\"truncate text-xs text-slate-400 dark:text-slate-500\">\n                          {o.hint}\n                        </span>\n                      )}\n                    </span>\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport { useActiveOptionScroll } from \"./combobox-core\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_MULTI_SELECT_LABELS,\n  useKitLabels,\n} from \"../i18n/kit-labels\";\n\nexport interface MultiSelectOption {\n  value: string | number;\n  label: string;\n  hint?: string;\n}\n\n/** `onChange` is the kit's — \"the selection changed\", carrying the new values —\n *  rather than the div's form event. */\nexport interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  options: MultiSelectOption[];\n  values: (string | number)[];\n  onChange: (next: (string | number)[]) => void;\n  /** Displayed when no value is selected (i.e. \"all\"). Defaults to `placeholder`,\n   * then to `multiSelect.all` from the {@link UiKitProvider}, then \"All\". */\n  allLabel?: string;\n  /** Singular/plural countable label, used when 1+ items are selected. Default:\n   *  `multiSelect.selectedCount` from the provider — the bare count in English. */\n  itemLabel?: (count: number) => string;\n  placeholder?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  /** Search-box placeholder. Default: `multiSelect.search` from the provider, else \"Search\". */\n  searchLabel?: string;\n  /** \"Select all\" action label. Default: `multiSelect.selectAll`, else \"Select all\". */\n  selectAllLabel?: string;\n  /** \"Clear\" action label. Default: `multiSelect.clear`, else \"Clear\". */\n  clearLabel?: string;\n  /** Extra classes for the open dropdown PANEL — the way to widen it past its\n   *  16rem default when the rows carry more than a label (Keksdose feedback #147). */\n  panelClassName?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n}\n\nexport function MultiSelect({\n  options,\n  values,\n  onChange,\n  allLabel,\n  itemLabel,\n  placeholder,\n  label,\n  searchLabel,\n  selectAllLabel,\n  clearLabel,\n  className,\n  panelClassName,\n  invalid,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: MultiSelectProps) {\n  const { open, setOpen, wrapperRef, triggerRef, closeToTrigger, query, setQuery, inputRef } =\n    useDropdownSearch();\n  // `allLabel` is deliberately NOT folded in here: between it and the provider's\n  // `all` sits `placeholder`, which has always doubled as the \"nothing picked\" text,\n  // and a caller who set it must keep seeing it.\n  const labels = useKitLabels(\"multiSelect\", DEFAULT_MULTI_SELECT_LABELS, {\n    search: searchLabel,\n    selectAll: selectAllLabel,\n    clear: clearLabel,\n    selectedCount: itemLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  // One id per instance: `aria-controls` on the trigger names the list while the\n  // list is still closed.\n  const uid = useId();\n  const listboxId = `${uid}-listbox`;\n  const optionId = (index: number) => `${uid}-option-${index}`;\n  // Which row the arrow keys are on. Reset from the handlers that change what the\n  // list contains rather than from an effect — a render pass is not where this\n  // decision belongs, and the two callers that move the list are right here.\n  const [active, setActive] = useState(0);\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(q) ||\n        (o.hint ?? \"\").toLowerCase().includes(q),\n    );\n  }, [options, query]);\n\n  const valueSet = useMemo(() => new Set(values), [values]);\n  const allChecked = options.length > 0 && options.every((o) => valueSet.has(o.value));\n  const anyChecked = values.length > 0;\n  const selectedSummary = (() => {\n    if (!anyChecked || allChecked) return allLabel ?? placeholder ?? labels.all;\n    return labels.selectedCount(values.length);\n  })();\n\n  const toggle = (val: string | number) => {\n    if (valueSet.has(val)) onChange(values.filter((v) => v !== val));\n    else onChange([...values, val]);\n  };\n\n  const selectAll = () => onChange(options.map((o) => o.value));\n  const clearAll = () => onChange([]);\n\n  const activeId = active >= 0 && active < filtered.length ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  // The WAI-ARIA APG's listbox keyboard, handled on the search box because that is\n  // where focus is while the panel is up. Escape is `useDropdown`'s, on the document.\n  const onListKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, filtered.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(0);\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(filtered.length - 1);\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      // Toggling keeps the panel open, exactly as clicking a row does: this control\n      // exists to answer \"which of these\", which is rarely one of them.\n      if (filtered[active]) toggle(filtered[active].value);\n    } else if (e.key === \"Tab\") {\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  return (\n    // `rest` dresses the wrapper; the name belongs to the trigger below it, which is\n    // the thing with a role. Spread FIRST so the ARIA the trigger composes, and the\n    // handlers that open the list, cannot be replaced by accident from outside.\n    <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        // A combobox, not a bare button: this trigger carried `aria-invalid`, which\n        // `button` does not support, so a required-and-empty filter painted its rose\n        // border and announced nothing (ESLint's `role-supports-aria-props`, the\n        // audit's §a11y). The role that describes it is the one that also supports\n        // the attribute.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-haspopup=\"listbox\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger announces only its summary — \"3 selected\", with nothing saying\n        // three of WHAT. The label AND the summary, because `aria-label` replaces\n        // the content rather than adding to it; the same composition its two\n        // siblings use, so a form row of pickers reads the same way throughout.\n        // A caller's own name wins: two filters labelled \"Accounts\" on one screen have\n        // to be told apart, and only the caller knows by what.\n        aria-label={\n          ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, selectedSummary) : undefined)\n        }\n        onClick={() => {\n          setOpen((v) => !v);\n          setActive(0);\n        }}\n        // Down/Up opens the list from the closed trigger, per the APG; Enter and\n        // Space already do through the button's own click.\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n            setActive(0);\n          }\n        }}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pr-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}\n      >\n        {/* The summary IS the field's value, so it inherits FIELD_BASE's ink rather\n            than restating a lighter one (Keksdose dev#477). */}\n        <span className=\"truncate\">{selectedSummary}</span>\n        <FieldChevron />\n      </button>\n      {open && (\n        <DropdownPanel\n          // 16rem by default; `panelClassName` is how a caller widens it (Keksdose\n          // feedback #147: the market picker's rows carry a postcode, a town, a\n          // distance and a receipt count, all of which were being truncated). The\n          // override used to be applied from the OUTSIDE with a\n          // `[&>div]:w-full` descendant selector, which worked and was a hack —\n          // \"change the package\" was the right call.\n          className={cn(\"w-64\", panelClassName)}\n          empty={filtered.length === 0}\n          // The rows below are options, so the list around them has to be a listbox\n          // — and one that says several answers are allowed, which is the only thing\n          // that made the trigger's \"3 selected\" make sense to a reader.\n          listProps={{ id: listboxId, role: \"listbox\", \"aria-multiselectable\": true }}\n          header={\n            <>\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={(v) => {\n                  setQuery(v);\n                  // The list under the highlight just changed; keeping the old index\n                  // would point `aria-activedescendant` at a different option than\n                  // the one the user was on.\n                  setActive(0);\n                }}\n                inputRef={inputRef}\n                placeholder={labels.search}\n                listboxId={listboxId}\n                activeId={activeId}\n                onKeyDown={onListKeyDown}\n              />\n              <div className=\"flex items-center justify-between gap-2 px-2 py-1.5 text-xs\">\n                <button\n                  type=\"button\"\n                  onClick={selectAll}\n                  disabled={allChecked}\n                  className=\"rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n                >\n                  {labels.selectAll}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={clearAll}\n                  disabled={!anyChecked}\n                  className=\"rounded px-2 py-0.5 text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            </>\n          }\n        >\n          {filtered.map((o, i) => {\n              const checked = valueSet.has(o.value);\n              return (\n                <li key={o.value} role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    id={optionId(i)}\n                    // The checked state used to exist ONLY as the decorative span\n                    // below (the audit's §a11y): the row said its label and nothing\n                    // else, so \"selected\" was imperceptible without sight. This is\n                    // the same state, in the one place a reader looks for it.\n                    role=\"option\"\n                    aria-selected={checked}\n                    // Focus stays in the search box — that is what\n                    // `aria-activedescendant` is for — so the rows are not tab stops.\n                    tabIndex={-1}\n                    onClick={() => toggle(o.value)}\n                    onMouseEnter={() => setActive(i)}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm text-left hover:bg-[var(--bg-hover)]\",\n                      checked && \"bg-[var(--bg-active)]\",\n                      i === active && \"bg-[var(--bg-hover)]\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <span\n                        // A picture of `aria-selected` above; a reader that met both\n                        // would be told twice.\n                        aria-hidden\n                        className={cn(\n                          \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                          checked\n                            ? \"border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                            : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n                        )}\n                      >\n                        {checked && <Check className=\"size-3\" />}\n                      </span>\n                      <span className=\"truncate text-[var(--text-primary)]\">{o.label}</span>\n                      {o.hint && (\n                        <span className=\"truncate text-xs text-[var(--text-placeholder)]\">\n                          {o.hint}\n                        </span>\n                      )}\n                    </span>\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,92 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { NumberInput } from './number-input.js';
+import './calculator.js';
+import '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './numpad-sheet.js';
+
+type NumberInputProps = ComponentProps<typeof NumberInput>;
+interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" | "onCommit" | "suffix" | "invalid"> {
+    /** The committed number. `null` is "no value" — shown as an empty field. */
+    value: number | null;
+    /**
+     * The parsed number, on blur or Enter — never per keystroke — and only when it
+     * differs from the last one committed. Already rounded to `digits` and clamped
+     * into `[min, max]`. `null` only when `nullable` and the field was emptied.
+     */
+    onCommit: (value: number | null) => void;
+    /** Round to this many decimals on commit, and show at most this many (trailing
+     *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */
+    digits?: number;
+    /** Clamp the committed number into `[min, max]`. Applied after rounding. */
+    min?: number;
+    max?: number;
+    /** An emptied field commits `null`. Without it an empty field is not an answer
+     *  and snaps back to the last value, like any other unparsable text. */
+    nullable?: boolean;
+    /** The unit — "mm", "%", "km/h". */
+    unit?: ReactNode;
+    /** Where `unit` goes: `"suffix"` (default) is NumberInput's read-out at the
+     *  field's end edge; `"label"` appends it to the label as "Label (unit)", for rows
+     *  of narrow fields where a suffix would eat the digits. */
+    unitPlacement?: "suffix" | "label";
+    /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the
+     *  runtime's. */
+    locale?: string;
+    /** See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    /** See {@link Input}'s `error`: shown under the field, attached via
+     *  `aria-describedby`, implies `invalid`. */
+    error?: ReactNode;
+    /** Merged with the error's id. Accepted so a form library's control slot (which
+     *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}
+/**
+ * A number field whose value IS a number: {@link NumberInput}'s text, calculator and
+ * numpad, with the parse/commit/revert loop every consumer was writing on top of it.
+ *
+ * WHY THE DRAFT. Half-typed values — "-", "1,", "12+" — are not numbers, and
+ * reformatting them mid-keystroke moves the caret and fights the typist; committing
+ * per keystroke would also fire whatever a commit fires (a recalculation, a save) for
+ * every meaningless intermediate. So the field keeps a draft STRING while it is being
+ * typed and resolves it on blur/Enter:
+ *
+ *  - a number (or a calculation, "2700+50") → rounded to `digits`, clamped into
+ *    `[min, max]`, committed, and the draft re-rendered from the result;
+ *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number("")`
+ *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;
+ *  - anything else unparsable → the draft SNAPS BACK to the last committed value
+ *    rather than sending NaN on for a server to reject.
+ *
+ * The draft follows `value` when it changes from outside (a reset, a loaded record);
+ * a change that came from here arrives back identical and is a no-op.
+ *
+ * LOCALE. The decimal mark is the locale's: a German user sees and types "1,5".
+ * NumberInput normalises every keystroke to a dot (so its evaluator reads one
+ * alphabet); this field maps the dot back before the draft is shown, which also
+ * means the numpad's "." key types the mark the field is displaying. There is no
+ * digit grouping — "1.000" would read as a thousand in German and as one in English,
+ * and a field that parses its own display back must not have that ambiguity.
+ */
+declare function NumberField({ value, onCommit, digits, min, max, nullable, unit, unitPlacement, locale: localeProp, label, invalid, error, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rest }: NumberFieldProps): react.JSX.Element;
+
+export { NumberField, type NumberFieldProps };

package/dist/components/number-field.js

@@ -0,0 +1,111 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { NumberInput } from "./number-input.js";
+import { formatResult } from "../lib/calc.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
+function decimalMark(locale) {
+  try {
+    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
+    return part?.value === "," ? "," : ".";
+  } catch {
+    return ".";
+  }
+}
+function roundTo(n, digits) {
+  if (digits === void 0) return n;
+  const d = Math.min(Math.max(Math.trunc(digits), 0), 100);
+  const rounded = Number(n.toFixed(d));
+  return Number.isFinite(rounded) ? rounded : n;
+}
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+function NumberField({
+  value,
+  onCommit,
+  digits,
+  min,
+  max,
+  nullable = false,
+  unit,
+  unitPlacement = "suffix",
+  locale: localeProp,
+  label,
+  invalid,
+  error,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const locale = useKitLocale(localeProp);
+  const mark = decimalMark(locale);
+  const localize = (text) => mark === "," ? text.replace(/\./g, ",") : text;
+  const format = (n) => n === null || !Number.isFinite(n) ? "" : localize(formatResult(roundTo(n, digits)));
+  const [draft, setDraft] = useState(() => format(value));
+  const shownFor = `${value}|${mark}|${digits}`;
+  const [seen, setSeen] = useState(shownFor);
+  const [committed, setCommitted] = useState(value);
+  if (shownFor !== seen) {
+    setSeen(shownFor);
+    setDraft(format(value));
+    setCommitted(value);
+  }
+  const commit = (text) => {
+    const trimmed = text.trim();
+    let next;
+    if (trimmed === "") {
+      if (!nullable) return setDraft(format(committed));
+      next = null;
+    } else {
+      const parsed = Number(trimmed.replace(/,/g, "."));
+      if (!Number.isFinite(parsed)) return setDraft(format(committed));
+      next = roundTo(parsed, digits);
+      if (min !== void 0) next = Math.max(min, next);
+      if (max !== void 0) next = Math.min(max, next);
+    }
+    setDraft(format(next));
+    if (next !== committed) {
+      setCommitted(next);
+      onCommit(next);
+    }
+  };
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const errorId = useId();
+  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+  const describedBy = [ariaDescribedBy, hasError ? errorId : void 0].filter(Boolean).join(" ");
+  useEffect(() => {
+    const input = document.getElementById(fieldId);
+    if (!input) return;
+    if (describedBy) input.setAttribute("aria-describedby", describedBy);
+    else input.removeAttribute("aria-describedby");
+  }, [fieldId, describedBy]);
+  const labelWithUnit = unit !== void 0 && unitPlacement === "label" ? label === void 0 || label === "" ? unit : typeof label === "string" && typeof unit === "string" ? `${label} (${unit})` : /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    " (",
+    unit,
+    ")"
+  ] }) : label;
+  const field = /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      ...rest,
+      id: fieldId,
+      label: labelWithUnit,
+      value: draft,
+      onChange: (text) => setDraft(localize(text)),
+      onCommit: commit,
+      suffix: unitPlacement === "suffix" ? unit : void 0,
+      invalid: invalid || hasError || ariaInvalid === true || ariaInvalid === "true"
+    }
+  );
+  if (!hasError) return field;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    field,
+    /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+  ] });
+}
+export {
+  NumberField
+};
+//# sourceMappingURL=number-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { formatResult } from \"../lib/calc\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ntype NumberInputProps = ComponentProps<typeof NumberInput>;\n\nexport interface NumberFieldProps\n  extends Omit<NumberInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"suffix\" | \"invalid\"> {\n  /** The committed number. `null` is \"no value\" — shown as an empty field. */\n  value: number | null;\n  /**\n   * The parsed number, on blur or Enter — never per keystroke — and only when it\n   * differs from the last one committed. Already rounded to `digits` and clamped\n   * into `[min, max]`. `null` only when `nullable` and the field was emptied.\n   */\n  onCommit: (value: number | null) => void;\n  /** Round to this many decimals on commit, and show at most this many (trailing\n   *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */\n  digits?: number;\n  /** Clamp the committed number into `[min, max]`. Applied after rounding. */\n  min?: number;\n  max?: number;\n  /** An emptied field commits `null`. Without it an empty field is not an answer\n   *  and snaps back to the last value, like any other unparsable text. */\n  nullable?: boolean;\n  /** The unit — \"mm\", \"%\", \"km/h\". */\n  unit?: ReactNode;\n  /** Where `unit` goes: `\"suffix\"` (default) is NumberInput's read-out at the\n   *  field's end edge; `\"label\"` appends it to the label as \"Label (unit)\", for rows\n   *  of narrow fields where a suffix would eat the digits. */\n  unitPlacement?: \"suffix\" | \"label\";\n  /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the\n   *  runtime's. */\n  locale?: string;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`: shown under the field, attached via\n   *  `aria-describedby`, implies `invalid`. */\n  error?: ReactNode;\n  /** Merged with the error's id. Accepted so a form library's control slot (which\n   *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\n/** The locale's decimal mark, as far as this field can type it: \",\" or \".\". A mark\n *  outside those two (Arabic's \"٫\") is not something {@link sanitizeLive} lets\n *  through, so those locales keep the dot rather than get a field that eats keys. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n  try {\n    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n    return part?.value === \",\" ? \",\" : \".\";\n  } catch {\n    // An invalid tag throws a RangeError; a typo in a locale prop must not take the\n    // form down with it.\n    return \".\";\n  }\n}\n\n/** `toFixed` rounding rather than `Math.round(n * 10^d)`, which turns 1.005 into\n *  1.00 by way of 100.49999999999999 — the same choice the lenkbank field made. */\nfunction roundTo(n: number, digits: number | undefined): number {\n  if (digits === undefined) return n;\n  const d = Math.min(Math.max(Math.trunc(digits), 0), 100);\n  const rounded = Number(n.toFixed(d));\n  return Number.isFinite(rounded) ? rounded : n;\n}\n\n// The error line under a field — the same type as `ui.tsx`'s (module-private) one,\n// so a NumberField's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n/**\n * A number field whose value IS a number: {@link NumberInput}'s text, calculator and\n * numpad, with the parse/commit/revert loop every consumer was writing on top of it.\n *\n * WHY THE DRAFT. Half-typed values — \"-\", \"1,\", \"12+\" — are not numbers, and\n * reformatting them mid-keystroke moves the caret and fights the typist; committing\n * per keystroke would also fire whatever a commit fires (a recalculation, a save) for\n * every meaningless intermediate. So the field keeps a draft STRING while it is being\n * typed and resolves it on blur/Enter:\n *\n *  - a number (or a calculation, \"2700+50\") → rounded to `digits`, clamped into\n *    `[min, max]`, committed, and the draft re-rendered from the result;\n *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number(\"\")`\n *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;\n *  - anything else unparsable → the draft SNAPS BACK to the last committed value\n *    rather than sending NaN on for a server to reject.\n *\n * The draft follows `value` when it changes from outside (a reset, a loaded record);\n * a change that came from here arrives back identical and is a no-op.\n *\n * LOCALE. The decimal mark is the locale's: a German user sees and types \"1,5\".\n * NumberInput normalises every keystroke to a dot (so its evaluator reads one\n * alphabet); this field maps the dot back before the draft is shown, which also\n * means the numpad's \".\" key types the mark the field is displaying. There is no\n * digit grouping — \"1.000\" would read as a thousand in German and as one in English,\n * and a field that parses its own display back must not have that ambiguity.\n */\nexport function NumberField({\n  value,\n  onCommit,\n  digits,\n  min,\n  max,\n  nullable = false,\n  unit,\n  unitPlacement = \"suffix\",\n  locale: localeProp,\n  label,\n  invalid,\n  error,\n  id,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...rest\n}: NumberFieldProps) {\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const localize = (text: string) => (mark === \",\" ? text.replace(/\\./g, \",\") : text);\n  // `formatResult` for fixed notation: `String(1e-7)` is \"1e-7\", which the field\n  // would read back as 17 (see calc.ts).\n  const format = (n: number | null) =>\n    n === null || !Number.isFinite(n) ? \"\" : localize(formatResult(roundTo(n, digits)));\n\n  const [draft, setDraft] = useState(() => format(value));\n  // Everything the displayed text depends on, not just `value`: switching the\n  // provider's language or a field's `digits` has to re-render the draft too.\n  const shownFor = `${value}|${mark}|${digits}`;\n  const [seen, setSeen] = useState(shownFor);\n  // The last number handed to `onCommit`, so Enter-then-blur (both commit) and a\n  // parent that does not echo the value back cannot commit the same number twice.\n  // State rather than a ref because the external-change branch below resets it\n  // during render, and a ref may not be written there.\n  const [committed, setCommitted] = useState(value);\n\n  // Adjust state during render rather than in an effect: React re-renders at once\n  // with the new draft, before anything is painted, so there is no frame showing\n  // the old text.\n  if (shownFor !== seen) {\n    setSeen(shownFor);\n    setDraft(format(value));\n    setCommitted(value);\n  }\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    let next: number | null;\n    if (trimmed === \"\") {\n      if (!nullable) return setDraft(format(committed));\n      next = null;\n    } else {\n      // `text` is NumberInput's committed form: an evaluated calculation, dot-decimal.\n      // What survives its digits-only fallback can still be \"-\" or \".\" alone.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return setDraft(format(committed));\n      next = roundTo(parsed, digits);\n      if (min !== undefined) next = Math.max(min, next);\n      if (max !== undefined) next = Math.min(max, next);\n    }\n    // Always re-render the draft from the result — \"007\" becomes \"7\", a clamped 500\n    // shows the 100 it was clamped to — even when there is nothing new to commit.\n    setDraft(format(next));\n    if (next !== committed) {\n      setCommitted(next);\n      onCommit(next);\n    }\n  };\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const errorId = useId();\n  // `null`/`false`/`\"\"` are what `touched && errors.x` evaluates to on the happy path.\n  const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n  const describedBy = [ariaDescribedBy, hasError ? errorId : undefined].filter(Boolean).join(\" \");\n\n  // NumberInput takes no `aria-describedby` of its own, so the reference is set on\n  // its <input> directly, found by the id this field hands it. React never renders\n  // that attribute there, so nothing reconciles it away again.\n  useEffect(() => {\n    const input = document.getElementById(fieldId);\n    if (!input) return;\n    if (describedBy) input.setAttribute(\"aria-describedby\", describedBy);\n    else input.removeAttribute(\"aria-describedby\");\n  }, [fieldId, describedBy]);\n\n  const labelWithUnit =\n    unit !== undefined && unitPlacement === \"label\"\n      ? label === undefined || label === \"\"\n        ? unit\n        : typeof label === \"string\" && typeof unit === \"string\"\n          ? `${label} (${unit})`\n          : (\n            <>\n              {label} ({unit})\n            </>\n          )\n      : label;\n\n  const field = (\n    <NumberInput\n      {...rest}\n      id={fieldId}\n      label={labelWithUnit}\n      value={draft}\n      onChange={(text) => setDraft(localize(text))}\n      onCommit={commit}\n      suffix={unitPlacement === \"suffix\" ? unit : undefined}\n      invalid={invalid || hasError || ariaInvalid === true || ariaInvalid === \"true\"}\n    />\n  );\n  // Same shape as Input's FieldGroup: no wrapper at all without a message, so adding\n  // `error` support changed nothing about the DOM a flex row lays out.\n  if (!hasError) return field;\n  return (\n    <div>\n      {field}\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,6 +2,24 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
+import '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
 
 interface NumberInputProps {
     value: string;
@@ -14,8 +32,9 @@ interface NumberInputProps {
     label?: ReactNode;
     ariaLabel?: string;
     /** Names for the calculator this field renders — its trigger, and the controls
-     *  inside the popover — and for the numpad sheet it opens on a phone. English
-     *  defaults, so a host that does not translate is unaffected.
+     *  inside the popover — and for the numpad sheet it opens on a phone. Overrides
+     *  for THIS field only: both resolve the `calculator` namespace of
+     *  `<UiKitProvider labels>` themselves, then fall back to English.
      *
      *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}
      *  exactly as {@link AmountInput} does, but had no way to pass it anything, so

package/dist/components/number-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { CalculatorButton } from "./calculator.js";
@@ -98,7 +99,7 @@ function NumberInput({
             "span",
             {
               "aria-hidden": true,
-              className: "pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400",
+              className: "pointer-events-none pr-3 text-xs font-medium text-[var(--text-muted)]",
               children: suffix
             }
           )

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, 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 { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * 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. English\n   *  defaults, so a host that does not translate is unaffected.\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). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\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\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 budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\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,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\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  // 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  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={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        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={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-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 ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\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 className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\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              className=\"pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          value={value}\n          onChange={onChange}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n        />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":"AAsIM,cA4CE,YA5CF;AAtIN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AA4EvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,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;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;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,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,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;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, 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 { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * 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). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\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\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 budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\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,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\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  // 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  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={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        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={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-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 ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\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 className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\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              className=\"pointer-events-none pr-3 text-xs font-medium text-[var(--text-muted)]\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          value={value}\n          onChange={onChange}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n        />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":";AAuIM,cA4CE,YA5CF;AAvIN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AA6EvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,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;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;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,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,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;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -1,5 +1,23 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { CalculatorLabels } from '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to
@@ -24,7 +42,8 @@ import { ReactNode } from 'react';
  *  the brand-filled primary button — and it was a hardcoded English literal while
  *  its three neighbours each took an override, so a German phone showed "Done"
  *  among German labels with no prop able to change it. */
-interface NumberPadSheetLabels {
+interface NumberPadSheetLabels extends Partial<CalculatorLabels> {
+    /** The pad's own name — the `calculator.panel` key under its older name here. */
     pad?: string;
     backspace?: string;
     clear?: string;
@@ -43,9 +62,11 @@ declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
     /** Optional field label, echoed in the sheet header so the user still knows
      * which field they're editing when the sheet covers it. */
     label?: ReactNode;
-    /** Names for the pad itself and its four non-digit keys — screen-reader names,
-     * except `done`, which is the visible text on the primary key. The digits and
-     * operators need none: their visible glyph IS the name. */
+    /** Names for the pad itself and its non-digit keys — screen-reader names, except
+     * `done`, which is the visible text on the primary key. Merged over `calculator`
+     * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,
+     * on a phone, and one translation covers both. Digits need no name — their glyph
+     * IS the name; the operators do (see {@link CalculatorLabels.plus}). */
     labels?: NumberPadSheetLabels;
 }): react.ReactPortal;
 

package/dist/components/numpad-sheet.js

@@ -1,27 +1,34 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Delete } from "lucide-react";
+import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
+import { useEscapeKey } from "../hooks/use-dismiss.js";
 import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc.js";
+import {
+  DEFAULT_CALCULATOR_LABELS,
+  useKitLabels
+} from "../i18n/kit-labels.js";
 const PAD_KEYS = [
   { kind: "ins", label: "7", ins: "7" },
   { kind: "ins", label: "8", ins: "8" },
   { kind: "ins", label: "9", ins: "9" },
-  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true },
+  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true, name: "divide" },
   { kind: "ins", label: "4", ins: "4" },
   { kind: "ins", label: "5", ins: "5" },
   { kind: "ins", label: "6", ins: "6" },
-  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true },
+  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true, name: "times" },
   { kind: "ins", label: "1", ins: "1" },
   { kind: "ins", label: "2", ins: "2" },
   { kind: "ins", label: "3", ins: "3" },
-  { kind: "ins", label: "\u2212", ins: "-", accent: true },
-  { kind: "ins", label: ".", ins: "." },
+  { kind: "ins", label: "\u2212", ins: "-", accent: true, name: "minus" },
+  { kind: "ins", label: ".", ins: ".", name: "decimal" },
   { kind: "ins", label: "0", ins: "0" },
   { kind: "back" },
-  { kind: "ins", label: "+", ins: "+", accent: true }
+  { 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 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-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] 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({
@@ -31,6 +38,13 @@ function NumberPadSheet({
   label,
   labels
 }) {
+  const fromProps = useMemo(() => {
+    if (!labels) return void 0;
+    const { pad, ...rest } = labels;
+    return pad === void 0 ? rest : { ...rest, panel: pad };
+  }, [labels]);
+  const text = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
+  useEscapeKey(onDone);
   const result = evaluateExpression(value);
   const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : "";
   const insert = (ch) => onChange(sanitizeLive(value + ch));
@@ -43,7 +57,7 @@ function NumberPadSheet({
     "div",
     {
       role: "group",
-      "aria-label": labels?.pad ?? "Number pad",
+      "aria-label": text.panel,
       onPointerDown: (e) => e.preventDefault(),
       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)]",
       style: { paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" },
@@ -60,7 +74,7 @@ function NumberPadSheet({
             "button",
             {
               type: "button",
-              "aria-label": labels?.backspace ?? "Backspace",
+              "aria-label": text.backspace,
               onClick: backspace,
               className: cn(PAD_BTN, PAD_ACCENT),
               children: /* @__PURE__ */ jsx(Delete, { className: "size-5" })
@@ -70,7 +84,7 @@ function NumberPadSheet({
             "button",
             {
               type: "button",
-              "aria-label": key.label,
+              "aria-label": key.name ? text[key.name] : key.label,
               onClick: () => insert(key.ins),
               className: cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT),
               children: key.label
@@ -79,15 +93,18 @@ function NumberPadSheet({
           )
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-1.5 grid grid-cols-4 gap-1.5", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.clear ?? "Clear", onClick: clearAll, className: cn(PAD_BTN, PAD_ACCENT), children: "C" }),
-          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.equals ?? "Equals", onClick: equals, className: cn(PAD_BTN, PAD_ACCENT), children: "=" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": text.clear, onClick: clearAll, className: cn(PAD_BTN, PAD_ACCENT), children: "C" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": text.equals, onClick: equals, className: cn(PAD_BTN, PAD_ACCENT), children: "=" }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onDone,
-              className: cn(PAD_BTN, "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"),
-              children: labels?.done ?? "Done"
+              className: cn(
+                PAD_BTN,
+                "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] focus-visible:ring-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"
+              ),
+              children: text.done
             }
           )
         ] })