@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/components/numpad-sheet.js

@@ -30,8 +30,8 @@ const PAD_KEYS = [
   { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" }
 ];
 const PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;
-const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
-const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
+const PAD_DIGIT = "bg-surface-2 text-primary active:bg-active";
+const PAD_ACCENT = "bg-active text-primary active:bg-surface-2";
 function NumberPadSheet({
   value,
   onChange,

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

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

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

@@ -1,19 +1,24 @@
 import 'react';
 import '../lib/phone.js';
-export { cJ as DEFAULT_PHONE_INPUT_LABELS, eq as PhoneInput, er as PhoneInputLabels, es as PhoneInputProps } from '../delete-account-setting-Dy4kJgUm.js';
+export { cJ as DEFAULT_PHONE_INPUT_LABELS, er as PhoneInput, es as PhoneInputLabels, et as PhoneInputProps } from '../delete-account-setting-DAgGBrbn.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -25,7 +30,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -37,9 +41,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -55,7 +56,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -82,6 +82,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/components/popover.js

@@ -44,7 +44,10 @@ function Popover({
   const remPx = useRemPx();
   const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE)) : 0;
   const pos = rect ? {
-    top: placement.top,
+    // Flipped above, the panel hangs from its bottom edge, so one shorter than its
+    // cap still meets the trigger (keksdose K1); the edge not in use is cleared.
+    top: placement.above ? void 0 : placement.top,
+    bottom: placement.above ? placement.bottom : void 0,
     left: Math.min(
       Math.max(EDGE, dir === "rtl" ? rect.left : rect.right - panelWidth),
       window.innerWidth - panelWidth - EDGE
@@ -89,12 +92,13 @@ function Popover({
           tabIndex: -1,
           onKeyDown: handleKeyDown,
           style: {
-            // Merged over the caller's, never replaced by it: these four are measured
+            // Merged over the caller's, never replaced by it: these are measured
             // against the trigger every scroll and resize, and a panel that dropped
             // them would paint at the top-left of the viewport.
             ...style,
             position: "fixed",
             top: pos.top,
+            bottom: pos.bottom,
             left: pos.left,
             width: panelWidth,
             maxHeight: placement.maxHeight

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the viewport.\n  const remPx = useRemPx();\n  const panelWidth = rect\n    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))\n    : 0;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(EDGE, dir === \"rtl\" ? rect.left : rect.right - panelWidth),\n          window.innerWidth - panelWidth - EDGE,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one.\n    onKeyDownProp?.(e);\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AA4LI,mBAOM,KAPN;AA5LJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAgCA,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAEvB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,OACf,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,OAAO,aAAa,IAAI,IAAI,CAAC,IAC1E;AACJ,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,MAAM,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,UAAU;AAAA,MAClE,OAAO,aAAa,aAAa;AAAA,IACnC;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAG1D,oBAAgB,CAAC;AACjB,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the viewport.\n  const remPx = useRemPx();\n  const panelWidth = rect\n    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))\n    : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: Math.min(\n          Math.max(EDGE, dir === \"rtl\" ? rect.left : rect.right - panelWidth),\n          window.innerWidth - panelWidth - EDGE,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one.\n    onKeyDownProp?.(e);\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/row-actions.d.ts

@@ -1,16 +1,17 @@
 import 'react';
 import 'lucide-react';
-export { cO as DEFAULT_ROW_ACTIONS_LABELS, eO as RowAction, eP as RowActionList, eQ as RowActions, eR as RowActionsCollapse, eS as RowActionsColumnOptions, eT as RowActionsLabels, eU as RowActionsProps, eV as RowActionsSize, fY as rowActionsColumn } from '../delete-account-setting-Dy4kJgUm.js';
-import '../data-table-labels-kpAAVi6g.js';
+import './write-lock.js';
+export { cP as DEFAULT_ROW_ACTIONS_LABELS, eZ as RowAction, e_ as RowActionList, e$ as RowActionTone, f0 as RowActions, f1 as RowActionsCollapse, f2 as RowActionsColumnOptions, f3 as RowActionsLabels, f4 as RowActionsProps, f5 as RowActionsSize, g9 as rowActionsColumn } from '../delete-account-setting-DAgGBrbn.js';
 import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
 import './chip.js';
 import './field-parts.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -52,7 +53,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -81,6 +81,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/components/row-actions.js

@@ -21,6 +21,19 @@ function glyphOf(icon) {
   const Icon = icon;
   return /* @__PURE__ */ jsx(Icon, {});
 }
+const MENU_GLYPH_TONE = {
+  info: "text-info",
+  warning: "text-warning"
+};
+function stateAttrs(action) {
+  return {
+    "aria-expanded": action.expanded,
+    "aria-controls": action.expanded === void 0 ? void 0 : action.controls
+  };
+}
+function toneAttr(tone) {
+  return { "data-tone": tone === void 0 || tone === "default" ? void 0 : tone };
+}
 function RowActions({
   actions,
   name,
@@ -28,6 +41,8 @@ function RowActions({
   size = "xs",
   menuWidth = "15rem",
   className,
+  glyphSize,
+  tooltipSide,
   labels: labelsProp
 }) {
   const labels = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);
@@ -36,37 +51,65 @@ function RowActions({
   if (entries.length === 0) return null;
   const asMenu = collapse === "menu" || collapse === "auto" && large && entries.length > 1;
   if (!asMenu) {
-    const strip = /* @__PURE__ */ jsx("div", { "data-slot": "row-actions", className: cn("inline-flex items-center gap-0.5", className), children: entries.map((action) => /* @__PURE__ */ jsx(InlineAction, { action, size }, action.key ?? action.label)) });
+    const strip = /* @__PURE__ */ jsx("div", { "data-slot": "row-actions", className: cn("inline-flex items-center gap-0.5", className), children: entries.map((action) => /* @__PURE__ */ jsx(
+      InlineAction,
+      {
+        action,
+        size,
+        glyphSize,
+        tooltipSide
+      },
+      action.key ?? action.label
+    )) });
     return large ? strip : /* @__PURE__ */ jsx(CompactControls, { children: strip });
   }
   const title = name ? labels.actionsFor(name) : labels.actions;
   const busy = entries.some((action) => action.pending);
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      width: menuWidth,
-      "aria-label": title,
-      className: "p-1",
-      trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
-        IconButton,
+  const anchored = entries.filter((action) => action.dataTour);
+  return (
+    // The "⋯" in a box of its own, the inline strip's slot: the tour anchors of the
+    // collapsed actions lie over the button in it (see `dataTour`), and `className`
+    // places the box as it places the strip.
+    /* @__PURE__ */ jsxs("div", { "data-slot": "row-actions", className: cn("relative inline-flex", className), children: [
+      /* @__PURE__ */ jsx(
+        Popover,
         {
-          ref,
-          size,
-          label: title,
-          labelVisible: false,
-          "aria-haspopup": "dialog",
-          "aria-expanded": open,
-          pending: busy,
-          stopPropagation: true,
-          onClick: toggle,
-          className,
-          children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+          width: menuWidth,
+          "aria-label": title,
+          className: "p-1",
+          trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              ref,
+              size,
+              label: title,
+              labelVisible: false,
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              pending: busy,
+              stopPropagation: true,
+              onClick: toggle,
+              children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+            }
+          ),
+          onClick: stopClick,
+          onKeyDown: stopActivationKeys,
+          children: (close) => /* @__PURE__ */ jsx("ul", { "data-slot": "row-actions-menu", className: "space-y-0.5", children: entries.map((action) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuAction, { action, close }) }, action.key ?? action.label)) })
         }
       ),
-      onClick: stopClick,
-      onKeyDown: stopActivationKeys,
-      children: (close) => /* @__PURE__ */ jsx("ul", { "data-slot": "row-actions-menu", className: "space-y-0.5", children: entries.map((action) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuAction, { action, close }) }, action.key ?? action.label)) })
-    }
+      anchored.map((action) => (
+        // The More cell's TourAnchor: decoration over the button, which keeps every tap.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-tour": action.dataTour,
+            className: "pointer-events-none absolute inset-0"
+          },
+          action.key ?? action.label
+        )
+      ))
+    ] })
   );
 }
 function stopClick(e) {
@@ -83,8 +126,17 @@ function useActionHref(action) {
 function MenuAction({ action, close }) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
+  const glyphTone = action.tone === void 0 ? void 0 : MENU_GLYPH_TONE[action.tone];
   const words = /* @__PURE__ */ jsxs(Fragment, { children: [
-    glyph && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&_svg]:size-4", children: glyph }),
+    glyph && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-tone": glyphTone ? action.tone : void 0,
+        className: cn("flex shrink-0 [&_svg]:size-4", glyphTone),
+        children: glyph
+      }
+    ),
     action.label
   ] });
   const tone = action.tone === "danger" ? "danger" : void 0;
