@eifi1/ui-kit 0.34.0 → 0.36.0

package/dist/components/dropdown.js

@@ -11,6 +11,7 @@ import { FIELD_TOUCH_TEXT } from "./field-base.js";
 import { mergeRefs } from "./field-parts.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
+const listLayers = /* @__PURE__ */ new WeakMap();
 function useDropdown({
   backCloses = true,
   panelIsSheet = !backCloses,
@@ -33,7 +34,10 @@ function useDropdown({
     if (back?.isConnected) back.focus();
   }, []);
   useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);
-  useDismissLayer(open && escapeLayer, closeToTrigger);
+  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);
+  useEffect(() => {
+    listLayers.set(panelRef, layer);
+  }, [panelRef, layer]);
   useOverlayHistory(open && backCloses, close);
   return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };
 }
@@ -41,6 +45,10 @@ function useDropdownSearch() {
   const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } = useDropdown();
   const [query, setQuery] = useState("");
   const inputRef = useRef(null);
+  useEffect(() => {
+    const layer = listLayers.get(panelRef);
+    if (layer) listLayers.set(inputRef, layer);
+  }, [panelRef]);
   useEffect(() => {
     if (open) {
       setQuery("");
@@ -94,7 +102,7 @@ function DropdownSearchHeader({
               value: query,
               onChange: (e) => onQueryChange(e.target.value),
               onKeyDown: (e) => {
-                runOwnKeyDown(e, onKeyDown);
+                runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));
                 takeEscape(e);
               },
               placeholder,
@@ -133,7 +141,7 @@ function DropdownPanel({
   const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
   const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
   const handleKeyDown = (e) => {
-    runOwnKeyDown(e, onKeyDown);
+    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));
     takeEscape(e);
   };
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { anchoredInline, useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for a custom dropdown — the two input-shaped\n * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and\n * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round\n * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. An open list is a layer on the kit's\n * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and\n * `useComboboxCore` are, so the package keeps one answer to \"what does Escape do\".\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to\n * whatever held focus when the list opened, which is the control that was pressed.\n *\n * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)\n *\n * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the\n * DIALOG, form and all, and leave the list open: the dialog took Escape in its own\n * `onKeyDown` before a document listener could. On the stack the list is above the\n * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and\n * {@link DropdownSearchHeader} take the key on their own elements, where focus is,\n * and stop it there — so a caller passes nothing new, AmountInput's currency chip\n * included.\n *\n * `escapeLayer: false` is for a caller that registers its own layer: the editable\n * comboboxes, whose list can be \"open\" with nothing in it to show — an Escape there\n * belongs to the dialog.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n  escapeLayer = true,\n}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Where focus was as the list opened — the trigger focus goes back to when the\n  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves\n  // focus into the search box.\n  const openerRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const el = document.activeElement;\n    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;\n  }, [open]);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document, and inside a dialog the next Escape goes\n  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger\n  // they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    const back = triggerRef.current ?? openerRef.current;\n    if (back?.isConnected) back.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // See \"Escape inside a dialog\" above.\n  useDismissLayer(open && escapeLayer, closeToTrigger);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.\n   *  Escape closes the list (the topmost layer on the kit's Escape stack); call\n   *  `preventDefault()` on it here to keep it. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-subtle px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-placeholder\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={(e) => {\n          runOwnKeyDown(e, onKeyDown);\n          // Focus is in this box while the list is up, so this is where Escape lands\n          // first — see \"Escape inside a dialog\" on {@link useDropdown}.\n          takeEscape(e);\n        }}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape\n   *  anywhere in the panel, on a row as in the search box, closes the list rather than\n   *  a dialog around it. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting.\n   *  `start`/`end` follow the trigger's reading direction — `end` is the right edge\n   *  in a left-to-right form and the left one in a right-to-left form — and are what\n   *  the kit's own pickers pass; `left`/`right` are physical and deprecated\n   *  ({@link PhysicalAlign}). Default `end`, which is the old `right` in a\n   *  left-to-right page. */\n  align?: \"start\" | \"end\" | PhysicalAlign;\n  children: ReactNode;\n  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with `panelRef`, so the outside-click still sees it. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @deprecated 0.34 — `\"start\"` / `\"end\"`, which follow the reading direction: `\"right\"`\n * is `\"end\"` in a left-to-right page, the default; removed in 0.35 (refactor audit\n * 2026-10, API-6e). The physical edges DropdownPanel's `align` still takes.\n */\ntype PhysicalAlign = \"left\" | \"right\";\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: DropdownPanelProps) {\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the\n  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    runOwnKeyDown(e, onKeyDown);\n    takeEscape(e);\n  };\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-muted\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n      <div\n        {...rest}\n        style={style}\n        ref={setPanel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the\n  // trigger's edge to stay on screen, because a list half off the viewport is the bug\n  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it\n  // is read off the trigger — for the alignment here, and for the panel's own `dir`\n  // below, without which a right-to-left form got a left-to-right list.\n  const { left } = anchoredInline(rect, width, { dir, align });\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n    <div\n      {...rest}\n      ref={setPanel}\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { anchoredInline, useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport type { DismissLayer } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/** Each list's Escape layer, filed under the refs {@link useDropdown} and\n *  {@link useDropdownSearch} hand out (`panelRef`, `inputRef`), for the panel and the\n *  search box those refs are passed to — see \"The caller's own handler\" on\n *  {@link useDropdown} (round 0.35 R2). Weak: a list's refs go with its component. */\nconst listLayers = new WeakMap<object, DismissLayer>();\n\n/**\n * Open state + close-on-outside-click for a custom dropdown — the two input-shaped\n * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and\n * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round\n * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. An open list is a layer on the kit's\n * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and\n * `useComboboxCore` are, so the package keeps one answer to \"what does Escape do\".\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to\n * whatever held focus when the list opened, which is the control that was pressed.\n *\n * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)\n *\n * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the\n * DIALOG, form and all, and leave the list open: the dialog took Escape in its own\n * `onKeyDown` before a document listener could. On the stack the list is above the\n * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and\n * {@link DropdownSearchHeader} take the key on their own elements, where focus is,\n * and stop it there — so a caller passes nothing new, AmountInput's currency chip\n * included.\n *\n * ## The caller's own handler (round 0.35 R2)\n *\n * A caller's `onKeyDown` on {@link DropdownPanel} or {@link DropdownSearchHeader} hears\n * Escape only while this list is the layer on top — the rule the dialogs got first. A\n * tooltip over a row takes that press first, and the next one is the handler's, whose\n * `preventDefault()` still keeps the list. The two find the list's layer through the\n * refs this hook hands out — the panel through `panelRef`, the search box through\n * {@link useDropdownSearch}'s `inputRef` — so a caller passes nothing new. One handed\n * neither (an un-anchored panel may leave `panelRef` off) hears every key, as before.\n *\n * `escapeLayer: false` is for a caller that registers its own layer: the editable\n * comboboxes, whose list can be \"open\" with nothing in it to show — an Escape there\n * belongs to the dialog.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n  escapeLayer = true,\n}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Where focus was as the list opened — the trigger focus goes back to when the\n  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves\n  // focus into the search box.\n  const openerRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const el = document.activeElement;\n    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;\n  }, [open]);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document, and inside a dialog the next Escape goes\n  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger\n  // they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    const back = triggerRef.current ?? openerRef.current;\n    if (back?.isConnected) back.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // See \"Escape inside a dialog\" above.\n  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);\n  // Filed under `panelRef` for the panel's own handler — \"The caller's own handler\" above.\n  useEffect(() => {\n    listLayers.set(panelRef, layer);\n  }, [panelRef, layer]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The list's layer again, under `inputRef` for the search box's handler (round 0.35\n  // R2). `useDropdown`'s effect, which runs first, has filed it under `panelRef`.\n  useEffect(() => {\n    const layer = listLayers.get(panelRef);\n    if (layer) listLayers.set(inputRef, layer);\n  }, [panelRef]);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.\n   *  Escape closes the list (the topmost layer on the kit's Escape stack); call\n   *  `preventDefault()` on it here to keep it. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-subtle px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-placeholder\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={(e) => {\n          // The caller's handler hears Escape only while the list is on top (round 0.35\n          // R2) — the layer filed under `inputRef`, when {@link useDropdownSearch} made it.\n          runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));\n          // Focus is in this box while the list is up, so this is where Escape lands\n          // first — see \"Escape inside a dialog\" on {@link useDropdown}.\n          takeEscape(e);\n        }}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape\n   *  anywhere in the panel, on a row as in the search box, closes the list rather than\n   *  a dialog around it. It is also how the panel finds the list's Escape layer, for\n   *  its `onKeyDown` (round 0.35 R2: see \"The caller's own handler\" there). */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting, by the\n   *  trigger's reading direction — `end` is the right edge in a left-to-right form and\n   *  the left one in a right-to-left form. Default `end`. The physical `left` / `right`\n   *  went in 0.35 (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a\n   *  left-to-right page, `left` is `start`. */\n  align?: \"start\" | \"end\";\n  children: ReactNode;\n  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with `panelRef`, so the outside-click still sees it. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: DropdownPanelProps) {\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the\n  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    // It hears Escape only while the list is on top, a tooltip over a row taking the\n    // press first (round 0.35 R2) — the layer filed under `panelRef`, when handed one.\n    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));\n    takeEscape(e);\n  };\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-muted\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n      <div\n        {...rest}\n        style={style}\n        ref={setPanel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the\n  // trigger's edge to stay on screen, because a list half off the viewport is the bug\n  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it\n  // is read off the trigger — for the alignment here, and for the panel's own `dir`\n  // below, without which a right-to-left form got a left-to-right list.\n  const { left } = anchoredInline(rect, width, { dir, align });\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n    <div\n      {...rest}\n      ref={setPanel}\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

package/dist/components/entity-combobox.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { type ComboClearValue, type ComboOption } from "./combobox-core.js";
-import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 import { type CommitScope } from "./write-lock.js";
 export type { ComboClearValue, ComboOption } from "./combobox-core.js";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
-export interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
     /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */
     value: V | C | null | undefined;
     /** Selecting an option emits its value; the clear button emits `clearValue`. */
@@ -45,7 +45,7 @@ export interface EntityComboboxProps<V extends string | number, C extends ComboC
      *  so it is the one control here that MUST be in the reader's language. */
     closeLabel?: string;
     /** The phone sheet's heading (and, as a string, its accessible name) for a picker
-     *  whose label is drawn by someone else — a form's `FormLabel`; `RhfCombobox`
+     *  whose label is drawn by someone else — a bound field's label; `RhfCombobox`
      *  hands its label over here (0.24). Default: `label`, then `placeholder`. */
     sheetTitle?: ReactNode;
     disabled?: boolean;

package/dist/components/entity-combobox.js

@@ -53,6 +53,7 @@ function EntityCombobox(props) {
     invalid,
     error,
     hint,
+    help,
     filter,
     minChars,
     debounceMs,
@@ -77,7 +78,7 @@ function EntityCombobox(props) {
     minChars,
     debounceMs
   });
-  const hintParts = useFieldHint(hint, ariaDescribedBy);
+  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });
   const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,

package/dist/components/entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  assignRef,\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\nexport type { ComboClearValue, ComboOption } from \"./combobox-core\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */\n  value: V | C | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `clearValue`. */\n  onChange: (value: V | C) => void;\n  /**\n   * What the clear button emits. Default `null`. Pass `\"\"` for a form whose schema\n   * wants an empty string for \"no choice\" (a zod `z.string()` field), rather than\n   * mapping `null` in every `onChange` — the type of `onChange` follows it, so the\n   * mapping cannot be forgotten on one field and not another. The picker also reads\n   * the value back as empty, so `value=\"\"` shows the placeholder and no \"×\".\n   * See {@link ComboClearValue} for why the choice is closed.\n   */\n  clearValue?: C;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes\n   *  (at `minChars` and up). Stale responses are ignored; a rejection empties the\n   *  list and says `loadErrorLabel` instead of leaving the last query's rows up. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Offer a clear \"×\" in place of the chevron while something is chosen; it emits\n   *  `clearValue`. A pointer shortcut inside the trigger, out of the tab order — the\n   *  keyboard's way is Delete or Backspace on the CLOSED trigger (0.23, as\n   *  {@link CountrySelect}). Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  /** The phone sheet's heading (and, as a string, its accessible name) for a picker\n   *  whose label is drawn by someone else — a form's `FormLabel`; `RhfCombobox`\n   *  hands its label over here (0.24). Default: `label`, then `placeholder`. */\n  sheetTitle?: ReactNode;\n  disabled?: boolean;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker\n   * that SAVES on change (keksdose G2: the statement's account, where picking IS the\n   * write). The trigger stays focusable and `aria-disabled`, the list does not open,\n   * the clear \"×\" is gone and `onChange` never fires; the reason is in the kit\n   * {@link Tooltip} and on the trigger's `aria-describedby`. Wins over `disabled`.\n   * {@link CountrySelect}'s lock, which is built on the same core.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This picker COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * A picker inside a form with its own Save stays editable under the lock: leave this\n   * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /**\n   * Offer the create row with NOTHING typed too, worded as this — keksdose G9's\n   * \"Create cash account\", which mints a record under a default name and so needs no\n   * query. `onCreate` then receives `\"\"`. Left out, the row needs a query, as before.\n   * See {@link InlineEntityCombobox}'s `createEmptyLabel`.\n   */\n  createEmptyLabel?: string;\n  /**\n   * The create row WRITES (it mints the record on the server) while picking does not.\n   * Under a locked {@link WriteLockProvider} the row stays in the list but cannot be\n   * taken, with the lock's reason as its second line — the picker itself stays live.\n   * keksdose dev#496: on the read-only demo choosing is draft state, minting is not.\n   */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so the pickers read like every other\n   * field (keksdose K4): plain TEXT is a caption under the field on the trigger's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the trigger's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop, as\n   * on {@link CountrySelect}, which is built on the same core (0.24, kastlan: react-hook-\n   * form's focus-on-error calls `focus()` on whatever `field.ref` is handed, and a\n   * picker with no ref gave it nothing to focus). Not the wrapper: focus belongs on the\n   * trigger, which is also where the panel hands it back after a pick.\n   */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number, C extends ComboClearValue = null>(\n  props: EntityComboboxProps<V, C>,\n) {\n  const {\n    value,\n    onChange,\n    clearValue = null as C,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    sheetTitle,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,\n    // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper\n    // div the label's `htmlFor` named nothing and the hint described nothing.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both — CountrySelect's.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock: this picker's own reason, or the provider's under `commit`.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame offers a pick that would\n  // be thrown away.\n  if (lock.locked && open) setOpen(false);\n  // The create row's own lock, for a picker whose choosing is draft and whose create\n  // is the write (`createCommit`).\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  // The clear value is \"nothing selected\" too, whichever one the caller picked.\n  const chosen: V | null = value == null || value === clearValue ? null : (value as V);\n  const selectedOption = chosen == null ? null : resolve(chosen);\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && chosen != null && !inert);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n  // While locked the trigger sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy — `block` so a full-width field stays full width.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const choose = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    rememberOption(o);\n    onChange(o.value);\n    // Back to the trigger, not to <body>: the panel that held focus is about to\n    // unmount, and a keyboard user who just answered this field should be standing\n    // on it, ready to Tab to the next one.\n    core.closeToTrigger();\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={\n              ariaLabel ??\n              (typeof label === \"string\" ? common.fieldValue(label, triggerText) : undefined)\n            }\n            // The focusable kind of disabled while locked (Button's rule): a native\n            // `disabled` would take the field out of the tab order, and the reason with it.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange(clearValue);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span className=\"flex min-w-0 items-center gap-2\">\n              {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n              <span\n                className={cn(\n                  // One line at Normal; from Large up the value wraps and the trigger\n                  // grows, as DatePicker's does (text size §10.17, round 0.34 T1).\n                  \"truncate-until-large\",\n                  // A chosen value is the field's VALUE, so it is set in the same ink an\n                  // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n                  // than restated (Keksdose dev#477). It used to be one notch lighter\n                  // than the typeahead fields beside it, which is visible when a picker\n                  // and a text field share a form row. Nothing selected keeps the\n                  // placeholder tone (`--text-placeholder`), which every field here\n                  // agrees on.\n                  !selectedOption && \"text-placeholder\",\n                )}\n              >\n                {selectedOption?.label ?? placeholder ?? \"\"}\n              </span>\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire; the keys go to the trigger, where Delete and Backspace clear. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange(clearValue);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={sheetTitle ?? label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.closeToTrigger();\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  assignRef,\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\nexport type { ComboClearValue, ComboOption } from \"./combobox-core\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">,\n    FieldHelpProps {\n  /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */\n  value: V | C | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `clearValue`. */\n  onChange: (value: V | C) => void;\n  /**\n   * What the clear button emits. Default `null`. Pass `\"\"` for a form whose schema\n   * wants an empty string for \"no choice\" (a zod `z.string()` field), rather than\n   * mapping `null` in every `onChange` — the type of `onChange` follows it, so the\n   * mapping cannot be forgotten on one field and not another. The picker also reads\n   * the value back as empty, so `value=\"\"` shows the placeholder and no \"×\".\n   * See {@link ComboClearValue} for why the choice is closed.\n   */\n  clearValue?: C;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes\n   *  (at `minChars` and up). Stale responses are ignored; a rejection empties the\n   *  list and says `loadErrorLabel` instead of leaving the last query's rows up. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Offer a clear \"×\" in place of the chevron while something is chosen; it emits\n   *  `clearValue`. A pointer shortcut inside the trigger, out of the tab order — the\n   *  keyboard's way is Delete or Backspace on the CLOSED trigger (0.23, as\n   *  {@link CountrySelect}). Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  /** The phone sheet's heading (and, as a string, its accessible name) for a picker\n   *  whose label is drawn by someone else — a bound field's label; `RhfCombobox`\n   *  hands its label over here (0.24). Default: `label`, then `placeholder`. */\n  sheetTitle?: ReactNode;\n  disabled?: boolean;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker\n   * that SAVES on change (keksdose G2: the statement's account, where picking IS the\n   * write). The trigger stays focusable and `aria-disabled`, the list does not open,\n   * the clear \"×\" is gone and `onChange` never fires; the reason is in the kit\n   * {@link Tooltip} and on the trigger's `aria-describedby`. Wins over `disabled`.\n   * {@link CountrySelect}'s lock, which is built on the same core.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This picker COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * A picker inside a form with its own Save stays editable under the lock: leave this\n   * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /**\n   * Offer the create row with NOTHING typed too, worded as this — keksdose G9's\n   * \"Create cash account\", which mints a record under a default name and so needs no\n   * query. `onCreate` then receives `\"\"`. Left out, the row needs a query, as before.\n   * See {@link InlineEntityCombobox}'s `createEmptyLabel`.\n   */\n  createEmptyLabel?: string;\n  /**\n   * The create row WRITES (it mints the record on the server) while picking does not.\n   * Under a locked {@link WriteLockProvider} the row stays in the list but cannot be\n   * taken, with the lock's reason as its second line — the picker itself stays live.\n   * keksdose dev#496: on the read-only demo choosing is draft state, minting is not.\n   */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so the pickers read like every other\n   * field (keksdose K4): plain TEXT is a caption under the field on the trigger's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the trigger's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /**\n   * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop, as\n   * on {@link CountrySelect}, which is built on the same core (0.24, kastlan: react-hook-\n   * form's focus-on-error calls `focus()` on whatever `field.ref` is handed, and a\n   * picker with no ref gave it nothing to focus). Not the wrapper: focus belongs on the\n   * trigger, which is also where the panel hands it back after a pick.\n   */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number, C extends ComboClearValue = null>(\n  props: EntityComboboxProps<V, C>,\n) {\n  const {\n    value,\n    onChange,\n    clearValue = null as C,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    sheetTitle,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    help,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper — see MultiEntityCombobox: `Field`'s render-prop spreads `{ id,\n    // aria-describedby, aria-invalid, aria-required }`, and on the role-less wrapper\n    // div the label's `htmlFor` named nothing and the hint described nothing.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, rememberOption, query, triggerRef } = core;\n  // The core anchors the panel to the trigger and hands focus back to it; the caller's\n  // `ref` wants the same element. One callback feeds both — CountrySelect's.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock: this picker's own reason, or the provider's under `commit`.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  // A lock arriving while the list is up closes it — adjusted while\n  // rendering, as the core adjusts its own query, so no frame offers a pick that would\n  // be thrown away.\n  if (lock.locked && open) setOpen(false);\n  // The create row's own lock, for a picker whose choosing is draft and whose create\n  // is the write (`createCommit`).\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  // The clear value is \"nothing selected\" too, whichever one the caller picked.\n  const chosen: V | null = value == null || value === clearValue ? null : (value as V);\n  const selectedOption = chosen == null ? null : resolve(chosen);\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && chosen != null && !inert);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n  // While locked the trigger sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy — `block` so a full-width field stays full width.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const choose = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    rememberOption(o);\n    onChange(o.value);\n    // Back to the trigger, not to <body>: the panel that held focus is about to\n    // unmount, and a keyboard user who just answered this field should be standing\n    // on it, ready to Tab to the next one.\n    core.closeToTrigger();\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={\n              ariaLabel ??\n              (typeof label === \"string\" ? common.fieldValue(label, triggerText) : undefined)\n            }\n            // The focusable kind of disabled while locked (Button's rule): a native\n            // `disabled` would take the field out of the tab order, and the reason with it.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange(clearValue);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span className=\"flex min-w-0 items-center gap-2\">\n              {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n              <span\n                className={cn(\n                  // One line at Normal; from Large up the value wraps and the trigger\n                  // grows, as DatePicker's does (text size §10.17, round 0.34 T1).\n                  \"truncate-until-large\",\n                  // A chosen value is the field's VALUE, so it is set in the same ink an\n                  // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n                  // than restated (Keksdose dev#477). It used to be one notch lighter\n                  // than the typeahead fields beside it, which is visible when a picker\n                  // and a text field share a form row. Nothing selected keeps the\n                  // placeholder tone (`--text-placeholder`), which every field here\n                  // agrees on.\n                  !selectedOption && \"text-placeholder\",\n                )}\n              >\n                {selectedOption?.label ?? placeholder ?? \"\"}\n              </span>\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire; the keys go to the trigger, where Delete and Backspace clear. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange(clearValue);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on Input and Select. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={sheetTitle ?? label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.closeToTrigger();\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -191,11 +191,6 @@ export interface PasswordRevealLabels {
     hide: string;
 }
 export { DEFAULT_PASSWORD_REVEAL_LABELS };
-/** @deprecated 0.34 — `useKitLabels("passwordReveal", DEFAULT_PASSWORD_REVEAL_LABELS, labels)`,
- *  which the provider reaches too, or Input's own `passwordLabels`; removed in 0.35
- *  (refactor audit 2026-10, API-6a). A merge from before the provider, which no kit
- *  component calls. */
-export declare function resolvePasswordRevealLabels(partial?: Partial<PasswordRevealLabels>): PasswordRevealLabels;
 /**
  * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.
  * The visible "12/80" is digits and a slash and is not translated; these are the words

package/dist/components/field-base.js

@@ -132,10 +132,6 @@ function FieldGroup({
     errorEl
   ] });
 }
-function resolvePasswordRevealLabels(partial) {
-  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;
-  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
-}
 function textLength(value) {
   return value === void 0 || value === null ? 0 : String(value).length;
 }
@@ -221,7 +217,6 @@ export {
   Label,
   fieldBelow,
   hasPlaceholderText,
-  resolvePasswordRevealLabels,
   useCharacterCountLabels,
   useTypedLength
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE =\n  \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/** @deprecated 0.34 — `useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, labels)`,\n *  which the provider reaches too, or Input's own `passwordLabels`; removed in 0.35\n *  (refactor audit 2026-10, API-6a). A merge from before the provider, which no kit\n *  component calls. */\nexport function resolvePasswordRevealLabels(\n  partial?: Partial<PasswordRevealLabels>,\n): PasswordRevealLabels {\n  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;\n  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };\n}\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\"\n            ? \"text-danger\"\n            : zone === \"near\"\n              ? \"text-warning\"\n              : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK =\n  \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n        className,\n      )}\n    />\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE =\n  \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\"\n            ? \"text-danger\"\n            : zone === \"near\"\n              ? \"text-warning\"\n              : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}