@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). 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. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\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 simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: 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  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. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\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<ComponentPropsWithoutRef<\"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  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-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\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-[var(--text-placeholder)] text-[var(--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. */\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` stay physical. Default `end`, which\n   *  is the old `right` in a left-to-right page. */\n  align?: \"left\" | \"right\" | \"start\" | \"end\";\n  children: ReactNode;\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  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\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-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--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 exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  // The portal leaves the subtree the trigger's `dir` came from, so it is read off\n  // the trigger — for the alignment here, and for the panel's own `dir` below,\n  // without which a right-to-left form got a left-to-right list.\n  const physical =\n    align === \"start\" ? (dir === \"rtl\" ? \"right\" : \"left\") : align === \"end\" ? (dir === \"rtl\" ? \"left\" : \"right\") : align;\n  const wanted = physical === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      dir={dir}\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 those five values are the panel's own.\n      style={{ ...style, position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--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, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). 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. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\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 simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: 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  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. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\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<ComponentPropsWithoutRef<\"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  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-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\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-[var(--text-placeholder)] text-[var(--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. */\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` stay physical. Default `end`, which\n   *  is the old `right` in a left-to-right page. */\n  align?: \"left\" | \"right\" | \"start\" | \"end\";\n  children: ReactNode;\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  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\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-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--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 exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  // The portal leaves the subtree the trigger's `dir` came from, so it is read off\n  // the trigger — for the alignment here, and for the panel's own `dir` below,\n  // without which a right-to-left form got a left-to-right list.\n  const physical =\n    align === \"start\" ? (dir === \"rtl\" ? \"right\" : \"left\") : align === \"end\" ? (dir === \"rtl\" ? \"left\" : \"right\") : align;\n  const wanted = physical === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      dir={dir}\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-[var(--border)] bg-[var(--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,6 +1,7 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 import { ComboClearValue, ComboOption } from './combobox-core.js';
+import { CommitScope } from './write-lock.js';
 import '../hooks/use-anchored-rect.js';
 import '../hooks/use-anchored-panel.js';
 
@@ -65,7 +66,7 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
      * A picker inside a form with its own Save stays editable under the lock: leave this
      * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.
      */
-    commit?: boolean;
+    commit?: CommitScope;
     /** When set, a "create" row appears for a non-empty query with no exact match. */
     onCreate?: (query: string) => void;
     createLabel?: (query: string) => string;
@@ -82,7 +83,7 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
      * taken, with the lock's reason as its second line — the picker itself stays live.
      * keksdose dev#496: on the read-only demo choosing is draft state, minting is not.
      */
-    createCommit?: boolean;
+    createCommit?: CommitScope;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
     /** What is wrong with the value, as {@link Input}'s `error`: rendered under the

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, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { assignRef, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason } 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?: boolean;\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?: boolean;\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    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 = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    hintParts.describedBy,\n  );\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} 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                  \"truncate\",\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-[var(--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-[var(--text-placeholder)] hover:text-[var(--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, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { assignRef, mergeDescribedBy } from \"./choice-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  /** 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    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 = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    hintParts.describedBy,\n  );\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} 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                  \"truncate\",\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-[var(--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-[var(--text-placeholder)] hover:text-[var(--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/facing-pair.d.ts

@@ -6,20 +6,25 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../delete-account-setting-Dy4kJgUm.js';
+import '../delete-account-setting-DAgGBrbn.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -30,7 +35,6 @@ import './month-picker.js';
 import './page-contents.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -42,9 +46,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -60,7 +61,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -87,6 +87,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

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

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { TooltipSide } from './tooltip.js';
+import { CommitScope } from './write-lock.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
 
@@ -20,6 +21,32 @@ import '../lib/clipping.js';
  * the pickers and the native choice controls — the lint's no-cycle rule holds it.
  */
 declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+/**
+ * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md
+ * §10.17): a static label ABOVE the field — the phone card's "label above value" (§4) —
+ * not a label squeezed into the field's top strip, where a long one ended in "…". It
+ * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it
+ * takes the pointer, since nothing of the field lies under it any more; and the field
+ * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box
+ * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a
+ * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no
+ * render and is right on the first paint; Normal keeps the floating label.
+ *
+ * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in
+ * flow), a label ROW keeps its `flex`.
+ */
+declare const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
+/**
+ * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,
+ * a date or month picker's root — at Large, while it holds a label above
+ * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The
+ * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a
+ * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still
+ * measure the FIELD and not label and field together; the label's own elements carry
+ * `data-field-label` and stay in the first. Only on a box with a visible label: without
+ * one the second row would be empty.
+ */
+declare const LABEL_ABOVE_BOX = "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
 declare const FLOATING_LABEL_STATIC: string;
 /**
  * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
@@ -106,9 +133,10 @@ declare function FieldCaption({ parts, className }: {
  * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,
  * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.
  * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in
- * the row.
+ * the row. At Large the ROW stands above the field, so the label inside it drops the
+ * margin a label above takes alone (`large:mb-0`), and stays level with its "?".
  */
