@eifi1/ui-kit 0.4.1 → 0.5.0

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

@@ -1,6 +1,26 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
 
+/**
+ * Two of the div's own attributes are omitted because this component already owns
+ * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's
+ * tooltip string, and `onClose` is "the sheet was dismissed", not the DOM's
+ * `<dialog>` close event. Everything else a caller can pass reaches the sheet.
+ */
+interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onClose"> {
+    open: boolean;
+    onClose: () => void;
+    /** The field's own label — a sheet that fills the screen has to say what it is
+     *  asking for, which the anchored panel got for free by sitting under it. */
+    title?: ReactNode;
+    query: string;
+    onQueryChange: (value: string) => void;
+    searchPlaceholder?: string;
+    inputRef?: RefObject<HTMLInputElement | null>;
+    /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else "Close". */
+    closeLabel?: string;
+    children: ReactNode;
+}
 /**
  * The PHONE presentation of a picker: a full-screen dialog with a search box at
  * the top and the list filling everything below it (Keksdose live #200).
@@ -24,21 +44,9 @@ import { ReactNode, RefObject } from 'react';
  * scrolls, the header does not, and the body behind it is scroll-locked so a drag
  * that overshoots the list does not move the page underneath.
  */
-declare function PickerSheet({ open, onClose, title, query, onQueryChange, searchPlaceholder, inputRef, closeLabel, children, }: {
-    open: boolean;
-    onClose: () => void;
-    /** The field's own label — a sheet that fills the screen has to say what it is
-     *  asking for, which the anchored panel got for free by sitting under it. */
-    title?: ReactNode;
-    query: string;
-    onQueryChange: (value: string) => void;
-    searchPlaceholder?: string;
-    inputRef?: RefObject<HTMLInputElement | null>;
-    closeLabel?: string;
-    children: ReactNode;
-}): react.ReactPortal | null;
+declare function PickerSheet({ open, onClose, title, query, onQueryChange, searchPlaceholder, inputRef, closeLabel, children, "aria-label": ariaLabel, className, style, ...rest }: PickerSheetProps): react.ReactPortal | null;
 /** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,
  *  so a list is comfortable to hit with a thumb rather than merely legible. */
 declare const SHEET_ROW_CLASS: string;
 
-export { PickerSheet, SHEET_ROW_CLASS };
+export { PickerSheet, type PickerSheetProps, SHEET_ROW_CLASS };

package/dist/components/picker-sheet.js

@@ -1,12 +1,15 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DropdownSearchHeader } from "./dropdown.js";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
 import { useVisualViewport } from "../hooks/use-anchored-panel.js";
+import { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 function PickerSheet({
   open,
   onClose,
@@ -15,38 +18,55 @@ function PickerSheet({
   onQueryChange,
   searchPlaceholder,
   inputRef,
-  closeLabel = "Close",
-  children
+  closeLabel,
+  children,
+  "aria-label": ariaLabel,
+  className,
+  style,
+  ...rest
 }) {
+  const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel });
   useBodyScrollLock(open);
   useOverlayHistory(open, onClose);
   const vv = useVisualViewport(open);
   const ownRef = useRef(null);
   const searchRef = inputRef ?? ownRef;
-  useEffect(() => {
-    if (open) searchRef.current?.focus();
-  }, [open, searchRef]);
+  const sheetRef = useRef(null);
+  useFocusTrap(sheetRef, {
+    active: open,
+    restoreFocus: false,
+    initialFocus: () => searchRef.current
+  });
+  const handleKeyDown = (e) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    onClose();
+  };
   if (!open || typeof document === "undefined") return null;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ...rest,
+        ref: sheetRef,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": typeof title === "string" ? title : void 0,
+        tabIndex: -1,
+        onKeyDown: handleKeyDown,
+        "aria-label": ariaLabel ?? (typeof title === "string" ? title : void 0),
         onMouseDown: (e) => e.stopPropagation(),
-        style: vv ? { top: vv.top, height: vv.height, bottom: "auto" } : void 0,
-        className: "fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900",
+        style: vv ? { ...style, top: vv.top, height: vv.height, bottom: "auto" } : style,
+        className: cn("fixed inset-0 z-50 flex flex-col bg-[var(--bg-surface)] outline-none", className),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-100", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border)] px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-primary)]", children: title }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                "aria-label": closeLabel,
+                "aria-label": labels.close,
                 onClick: onClose,
-                className: "rounded p-1.5 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800",
+                className: "rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
                 children: /* @__PURE__ */ jsx(X, { className: "size-5" })
               }
             )
@@ -69,7 +89,7 @@ function PickerSheet({
 }
 const SHEET_ROW_CLASS = cn(
   "flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base",
-  "text-slate-900 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800"
+  "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
 );
 export {
   PickerSheet,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  inputRef,\n  closeLabel = \"Close\",\n  children,\n}: {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  closeLabel?: string;\n  children: ReactNode;\n}) {\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // The sheet focuses its OWN search box when it opens (Keksdose live #212: *\"make\n  // the text input filter active on select click\"*).\n  //\n  // The callers tried: `Combobox`'s field does `setOpen(true); sheetInputRef.current\n  // ?.focus()` in one `onFocus`, so the focus call runs while the sheet is still\n  // unmounted and the ref is null — and the chevron's `onMouseDown` preventDefaults\n  // to keep focus on the field, so opening that way never even attempted it. Neither\n  // is fixable from outside: only the sheet knows when its input exists.\n  //\n  // A fallback ref means a caller that does not need the handle still gets the\n  // focus, rather than the behaviour depending on whether a prop was passed.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n  useEffect(() => {\n    if (open) searchRef.current?.focus();\n  }, [open, searchRef]);\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={typeof title === \"string\" ? title : undefined}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      style={vv ? { top: vv.top, height: vv.height, bottom: \"auto\" } : undefined}\n      className=\"fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900\"\n    >\n      <div className=\"flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-700\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-100\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{children}</div>\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base\",\n  \"text-slate-900 hover:bg-slate-50 dark:text-slate-100 dark:hover:bg-slate-800\",\n);\n"],"mappings":"AA8IM,SACE,KADF;AA9IN,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAyB3B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAYG;AACD,oBAAkB,IAAI;AAoBtB,oBAAkB,MAAM,OAAO;AAG/B,QAAM,KAAK,kBAAkB,IAAI;AAYjC,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,YAAY,YAAY;AAC9B,YAAU,MAAM;AACd,QAAI,KAAM,WAAU,SAAS,MAAM;AAAA,EACrC,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AACrD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,QAiBhD,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAoBtC,OAAO,KAAK,EAAE,KAAK,GAAG,KAAK,QAAQ,GAAG,QAAQ,QAAQ,OAAO,IAAI;AAAA,QACjE,WAAU;AAAA,QAEV;AAAA,+BAAC,SAAI,WAAU,qFACb;AAAA,gCAAC,UAAK,WAAU,oFACb,iBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,aAAa;AAAA;AAAA,UACf;AAAA,UAGA,oBAAC,SAAI,WAAU,qDAAqD,UAAS;AAAA;AAAA;AAAA,IAC/E;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAIO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  inputRef,\n  closeLabel,\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel });\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n    // `Modal` or a `FullBleedDialog`, both of which take Escape on their own panel. A\n    // React portal's events still travel up the React tree, so without stopping it here\n    // one press would dismiss this list and the dialog underneath with it: Keksdose\n    // live #309 (*\"Mouse Back does not only close the select but also the whole edit or\n    // create dialog which is cumbersome\"*), which the Back gesture already learned, on\n    // the key a desktop user reaches for instead.\n    e.stopPropagation();\n    onClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={sheetRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-[var(--bg-surface)] outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-[var(--border)] px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-primary)]\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">{children}</div>\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-left text-base\",\n  \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n);\n"],"mappings":";AA0NM,SACE,KADF;AA1NN,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B,oBAAoB;AA+CnD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AAKnB,QAAM,SAAS,aAAa,eAAe,6BAA6B,EAAE,OAAO,WAAW,CAAC;AAC7F,oBAAkB,IAAI;AAoBtB,oBAAkB,MAAM,OAAO;AAG/B,QAAM,KAAK,kBAAkB,IAAI;AAIjC,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,YAAY,YAAY;AAE9B,QAAM,WAAW,OAAuB,IAAI;AA2B5C,eAAa,UAAU;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,cAAc,MAAM,UAAU;AAAA,EAChC,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,YAAQ;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AACrD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAOE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,UAAU;AAAA,QACV,WAAW;AAAA,QAIX,cAAY,cAAc,OAAO,UAAU,WAAW,QAAQ;AAAA,QAiB9D,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAwBtC,OAAO,KAAK,EAAE,GAAG,OAAO,KAAK,GAAG,KAAK,QAAQ,GAAG,QAAQ,QAAQ,OAAO,IAAI;AAAA,QAC3E,WAAW,GAAG,wEAAwE,SAAS;AAAA,QAE/F;AAAA,+BAAC,SAAI,WAAU,qEACb;AAAA,gCAAC,UAAK,WAAU,4EACb,iBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO;AAAA,gBACnB,SAAS;AAAA,gBACT,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,aAAa;AAAA;AAAA,UACf;AAAA,UAGA,oBAAC,SAAI,WAAU,qDAAqD,UAAS;AAAA;AAAA;AAAA,IAC/E;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAIO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AACF;","names":[]}

package/dist/components/popover.d.ts

@@ -1,7 +1,25 @@
 import * as react from 'react';
-import { RefObject, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, RefObject, ReactNode } from 'react';
 
-interface PopoverProps {
+/** The panel's accessible name. A `role="dialog"` with no name announces as "dialog"
+ *  and nothing else, which is worse than the unlabelled div it replaced — so it is a
+ *  prop with an English default, like every other string this package renders. Callers
+ *  should pass the control's own name ("Filter", "Choose a date"); the default is only
+ *  there so an unmigrated call site is still named. */
+interface PopoverLabels {
+    panel: string;
+}
+declare const DEFAULT_POPOVER_LABELS: PopoverLabels;
+/**
+ * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is
+ * what `DateField` and `FilterPopover` in this very package do — can hand anything
+ * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,
+ * an `aria-describedby`, or an `aria-label` naming this particular popover.
+ *
+ * `children` is omitted from those attributes rather than inherited: here it is a render
+ * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.
+ */
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     trigger: (state: {
         open: boolean;
         toggle: () => void;
@@ -9,12 +27,52 @@ interface PopoverProps {
     }) => ReactNode;
     children: (close: () => void) => ReactNode;
     width?: number;
+    labels?: Partial<PopoverLabels>;
+    /** Id for the panel, so a trigger wearing `role="combobox"` can `aria-controls` it.
+     *  Required by ARIA on that role, and the panel is rendered here rather than by the
+     *  caller, so the id has to come in from outside. */
+    panelId?: string;
+    /** Extra classes for the PANEL. The trigger is the caller's own element. */
+    className?: string;
 }
 /**
  * Portal-rendered popover anchored under its trigger button. The panel is fixed
  * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on
  * scroll/resize; it closes on outside-click and Escape.
+ *
+ * ## Trapped, not merely focused — and why, because it is the closer call
+ *
+ * The audit's finding was that this panel *"portals out of the tab order with no role
+ * and no focus move"*: Tab from the trigger went straight past the panel into the page
+ * behind it, so the calendar, the calculator keypad and every column filter in the kit
+ * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so
+ * this was chosen rather than inherited:
+ *
+ *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk
+ *    OUT of the panel into whatever follows the trigger. That is the right shape for a
+ *    non-modal popover sitting inline in the document.
+ *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the
+ *    ways out. What is here.
+ *
+ * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not
+ * beside its trigger, so "let Tab walk out" does not mean "carry on from the trigger" —
+ * it means land at the end of the document, several hundred controls from where the
+ * user was. Tabbing out of it would be a worse place to arrive than the one the finding
+ * complains about, and fixing that properly needs a sentinel-and-return dance that
+ * nothing in this package has. The trap gets the user back to the trigger every time,
+ * because `useFocusTrap` restores focus on close.
+ *
+ * And the panels this kit actually opens are self-contained: pick a date, tap out a
+ * sum, narrow a column. Each of them commits and closes, and each already has two
+ * documented ways out wired above — Escape and an outside press — so containment costs
+ * a keyboard user nothing they had.
+ *
+ * **It stays non-modal in every other respect**, deliberately: no backdrop, no body
+ * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen
+ * reader, still scrollable, and still clickable — clicking it is what dismisses this.
+ * Only Tab is contained. A popover that took the page away as well would be a
+ * {@link Modal}, and there is one of those.
  */
-declare function Popover({ trigger, children, width }: PopoverProps): react.JSX.Element;
+declare function Popover({ trigger, children, width, labels, panelId, className, style, "aria-label": ariaLabel, ...rest }: PopoverProps): react.JSX.Element;
 
-export { Popover };
+export { DEFAULT_POPOVER_LABELS, Popover, type PopoverLabels, type PopoverProps };

package/dist/components/popover.js

@@ -1,15 +1,33 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_POPOVER_LABELS = {
+  panel: "Popover"
+};
 const POPOVER_WIDTH = 288;
-function Popover({ trigger, children, width = POPOVER_WIDTH }) {
+function Popover({
+  trigger,
+  children,
+  width = POPOVER_WIDTH,
+  labels,
+  panelId,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const [open, setOpen] = useState(false);
   const close = () => setOpen(false);
   const toggle = () => setOpen((v) => !v);
+  const text = useKitLabels("popover", DEFAULT_POPOVER_LABELS, labels);
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
   const pos = rect ? {
@@ -18,21 +36,52 @@ function Popover({ trigger, children, width = POPOVER_WIDTH }) {
   } : null;
   useOutsideClick([triggerRef, panelRef], close, open);
   useEscapeKey(close, open);
+  useFocusTrap(panelRef, {
+    active: open && pos !== null,
+    // The panel keeps a focus one of its own children has already taken. `FilterPopover`
+    // autofocuses its text box on mount — that is what the press on "Filter" was FOR,
+    // and it is a prop there precisely so the popover keeps it — and a trap that
+    // unconditionally focused the container would take it straight back off again,
+    // one effect later and invisibly.
+    initialFocus: () => {
+      const panel = panelRef.current;
+      const active = document.activeElement;
+      return panel?.contains(active) ? active : panel;
+    }
+  });
+  const handleKeyDown = (e) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    close();
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger({ open, toggle, ref: triggerRef }),
     open && pos && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
+          ...rest,
           ref: panelRef,
+          role: "dialog",
+          id: panelId,
+          "aria-label": ariaLabel ?? text.panel,
+          tabIndex: -1,
+          onKeyDown: handleKeyDown,
           style: {
+            // Merged over the caller's, never replaced by it: these four 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,
             left: pos.left,
             width,
             maxHeight: placement.maxHeight
           },
-          className: "z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900",
+          className: cn(
+            "z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none",
+            className
+          ),
           children: children(close)
         }
       ),
@@ -41,6 +90,7 @@ function Popover({ trigger, children, width = POPOVER_WIDTH }) {
   ] });
 }
 export {
+  DEFAULT_POPOVER_LABELS,
   Popover
 };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\ninterface PopoverProps {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  width?: number;\n}\n\nconst POPOVER_WIDTH = 288;\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 */\nexport function Popover({ trigger, children, width = POPOVER_WIDTH }: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  // Align the panel's right edge to the trigger's and clamp it 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  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className=\"z-50 overflow-y-auto rounded-md border border-slate-200 bg-white p-3 shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"AA2CI,mBAIM,KAJN;AA3CJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAQ9C,MAAM,gBAAgB;AAOf,SAAS,QAAQ,EAAE,SAAS,UAAU,QAAQ,cAAc,GAAiB;AAClF,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAMtC,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAU;AAAA,UAET,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 { cn } from \"../lib/cn\";\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  panel: \"Popover\",\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  width?: number;\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\nconst POPOVER_WIDTH = 288;\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  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const close = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\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 right edge to the trigger's and clamp it 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  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8),\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    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          <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            // 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,\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":";AAsJI,mBAIM,KAJN;AAtJJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA,EACnD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAGtC,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAMnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,GAAG,OAAO,aAAa,QAAQ,CAAC;AAAA,EAC/E,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;AAC1D,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,MACE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAG9B,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;AAAA,YACA,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":[]}

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

@@ -1,23 +1,41 @@
 import * as react from 'react';
 import { InputHTMLAttributes } from 'react';
 
-interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> {
+interface SearchFieldOwnProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "aria-label"> {
     value: string;
     /** The typed text. Emitted as a plain string, not an event: every caller of the
      *  four this replaced wanted the string, and one of them held it in a URL param
      *  rather than in state. */
     onChange: (value: string) => void;
-    /** The field's accessible name. Required, and deliberately not defaulted to the
-     *  placeholder: a placeholder disappears the moment someone types, so a field
-     *  named only by one is unnamed exactly when a screen-reader user is working in
-     *  it. Two of the boxes this replaced had no name but the placeholder. */
-    label: string;
+    /**
+     * The field's accessible name.
+     *
+     * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on
+     * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).
+     * Unchanged and still supported; it names the field only when `aria-label` is
+     * absent, so a consumer can migrate one call site at a time.
+     */
+    label?: string;
     /** Names the clear button. Omit it and no clear button is rendered — which is a
      *  decision, not a default: a filter you can type into and not untype is the
      *  complaint that produced the button on three of these four screens. */
     clearLabel?: string;
-    className?: string;
 }
+/**
+ * One of the two spellings is REQUIRED, and the union is how that survives the
+ * deprecation. Making `label` merely optional would have been the easy change and the
+ * wrong one: the whole reason this component exists is that two of the four boxes it
+ * replaced were named by nothing but their placeholder — which disappears the moment
+ * someone types, i.e. exactly when a screen-reader user is working in the field. A
+ * caller now has a choice of spelling; it still has no option to pass neither.
+ */
+type SearchFieldProps = SearchFieldOwnProps & ({
+    "aria-label": string;
+    label?: string;
+} | {
+    label: string;
+    "aria-label"?: string;
+});
 /**
  * The page-level filter box: a search icon, a `type="search"` input, and a clear
  * "×" that appears once there is something to clear.

package/dist/components/search-field.js

@@ -1,16 +1,18 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FIELD_BASE } from "./ui.js";
-const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, ...rest }, ref) {
+const SearchField = forwardRef(function SearchField2({ value, onChange, label, clearLabel, className, placeholder, "aria-label": ariaLabel, ...rest }, ref) {
   const innerRef = useRef(null);
+  const name = ariaLabel ?? label;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       Search,
       {
         "aria-hidden": true,
-        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400"
+        className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -24,8 +26,8 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
         type: "search",
         value,
         onChange: (e) => onChange(e.target.value),
-        "aria-label": label,
-        placeholder: placeholder ?? label,
+        "aria-label": name,
+        placeholder: placeholder ?? name,
         name: "search",
         autoComplete: "off",
         autoCapitalize: "none",
@@ -51,7 +53,7 @@ const SearchField = forwardRef(function SearchField2({ value, onChange, label, c
           innerRef.current?.focus();
         },
         "aria-label": clearLabel,
-        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300",
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
         children: /* @__PURE__ */ jsx(X, { className: "size-4" })
       }
     )

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\" | \"type\"> {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /** The field's accessible name. Required, and deliberately not defaulted to the\n   *  placeholder: a placeholder disappears the moment someone types, so a field\n   *  named only by one is unnamed exactly when a screen-reader user is working in\n   *  it. Two of the boxes this replaced had no name but the placeholder. */\n  label: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n  className?: string;\n}\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={label}\n        placeholder={placeholder ?? label}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":"AA4DI,SACE,KADF;AA5DJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAkDpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,GAAG,KAAK,GACtE,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Omit it and no clear button is rendered — which is a\n   *  decision, not a default: a filter you can type into and not untype is the\n   *  complaint that produced the button on three of these four screens. */\n  clearLabel?: string;\n}\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  { value, onChange, label, clearLabel, className, placeholder, \"aria-label\": ariaLabel, ...rest },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          FIELD_BASE,\n          \"pl-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? \"pr-3\" : \"pr-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAiFI,SACE,KADF;AAjFJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAmEpB,MAAM,cAAc,WAA+C,SAASA,aACjF,EAAE,OAAO,UAAU,OAAO,YAAY,WAAW,aAAa,cAAc,WAAW,GAAG,KAAK,GAC/F,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAI9C,QAAM,OAAO,aAAa;AAC1B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,eAAe,SAAY,SAAS;AAAA,UACpC;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}

package/dist/components/series-chart-labels.d.ts

@@ -0,0 +1,14 @@
+interface SeriesChartLabels {
+    /** The button that puts a zoomed chart back to its full extent. Visible text. */
+    resetZoom: string;
+    /** Accessible name of the drag surface laid over the plot. It is the only place the
+     *  gesture is explained, so it says how the drag is read and how to undo it. */
+    zoomHint: string;
+    /** What a chart with nothing to draw says, when the caller passes no `empty`. */
+    empty: string;
+    /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
+    legend: string;
+}
+declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;
+
+export { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels };

package/dist/components/series-chart-labels.js

@@ -0,0 +1,11 @@
+"use client";
+const DEFAULT_SERIES_CHART_LABELS = {
+  resetZoom: "Reset zoom",
+  zoomHint: "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
+  empty: "No data",
+  legend: "Series"
+};
+export {
+  DEFAULT_SERIES_CHART_LABELS
+};
+//# sourceMappingURL=series-chart-labels.js.map

package/dist/components/series-chart-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** Accessible name of the drag surface laid over the plot. It is the only place the\n   *  gesture is explained, so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n};\n"],"mappings":";AAmBO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}