@@ -112,11 +164,13 @@ function MenuAction({ action, close }) {
   return /* @__PURE__ */ jsx(
     Button,
     {
+      ...stateAttrs(action),
       type: "button",
       variant: "ghost",
       size: "sm",
       stretch: true,
       tone,
+      pressed: action.pressed,
       disabledReason: action.disabledReason,
       commit: action.commit,
       pending: action.pending,
@@ -127,20 +181,30 @@ function MenuAction({ action, close }) {
     }
   );
 }
-function InlineAction({ action, size }) {
+function InlineAction({
+  action,
+  size,
+  glyphSize,
+  tooltipSide
+}) {
   const href = useActionHref(action);
   const glyph = glyphOf(action.icon);
-  const tone = action.tone === "danger" ? "danger" : void 0;
+  const iconTone = action.tone === "default" ? void 0 : action.tone;
+  const textTone = action.tone === "danger" || action.tone === "muted" ? action.tone : void 0;
+  const marks = { "data-tour": action.dataTour, ...toneAttr(action.tone) };
   if (glyph) {
     if (href !== void 0) {
       return /* @__PURE__ */ jsx(
         IconButton,
         {
+          ...marks,
           href,
           external: action.external,
           size,
+          glyphSize,
           label: action.label,
-          tone,
+          tooltipSide,
+          tone: iconTone,
           disabled: action.disabled,
           stopPropagation: true,
           onClick: () => action.onSelect?.(),
@@ -151,9 +215,14 @@ function InlineAction({ action, size }) {
     return /* @__PURE__ */ jsx(
       IconButton,
       {
+        ...marks,
+        ...stateAttrs(action),
         size,
+        glyphSize,
         label: action.label,
-        tone,
+        tooltipSide,
+        tone: iconTone,
+        pressed: action.pressed,
         disabledReason: action.disabledReason,
         commit: action.commit,
         pending: action.pending,
@@ -174,15 +243,31 @@ function InlineAction({ action, size }) {
     }
   };
   if (href !== void 0) {
-    return /* @__PURE__ */ jsx(Button, { href, external: action.external, variant: "ghost", size: "sm", tone, disabled: action.disabled, ...stop, children: action.label });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...marks,
+        href,
+        external: action.external,
+        variant: "ghost",
+        size: "sm",
+        tone: textTone,
+        disabled: action.disabled,
+        ...stop,
+        children: action.label
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
     Button,
     {
+      ...marks,
+      ...stateAttrs(action),
       type: "button",
       variant: "ghost",
       size: "sm",
-      tone,
+      tone: textTone,
+      pressed: action.pressed,
       disabledReason: action.disabledReason,
       commit: action.commit,
       pending: action.pending,
@@ -202,6 +287,8 @@ function rowActionsColumn({
   name,
   collapse,
   size,
+  glyphSize,
+  tooltipSide,
   headerText,
   labels,
   column
@@ -210,7 +297,18 @@ function rowActionsColumn({
     key,
     header: /* @__PURE__ */ jsx(RowActionsHeader, { text: headerText, labels }),
     headerText,
-    cell: (row) => /* @__PURE__ */ jsx(RowActions, { actions: actions(row), name: name?.(row), collapse, size, labels }),
+    cell: (row) => /* @__PURE__ */ jsx(
+      RowActions,
+      {
+        actions: actions(row),
+        name: name?.(row),
+        collapse,
+        size,
+        glyphSize,
+        tooltipSide,
+        labels
+      }
+    ),
     className: "w-px whitespace-nowrap text-end",
     headClassName: "w-px",
     noRowLink: true,