-declare const LABEL_IN_ROW = "static min-w-0";
+declare const LABEL_IN_ROW = "static min-w-0 large:mb-0";
 /**
  * A static label and its "?" on one line, in the top strip of a field that lays out its
  * own label — the combobox family, which cannot use {@link FloatingField} because the
@@ -147,7 +175,7 @@ interface LockReason {
  * switch, a checkbox or a select that saves on change, a list row whose click writes.
  * The lock's reason wins over the control's own (`useCommitReason`).
  */
-declare function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason;
+declare function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason;
 /**
  * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for
  * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so
@@ -317,4 +345,4 @@ declare function LabelStrip({ labelId, label, hint, disabled, pad, className, ch
     children: ReactNode;
 }): react.JSX.Element;
 
-export { CompactControls, CompactControlsContext, DISABLED_REASON_LINE_CLASS, type DisabledReasonDisplay, DisabledReasonLine, EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, FieldHint, type FieldHintParts, type FieldHintProps, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useDisabledReasonLine, useFieldHint, useFieldMessages, useInlineHint, useLockReason };
+export { CompactControls, CompactControlsContext, DISABLED_REASON_LINE_CLASS, type DisabledReasonDisplay, DisabledReasonLine, EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, FieldHint, type FieldHintParts, type FieldHintProps, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_ABOVE_AT_LARGE, LABEL_ABOVE_BOX, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useDisabledReasonLine, useFieldHint, useFieldMessages, useInlineHint, useLockReason };

package/dist/components/field-parts.js

@@ -9,13 +9,21 @@ import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
 import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
 const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+const LABEL_ABOVE_AT_LARGE = "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
+const LABEL_ABOVE_BOX = "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
 const FLOATING_LABEL_STATIC = cn(
   "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
-  "max-w-[calc(100%-1.5rem)] truncate"
+  "max-w-[calc(100%-1.5rem)] truncate-until-large",
+  LABEL_ABOVE_AT_LARGE,
+  "large:block"
 );
 function FieldLabel({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
+  return (
+    // `data-field-label`: a label of the box it stands in, kept in the first row at Large
+    // (LABEL_ABOVE_BOX).
+    /* @__PURE__ */ jsx("span", { "data-field-label": "", ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children })
+  );
 }
 function FieldHint({
   label,
@@ -72,12 +80,19 @@ function FieldCaption({ parts, className }) {
   if (parts.captionText === void 0) return null;
   return /* @__PURE__ */ jsx("p", { id: parts.captionId, className: cn(FIELD_CAPTION_CLASS, className), children: parts.captionText });
 }
-const LABEL_IN_ROW = "static min-w-0";
+const LABEL_IN_ROW = "static min-w-0 large:mb-0";
 function StaticLabelRow({ hint, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
-    children,
-    /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-field-label": "",
+      className: cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE),
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+      ]
+    }
+  );
 }
 function EndHintRow({
   hint,
@@ -174,11 +189,18 @@ function FieldLabelLine({ label, hint }) {
   if (!hasContent(hint)) return /* @__PURE__ */ jsx(FieldLabel, { children: label });
   return (
     // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint
-    // over the row (and take the "?"'s hover) otherwise.
-    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FieldLabel, { className: "static min-w-0 max-w-full", children: label }),
-      /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
-    ] })
+    // over the row (and take the "?"'s hover) otherwise. Above the field at Large.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-field-label": "",
+        className: cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE),
+        children: [
+          /* @__PURE__ */ jsx(FieldLabel, { className: cn(LABEL_IN_ROW, "max-w-full"), children: label }),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+        ]
+      }
+    )
   );
 }
 const LABEL_STRIP_PAD = { field: "pt-4", clear: "pt-5" };
@@ -192,13 +214,24 @@ function LabelStrip({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative min-w-0", LABEL_STRIP_PAD[pad], className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(FieldLabel, { id: labelId, className: cn("static min-w-0 max-w-full", disabled && "opacity-50"), children: label }),
-      hasContent(hint) && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
-    ] }),
-    children
-  ] });
+  return (
+    // At Large the row is a label above the group, in flow (0.33, §10.17), and the
+    // strip's padding goes: nothing lies under it any more.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative min-w-0", LABEL_STRIP_PAD[pad], "large:pt-0", className), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-field-label": "",
+          className: cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE),
+          children: [
+            /* @__PURE__ */ jsx(FieldLabel, { id: labelId, className: cn(LABEL_IN_ROW, "max-w-full", disabled && "opacity-50"), children: label }),
+            hasContent(hint) && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+          ]
+        }
+      ),
+      children
+    ] })
+  );
 }
 export {
   CompactControls,
@@ -213,6 +246,8 @@ export {
   FieldHint,
   FieldLabel,
   FieldLabelLine,
+  LABEL_ABOVE_AT_LARGE,
+  LABEL_ABOVE_BOX,
   LABEL_IN_ROW,
   LABEL_STRIP_PAD,
   LabelStrip,