@eifi1/ui-kit 0.21.0 → 0.22.0

package/dist/components/amount-input.js

@@ -25,6 +25,8 @@ import {
   sanitizeLive,
   splitLeadingSign
 } from "../lib/calc.js";
+import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks.js";
+import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
 function settleAmount(text, digits, min, max) {
   const t = text.trim();
   if (!/^-?\d*\.?\d*$/.test(t) || !/\d/.test(t)) return text;
@@ -39,24 +41,7 @@ function settleAmount(text, digits, min, max) {
   const out = formatResult(n);
   return Number(out) === Number(t) ? text : out;
 }
-function decimalMark(locale) {
-  try {
-    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
-    return part?.value === "," ? "," : ".";
-  } catch {
-    return ".";
-  }
-}
-function normalizeTypedMarks(raw, mark) {
-  const other = mark === "," ? "." : ",";
-  return raw.replace(/[0-9.,]+/g, (operand) => {
-    const hasMark = operand.includes(mark);
-    const count = operand.split(other).length - 1;
-    if (count === 0) return operand;
-    const grouping = hasMark ? true : count > 1 || mark === "," && /^\d{1,3}(\.\d{3})+$/.test(operand);
-    return grouping ? operand.split(other).join("") : operand;
-  });
-}
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 const TONE_CLASS = {
   neutral: "",
   outflow: "text-money-neg",
@@ -71,16 +56,18 @@ function isResultOf(previous, text, settle) {
   return n !== null && settle(formatResult(n)) === text.trim();
 }
 const AmountInput = forwardRef(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, hint, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
     const hintId = useId();
+    const errorId = useId();
     const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
-    const describedBy = textHint ? ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId : ariaDescribedBy;
-    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
+    const hasError = hasMessage(error);
+    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
+    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     const isMobile = useMediaQuery(PHONE_QUERY, false);
-    const showCalc = !disabled && !isMobile;
+    const showCalc = calculator && !disabled && !isMobile;
     const [focused, setFocused] = useState(false);
     const showNumpad = isMobile && !disabled && focused;
     const asDisplay = variant === "display" && isMobile;
@@ -100,11 +87,10 @@ const AmountInput = forwardRef(
     const [draft, setDraft] = useState(null);
     const displayDigits = digitsProp ?? currencyMinorDigits(currency);
     const resting = focused ? shown : settleAmount(shown, displayDigits);
-    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
-    const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
-    const display = draft === null ? derived : draftAs === shown ? draft : (
+    const derived = localizeMark(resting, mark);
+    const display = draft === null ? derived : showsTyped(draft, mark, shown) ? draft : (
       // The caller owns the sign: the typed "12" is shown as the "-12" it is.
-      signOwned && negative && `-${draftAs}` === shown ? `-${draft}` : derived
+      signOwned && negative && shown.startsWith("-") && showsTyped(draft, mark, shown.slice(1)) ? `-${draft}` : derived
     );
     const digits = digitsProp ?? currencyMinorDigits(currency);
     const settle = (text) => settleAmount(text, digits, min, max);
@@ -130,7 +116,7 @@ const AmountInput = forwardRef(
     };
     const typed = (raw) => {
       setDraft(raw);
-      handleText(normalizeTypedMarks(raw, mark));
+      handleText(readTyped(raw, mark));
     };
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     const chipRef = useRef(null);
@@ -226,7 +212,7 @@ const AmountInput = forwardRef(
                   showCalc && /* @__PURE__ */ jsx(
                     CalculatorButton,
                     {
-                      value: display,
+                      value: derived,
                       onChange: (result, expression) => {
                         setDraft(null);
                         const settled = settle(result);
@@ -318,6 +304,7 @@ const AmountInput = forwardRef(
         }
       ),
       textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+      hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }),
       showNumpad && /* @__PURE__ */ jsx(
         NumberPadSheet,
         {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount 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  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows. */\n  hint?: ReactNode;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   *\n   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n  /**\n   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n}\n\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding works in decimal exponent notation, because\n * `Math.round(1.005 * 100)` is 100 (1.005 is 1.00499… in binary).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) {\n    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);\n    n = n < 0 ? -magnitude : magnitude;\n  }\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n/**\n * The locale's decimal mark, as far as this field can type it: \",\" or \".\" (kastlan 40).\n * The same answer `NumberField` gives, for the same reason: a mark outside those two\n * (Arabic's \"٫\") is not one {@link sanitizeLive} lets through, so those locales keep\n * the dot rather than get a field that eats the key it shows.\n */\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 must not take the form down.\n    return \".\";\n  }\n}\n\n/**\n * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every\n * \",\" into \".\", so on its own it read the German \"1.234,56\" as 1.23456 — and the\n * settle then made that 1.23, final. This decides per operand, from the typist's own\n * text, before that fold:\n *\n * - both marks present: the one that is not the locale's is grouping, and goes;\n * - in a \",\" locale, only \".\" present: grouping when it cannot be a decimal as a\n *   German reader writes it — twice (\"1.234.567\"), or in thousands shape (\"1.234\",\n *   \"12.500\") — otherwise a decimal (\"1.5\", typed by a dot-decimal habit);\n * - in a \".\" locale, only \",\" present: grouping when it appears twice (\"1,234,567\");\n *   once it stays a decimal, because Swiss and German typists write \"1,5\" in a\n *   de-CH form (kastlan 40) and a unit price \"1,789\" is a decimal.\n *\n * Only a keystroke's text comes through here. A calculator result is dot-decimal\n * already, and \"1.234\" from `100/81.03…` is never a thousand.\n */\nfunction normalizeTypedMarks(raw: string, mark: \",\" | \".\"): string {\n  const other = mark === \",\" ? \".\" : \",\";\n  return raw.replace(/[0-9.,]+/g, (operand) => {\n    const hasMark = operand.includes(mark);\n    const count = operand.split(other).length - 1;\n    if (count === 0) return operand;\n    const grouping = hasMark\n      ? true\n      : count > 1 || (mark === \",\" && /^\\d{1,3}(\\.\\d{3})+$/.test(operand));\n    return grouping ? operand.split(other).join(\"\") : operand;\n  });\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, \"aria-describedby\": ariaDescribedBy, \"aria-invalid\": ariaInvalid, \"aria-required\": ariaRequired, hint, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const hintId = 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 describedBy = textHint ? (ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId) : ariaDescribedBy;\n    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === \"true\";\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // end padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n    // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n    // just to show its minus. Without the handler there is nothing to toggle — a typed\n    // minus simply stays in the text, as in any field without a direction control.\n    const shown = negative && isBareAmount(value) ? `-${value}` : value;\n    // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n    // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n    // stay dot-decimal, because that string is the contract: RhfMoneyField's\n    // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n    // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n    // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n    //\n    // One character for one character, and no digit grouping: the caret stays where\n    // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n    // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n    // follows `Intl` rather than a guess about a country.\n    const locale = useKitLocale();\n    const mark = decimalMark(locale);\n    // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n    // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n    // their fingers, after which no rule could tell the two apart (keksdose G1). The\n    // draft is shown only while it still spells what the field holds; a value set from\n    // outside, a calculator result or a commit falls back to the derived spelling.\n    const [draft, setDraft] = useState<string | null>(null);\n    // A value the HOST set (not one typed here) is shown at the currency's minor unit\n    // while the field is not being edited: an FX estimate of 93.4213 showed four\n    // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n    const displayDigits = digitsProp ?? currencyMinorDigits(currency);\n    const resting = focused ? shown : settleAmount(shown, displayDigits);\n    const derived = mark === \",\" ? resting.replace(/\\./g, \",\") : resting;\n    const draftAs = draft === null ? \"\" : sanitizeLive(normalizeTypedMarks(draft, mark));\n    const display =\n      draft === null\n        ? derived\n        : draftAs === shown\n          ? draft\n          : // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n            signOwned && negative && `-${draftAs}` === shown\n            ? `-${draft}`\n            : derived;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const digits = digitsProp ?? currencyMinorDigits(currency);\n    const settle = (text: string) => settleAmount(text, digits, min, max);\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => {\n      setDraft(null);\n      const settled = settle(commitExpression(shown));\n      handleText(settled);\n      onCommit?.(settled);\n    };\n    const typed = (raw: string) => {\n      setDraft(raw);\n      handleText(normalizeTypedMarks(raw, mark));\n    };\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    // The currency chip's strings are the `currency` namespace — the same two\n    // `CurrencySelect` resolves, under this component's older key names. The\n    // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n    // and `labels.pad` are handed straight through to them as overrides.\n    const currencyOverrides = useMemo(() => {\n      const out: Partial<CurrencyLabels> = {};\n      if (labels?.currency !== undefined) out.currency = labels.currency;\n      if (labels?.currencySearch !== undefined) out.search = labels.currencySearch;\n      return out;\n    }, [labels?.currency, labels?.currencySearch]);\n    const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n    const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLocaleLowerCase(locale);\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          // The name the row SHOWS, so a translated list is searchable in the\n          // language it is written in.\n          currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query, currencyNames, locale]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). It is\n            the kit's FloatingField, which draws the label — floating, or sr-only in\n            the display shape — and puts a FieldHint on the label's line, as it does\n            for NumberInput. */}\n        <FloatingField\n          className=\"w-full\"\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={textHint ? undefined : hint}\n        >\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : 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={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added at the start because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired}\n        />\n        {/* The label is FloatingField's, after these children (the floating trick\n            reads the input through `peer-*`). The display shape drops it VISUALLY,\n            not from the accessibility tree: a 36px tinted figure at the top of a\n            transaction form is legibly the amount, but a screen reader still needs\n            the name, and callers that pass `label` without `ariaLabel` would\n            otherwise be left with none. */}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own end edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              // The mark the field shows, as NumberInput hands its calculator; the\n              // evaluator reads either, and its result comes back dot-decimal.\n              value={display}\n              onChange={(result, expression) => {\n                setDraft(null);\n                const settled = settle(result);\n                handleText(settled, expression);\n                onCommit?.(settled);\n              }}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-[var(--text-muted)]\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                // the colon-and-space is punctuation a translation has to own.\n                selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={currencyText.search}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                        active && \"bg-[var(--bg-active)]\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate text-xs\">{currencyName(c, currencyNames, locale)}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </FloatingField>\n        {/* Outside the relative box, as NumberInput's caption is: the trailing\n            controls are `inset-y-1` in it and would stretch down over a second line. */}\n        {textHint && (\n          <p id={hintId} className=\"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\">\n            {hint}\n          </p>\n        )}\n        {showNumpad && (\n          <NumberPadSheet\n            // Localised like the field it mirrors. Keys are typing, read by the\n            // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n            value={display}\n            onChange={typed}\n            onResult={(result) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled);\n              onCommit?.(settled);\n            }}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n            decimalMark={mark}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: \"exceeds the outstanding balance\" was a loose `<p>` beside the field\n   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into\n   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the\n   * field paints as well as announces. `null`, `false` and `\"\"` are no message.\n   * {@link MoneyField} takes it too.\n   */\n  error?: ReactNode;\n  /**\n   * Show the desktop calculator trigger (default `true`). `false` for an amount in an\n   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)\n   * — where a click on the icon blurs the field and tears the editor down before the\n   * popover can open. Typing a calculation (\"200+50\", then Enter) still evaluates, and\n   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.\n   */\n  calculator?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount 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  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows. */\n  hint?: ReactNode;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   *\n   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n  /**\n   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n}\n\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding works in decimal exponent notation, because\n * `Math.round(1.005 * 100)` is 100 (1.005 is 1.00499… in binary).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) {\n    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);\n    n = n < 0 ? -magnitude : magnitude;\n  }\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in\n// `lib/decimal-marks.ts`, shared with NumberInput since 0.22 (keksdose K5).\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so an\n// AmountInput's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, error, calculator = true, className, id, ariaLabel, \"aria-describedby\": ariaDescribedBy, \"aria-invalid\": ariaInvalid, \"aria-required\": ariaRequired, hint, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {\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    // 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 editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // end padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = calculator && !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n    // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n    // just to show its minus. Without the handler there is nothing to toggle — a typed\n    // minus simply stays in the text, as in any field without a direction control.\n    const shown = negative && isBareAmount(value) ? `-${value}` : value;\n    // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n    // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n    // stay dot-decimal, because that string is the contract: RhfMoneyField's\n    // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n    // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n    // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n    //\n    // One character for one character, and no digit grouping: the caret stays where\n    // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n    // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n    // follows `Intl` rather than a guess about a country.\n    const locale = useKitLocale();\n    const mark = decimalMark(locale);\n    // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n    // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n    // their fingers, after which no rule could tell the two apart (keksdose G1). The\n    // draft is shown only while it still spells what the field holds; a value set from\n    // outside, a calculator result or a commit falls back to the derived spelling.\n    const [draft, setDraft] = useState<string | null>(null);\n    // A value the HOST set (not one typed here) is shown at the currency's minor unit\n    // while the field is not being edited: an FX estimate of 93.4213 showed four\n    // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n    const displayDigits = digitsProp ?? currencyMinorDigits(currency);\n    const resting = focused ? shown : settleAmount(shown, displayDigits);\n    const derived = localizeMark(resting, mark);\n    // The draft only while it says what the field holds AND holds nothing the live\n    // sanitising would drop — a letter, a second decimal point — which would otherwise\n    // stay on screen while the value said something else (see `showsTyped`).\n    const display =\n      draft === null\n        ? derived\n        : showsTyped(draft, mark, shown)\n          ? draft\n          : // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n            signOwned && negative && shown.startsWith(\"-\") && showsTyped(draft, mark, shown.slice(1))\n            ? `-${draft}`\n            : derived;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const digits = digitsProp ?? currencyMinorDigits(currency);\n    const settle = (text: string) => settleAmount(text, digits, min, max);\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => {\n      setDraft(null);\n      const settled = settle(commitExpression(shown));\n      handleText(settled);\n      onCommit?.(settled);\n    };\n    const typed = (raw: string) => {\n      setDraft(raw);\n      handleText(readTyped(raw, mark));\n    };\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    // The currency chip's strings are the `currency` namespace — the same two\n    // `CurrencySelect` resolves, under this component's older key names. The\n    // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n    // and `labels.pad` are handed straight through to them as overrides.\n    const currencyOverrides = useMemo(() => {\n      const out: Partial<CurrencyLabels> = {};\n      if (labels?.currency !== undefined) out.currency = labels.currency;\n      if (labels?.currencySearch !== undefined) out.search = labels.currencySearch;\n      return out;\n    }, [labels?.currency, labels?.currencySearch]);\n    const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n    const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLocaleLowerCase(locale);\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          // The name the row SHOWS, so a translated list is searchable in the\n          // language it is written in.\n          currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query, currencyNames, locale]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). It is\n            the kit's FloatingField, which draws the label — floating, or sr-only in\n            the display shape — and puts a FieldHint on the label's line, as it does\n            for NumberInput. */}\n        <FloatingField\n          className=\"w-full\"\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={textHint ? undefined : hint}\n        >\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : 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={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added at the start because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired}\n        />\n        {/* The label is FloatingField's, after these children (the floating trick\n            reads the input through `peer-*`). The display shape drops it VISUALLY,\n            not from the accessibility tree: a 36px tinted figure at the top of a\n            transaction form is legibly the amount, but a screen reader still needs\n            the name, and callers that pass `label` without `ariaLabel` would\n            otherwise be left with none. */}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own end edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              // The mark the field shows but not the typist's grouping: the evaluator\n              // reads either mark, and \"1.234,5\" is two of them. The result comes back\n              // dot-decimal.\n              value={derived}\n              onChange={(result, expression) => {\n                setDraft(null);\n                const settled = settle(result);\n                handleText(settled, expression);\n                onCommit?.(settled);\n              }}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-[var(--text-muted)]\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                // the colon-and-space is punctuation a translation has to own.\n                selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={currencyText.search}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                        active && \"bg-[var(--bg-active)]\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate text-xs\">{currencyName(c, currencyNames, locale)}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </FloatingField>\n        {/* Outside the relative box, as NumberInput's caption is: the trailing\n            controls are `inset-y-1` in it and would stretch down over a second line. */}\n        {textHint && (\n          <p id={hintId} className=\"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\">\n            {hint}\n          </p>\n        )}\n        {/* The news after the standing advice, as Select orders them. The root is\n            already a steady box, so the message coming and going remounts nothing. */}\n        {hasError && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {error}\n          </p>\n        )}\n        {showNumpad && (\n          <NumberPadSheet\n            // Localised like the field it mirrors. Keys are typing, read by the\n            // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n            value={display}\n            onChange={typed}\n            onResult={(result) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled);\n              onCommit?.(settled);\n            }}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n            decimalMark={mark}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}

package/dist/components/autocomplete.d.ts

@@ -80,6 +80,14 @@ interface AutocompleteProps<V extends string | number = string> extends Omit<Com
      *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is
      *  `loadErrorLabel`, shown in the list. */
     error?: ReactNode;
+    /**
+     * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other
+     * (keksdose K4): plain TEXT is a caption under the field on the input's
+     * `aria-describedby`, before any error; a {@link FieldHint} "?" rides the label line,
+     * or with no label sits at the field's end edge, outside the box. Not the list's
+     * `status` line, which talks about the lookup, not the field.
+     */
+    hint?: ReactNode;
     /**
      * The caller's own line in the list, replacing the automatic one (loading / failed
      * / no results). For what only the caller knows: "offline", "the address service

package/dist/components/autocomplete.js

@@ -16,6 +16,7 @@ import {
   useOptionSource
 } from "./combobox-core.js";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from "./field-parts.js";
 function AutocompleteInner({
   value,
   onChange,
@@ -31,6 +32,7 @@ function AutocompleteInner({
   icon,
   invalid,
   error,
+  hint,
   status,
   emptyLabel,
   loadErrorLabel,
@@ -59,7 +61,8 @@ function AutocompleteInner({
     noResults: emptyLabel,
     loadError: loadErrorLabel
   });
-  const field = useComboboxFieldError(error, invalid, ariaDescribedBy);
+  const hintParts = useFieldHint(hint, ariaDescribedBy);
+  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);
   const [ownOpen, setOwnOpen] = useState(false);
   const open = openProp ?? ownOpen;
   const setOpen = (next) => {
@@ -103,8 +106,8 @@ function AutocompleteInner({
     // `relative`: the floating label and the live region's `sr-only` both need a
     // local containing block.
     /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      hasLabel && /* @__PURE__ */ jsx(ComboboxFieldLabel, { id: labelId, htmlFor: fieldId, children: label }),
-      /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
+      hasLabel && hintParts.labelHint === void 0 && /* @__PURE__ */ jsx(ComboboxFieldLabel, { id: labelId, htmlFor: fieldId, children: label }),
+      /* @__PURE__ */ jsx(EndHintRow, { hint: hasLabel ? void 0 : hintParts.labelHint, children: /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
         icon && /* @__PURE__ */ jsx(
           "span",
           {
@@ -206,7 +209,9 @@ function AutocompleteInner({
             children: /* @__PURE__ */ jsx(Spinner, { label: null, className: small ? "h-3.5 w-3.5" : "h-4 w-4" })
           }
         )
-      ] }),
+      ] }) }),
+      hasLabel && hintParts.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(ComboboxFieldLabel, { id: labelId, htmlFor: fieldId, className: LABEL_IN_ROW, children: label }) }),
+      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
       field.errorEl,
       /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: !live ? null : statusLine !== null ? statusLine : results.length > 0 ? labels.resultCount(results.length) : null }),
       expanded && rect && typeof document !== "undefined" && createPortal(

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  isOptionEnabled,\n  stepEnabled,\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  }: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const field = useComboboxFieldError(error, invalid, ariaDescribedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  const live = open && !disabled;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      <div ref={fieldRef} className=\"relative\">\n        {icon && (\n          <span\n            aria-hidden\n            className={cn(\n              \"pointer-events-none absolute flex text-[var(--text-muted)]\",\n              small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n              // Labelled, the icon sits on the VALUE's line — the one line box below\n              // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n              // the box. Centred on the box it rose into the top strip and sat on the\n              // label's first letters, which float at the same start inset. On the\n              // value line it is beside what it describes, and the label keeps the\n              // start edge every other label in the form's column shares.\n              hasLabel\n                ? \"top-[calc(1rem+1px)] h-5 items-center\"\n                : \"top-1/2 -translate-y-1/2\",\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <input\n          {...rest}\n          ref={ref}\n          id={fieldId}\n          size={nativeSize}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded={expanded}\n          // Required by the role, and set while closed too, as on the siblings.\n          aria-controls={listboxId}\n          aria-activedescendant={activeId}\n          aria-label={ariaLabel}\n          aria-labelledby={labelledBy}\n          aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={field.describedBy}\n          autoComplete=\"off\"\n          onFocus={(e) => {\n            onFocus?.(e);\n            // A seeded field (keksdose's `initialQuery`) is looked up as it is\n            // focused; an empty one asks nothing, because of `minChars`.\n            setOpen(true);\n          }}\n          onBlur={(e) => {\n            onBlur?.(e);\n            close();\n          }}\n          onChange={(e) => {\n            onChange(e.target.value);\n            setOpen(true);\n            setActive(-1);\n          }}\n          onKeyDown={(e) => {\n            // An Escape that closes the OPEN list is the list's, and is consumed before\n            // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n            // address search) otherwise closed the whole panel when the user only meant\n            // to dismiss the suggestions — the opposite of what the docs promised.\n            if (e.key === \"Escape\" && expanded) {\n              e.preventDefault();\n              e.stopPropagation();\n              close();\n              return;\n            }\n            onKeyDown?.(e);\n            if (e.defaultPrevented) return;\n            // Disabled rows are passed over; at either end the highlight stays put.\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              else setActive((i) => stepEnabled(results, i, 1));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n              else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n            } else if (e.key === \"Enter\") {\n              // No row highlighted: the text is the answer, and a form's own submit\n              // is left alone.\n              if (expanded && activeId) {\n                e.preventDefault();\n                take(results[active]);\n              }\n            } else if (e.key === \"Tab\") {\n              close();\n            }\n          }}\n          className={cn(\n            FIELD_BASE,\n            hasLabel && FIELD_FLOATING_PAD,\n            // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n            // cannot grow it.\n            small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n            icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n            busy && (small ? \"pe-7\" : \"pe-9\"),\n            field.isInvalid && FIELD_INVALID,\n            inputClassName,\n          )}\n        />\n        {busy && live && (\n          // Decorative: the live region below already says \"Loading…\".\n          <span\n            className={cn(\n              \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n              small ? \"end-2\" : \"end-2.5\",\n            )}\n          >\n            <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n          </span>\n        )}\n      </div>\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 text-start\",\n                            small ? \"py-1 text-xs\" : \"py-1.5 text-sm\",\n                            o.disabled\n                              ? DISABLED_ROW_CLASS\n                              : i === active\n                                ? \"bg-[var(--bg-active)]\"\n                                : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate text-[var(--text-placeholder)]\",\n                                  small ? \"text-[11px]\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  isOptionEnabled,\n  stepEnabled,\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { EndHintRow, FieldCaption, LABEL_IN_ROW, StaticLabelRow, useFieldHint } from \"./field-parts\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  }: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(error, invalid, hintParts.describedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  const live = open && !disabled;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      <EndHintRow hint={hasLabel ? undefined : hintParts.labelHint}>\n        <div ref={fieldRef} className=\"relative\">\n          {icon && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none absolute flex text-[var(--text-muted)]\",\n                small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                // Labelled, the icon sits on the VALUE's line — the one line box below\n                // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                // the box. Centred on the box it rose into the top strip and sat on the\n                // label's first letters, which float at the same start inset. On the\n                // value line it is beside what it describes, and the label keeps the\n                // start edge every other label in the form's column shares.\n                hasLabel\n                  ? \"top-[calc(1rem+1px)] h-5 items-center\"\n                  : \"top-1/2 -translate-y-1/2\",\n              )}\n            >\n              {icon}\n            </span>\n          )}\n          <input\n            {...rest}\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            type=\"text\"\n            value={value}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={expanded}\n            // Required by the role, and set while closed too, as on the siblings.\n            aria-controls={listboxId}\n            aria-activedescendant={activeId}\n            aria-label={ariaLabel}\n            aria-labelledby={labelledBy}\n            aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={field.describedBy}\n            autoComplete=\"off\"\n            onFocus={(e) => {\n              onFocus?.(e);\n              // A seeded field (keksdose's `initialQuery`) is looked up as it is\n              // focused; an empty one asks nothing, because of `minChars`.\n              setOpen(true);\n            }}\n            onBlur={(e) => {\n              onBlur?.(e);\n              close();\n            }}\n            onChange={(e) => {\n              onChange(e.target.value);\n              setOpen(true);\n              setActive(-1);\n            }}\n            onKeyDown={(e) => {\n              // An Escape that closes the OPEN list is the list's, and is consumed before\n              // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n              // address search) otherwise closed the whole panel when the user only meant\n              // to dismiss the suggestions — the opposite of what the docs promised.\n              if (e.key === \"Escape\" && expanded) {\n                e.preventDefault();\n                e.stopPropagation();\n                close();\n                return;\n              }\n              onKeyDown?.(e);\n              if (e.defaultPrevented) return;\n              // Disabled rows are passed over; at either end the highlight stays put.\n              if (e.key === \"ArrowDown\") {\n                e.preventDefault();\n                if (!open) setOpen(true);\n                else setActive((i) => stepEnabled(results, i, 1));\n              } else if (e.key === \"ArrowUp\") {\n                e.preventDefault();\n                if (!open) setOpen(true);\n                // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n              } else if (e.key === \"Enter\") {\n                // No row highlighted: the text is the answer, and a form's own submit\n                // is left alone.\n                if (expanded && activeId) {\n                  e.preventDefault();\n                  take(results[active]);\n                }\n              } else if (e.key === \"Tab\") {\n                close();\n              }\n            }}\n            className={cn(\n              FIELD_BASE,\n              hasLabel && FIELD_FLOATING_PAD,\n              // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n              // cannot grow it.\n              small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n              icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n              busy && (small ? \"pe-7\" : \"pe-9\"),\n              field.isInvalid && FIELD_INVALID,\n              inputClassName,\n            )}\n          />\n          {busy && live && (\n            // Decorative: the live region below already says \"Loading…\".\n            <span\n              className={cn(\n                \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                small ? \"end-2\" : \"end-2.5\",\n              )}\n            >\n              <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n            </span>\n          )}\n        </div>\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 text-start\",\n                            small ? \"py-1 text-xs\" : \"py-1.5 text-sm\",\n                            o.disabled\n                              ? DISABLED_ROW_CLASS\n                              : i === active\n                                ? \"bg-[var(--bg-active)]\"\n                                : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate text-[var(--text-placeholder)]\",\n                                  small ? \"text-[11px]\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}

package/dist/components/button-group.d.ts

@@ -1,7 +1,9 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -24,7 +26,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -32,11 +33,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -55,14 +55,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
 
 interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —