@eifi1/ui-kit 0.49.0 → 0.50.1

package/dist/components/dropdown.js

@@ -187,6 +187,7 @@ function DropdownPanel({
       {
         ...rest,
         ref: setPanel,
+        "data-kit-layer": "",
         dir,
         onKeyDown: handleKeyDown,
         onPointerDownCapture: handlePointerDownCapture,

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  PointerEvent as ReactPointerEvent,\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 { pressInside, 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  // A press in a panel opened from a row (a popover, its lists) is inside the list for\n  // `useDropdown`'s outside press, though portalled elsewhere (dev#623).\n  const markInside = pressInside(panelRef);\n  const handlePointerDownCapture = (e: ReactPointerEvent<HTMLDivElement>) => {\n    rest.onPointerDownCapture?.(e);\n    markInside?.(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        onPointerDownCapture={handlePointerDownCapture}\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      onPointerDownCapture={handlePointerDownCapture}\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  PointerEvent as ReactPointerEvent,\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 { pressInside, 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  // A press in a panel opened from a row (a popover, its lists) is inside the list for\n  // `useDropdown`'s outside press, though portalled elsewhere (dev#623).\n  const markInside = pressInside(panelRef);\n  const handlePointerDownCapture = (e: ReactPointerEvent<HTMLDivElement>) => {\n    rest.onPointerDownCapture?.(e);\n    markInside?.(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        onPointerDownCapture={handlePointerDownCapture}\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      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      onPointerDownCapture={handlePointerDownCapture}\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/full-bleed-dialog.js

@@ -54,6 +54,7 @@ function FullBleedDialog({
       "div",
       {
         ...rest,
+        "data-kit-layer": "backdrop",
         className: cn(
           "fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none",
           closing ? "animate-overlay-out" : "animate-overlay"

package/dist/components/full-bleed-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * The padding around the dialog's scrolling body, as a CSS length (0.32,\n * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has\n * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT\n * box, so a pinned row sits this far short of the panel's edge unless it cancels it\n * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px\n * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:\n * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.\n */\nexport const DIALOG_GUTTER = \"0.75rem\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /**\n   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start\n   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is\n   * announced by name rather than as just \"dialog\".\n   *\n   * Before this the strip was a styled `div`, and a caller that wanted its full-screen\n   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —\n   * keksdose's budget-table phone editor says so in a comment at the call site. A\n   * caller's own `aria-label` / `aria-labelledby` still wins.\n   */\n  title?: ReactNode;\n  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * Free content for the header strip, beside the close button — after the\n   * {@link title} when there is one, or on its own (the row editor shows the row's\n   * own first cell here). It does not name the dialog; `title` does.\n   */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n  /** The `role=\"dialog\"` element, where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10) — merged with its own ref, which the focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. A plain\n * title belongs in `title`, which is a real heading and the dialog's name; `header`\n * stays the free slot beside it. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  title,\n  headingAs: Heading = \"h2\",\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ref,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const setDialog = useMemo(() => mergeRefs(dialogRef, ref), [ref]);\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null && title !== false;\n  const hasHeader = header !== undefined && header !== null && header !== false;\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  //\n  // That default only decides when nothing inside asked for focus. A field the app\n  // autofocuses on purpose keeps it (0.33.1): keksdose's create card autofocuses its\n  // amount, and the trap used to take focus straight back to the dialog — and on a\n  // phone the numpad sheet, which shows only while the field is focused, went with it\n  // (live #402). Closing still hands focus back to whatever opened the dialog.\n  useFocusTrap(dialogRef, { active: open });\n\n  // A layer on the Escape stack while open (Wave 2, DUP-1). This dialog is what a\n  // `PickerSheet`, a list or the numpad opens on top of, and the stack hands the key\n  // to whichever of them is topmost — one press dismissing the sheet AND the edit\n  // behind it was Keksdose live #309 (*\"Mouse Back does not only close the select but\n  // also the whole edit or create dialog\"*) on a different key.\n  const layer = useDismissLayer(open, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims Escape. Only there: a\n    // descendant's does not count. A SearchField in the header prevents Escape to stop\n    // Chromium clearing a type=search input, and in 0.8.0 that silently stopped Escape\n    // from closing the dialog (keksdose). The one rule `Modal` now shares — as is this\n    // one: the handler sees Escape only while this dialog is the layer on top (0.35).\n    runOwnKeyDown(e, onKeyDown, layer);\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and the mouse handlers are the backdrop press (Escape and the\n       close button are its keyboard path). */\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // The heading names the dialog unless the caller named it some other way — an\n      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would\n      // silently outrank).\n      aria-labelledby={rest[\"aria-labelledby\"] ?? (hasTitle && !rest[\"aria-label\"] ? titleId : undefined)}\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={setDialog}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-surface shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-3 py-3\">\n          {hasTitle ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Heading id={titleId} className=\"min-w-0 break-words text-base font-semibold leading-snug text-primary\">\n                {title}\n              </Heading>\n              {hasHeader && <div className=\"min-w-0 flex-1 font-medium\">{header}</div>}\n            </div>\n          ) : (\n            <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          )}\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-muted hover:bg-hover hover:text-secondary\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* DIALOG_GUTTER (0.75rem, the px-3 py-3 it was), not px-4: every pixel of\n            chrome here is width the form fields lose on a phone (feedback #32). The\n            body is the only thing that scrolls, so the header stays put and the page\n            underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\" style={{ padding: DIALOG_GUTTER }}>\n          {children}\n        </div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * The padding around the dialog's scrolling body, as a CSS length (0.32,\n * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has\n * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT\n * box, so a pinned row sits this far short of the panel's edge unless it cancels it\n * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px\n * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:\n * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.\n */\nexport const DIALOG_GUTTER = \"0.75rem\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /**\n   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start\n   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is\n   * announced by name rather than as just \"dialog\".\n   *\n   * Before this the strip was a styled `div`, and a caller that wanted its full-screen\n   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —\n   * keksdose's budget-table phone editor says so in a comment at the call site. A\n   * caller's own `aria-label` / `aria-labelledby` still wins.\n   */\n  title?: ReactNode;\n  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * Free content for the header strip, beside the close button — after the\n   * {@link title} when there is one, or on its own (the row editor shows the row's\n   * own first cell here). It does not name the dialog; `title` does.\n   */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n  /** The `role=\"dialog\"` element, where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10) — merged with its own ref, which the focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. A plain\n * title belongs in `title`, which is a real heading and the dialog's name; `header`\n * stays the free slot beside it. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  title,\n  headingAs: Heading = \"h2\",\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ref,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const setDialog = useMemo(() => mergeRefs(dialogRef, ref), [ref]);\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null && title !== false;\n  const hasHeader = header !== undefined && header !== null && header !== false;\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  //\n  // That default only decides when nothing inside asked for focus. A field the app\n  // autofocuses on purpose keeps it (0.33.1): keksdose's create card autofocuses its\n  // amount, and the trap used to take focus straight back to the dialog — and on a\n  // phone the numpad sheet, which shows only while the field is focused, went with it\n  // (live #402). Closing still hands focus back to whatever opened the dialog.\n  useFocusTrap(dialogRef, { active: open });\n\n  // A layer on the Escape stack while open (Wave 2, DUP-1). This dialog is what a\n  // `PickerSheet`, a list or the numpad opens on top of, and the stack hands the key\n  // to whichever of them is topmost — one press dismissing the sheet AND the edit\n  // behind it was Keksdose live #309 (*\"Mouse Back does not only close the select but\n  // also the whole edit or create dialog\"*) on a different key.\n  const layer = useDismissLayer(open, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims Escape. Only there: a\n    // descendant's does not count. A SearchField in the header prevents Escape to stop\n    // Chromium clearing a type=search input, and in 0.8.0 that silently stopped Escape\n    // from closing the dialog (keksdose). The one rule `Modal` now shares — as is this\n    // one: the handler sees Escape only while this dialog is the layer on top (0.35).\n    runOwnKeyDown(e, onKeyDown, layer);\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and the mouse handlers are the backdrop press (Escape and the\n       close button are its keyboard path). */\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // The heading names the dialog unless the caller named it some other way — an\n      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would\n      // silently outrank).\n      aria-labelledby={rest[\"aria-labelledby\"] ?? (hasTitle && !rest[\"aria-label\"] ? titleId : undefined)}\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={setDialog}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-surface shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-3 py-3\">\n          {hasTitle ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Heading id={titleId} className=\"min-w-0 break-words text-base font-semibold leading-snug text-primary\">\n                {title}\n              </Heading>\n              {hasHeader && <div className=\"min-w-0 flex-1 font-medium\">{header}</div>}\n            </div>\n          ) : (\n            <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          )}\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-muted hover:bg-hover hover:text-secondary\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* DIALOG_GUTTER (0.75rem, the px-3 py-3 it was), not px-4: every pixel of\n            chrome here is width the form fields lose on a phone (feedback #32). The\n            body is the only thing that scrolls, so the header stays put and the page\n            underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\" style={{ padding: DIALOG_GUTTER }}>\n          {children}\n        </div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -7,6 +7,7 @@ import { cn } from "../lib/cn.js";
 import { useDropdown } from "./dropdown.js";
 import { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
 import { isImeEnter } from "../lib/ime.js";
+import { isQuietFocus } from "../lib/quiet-focus.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
 import {
@@ -85,6 +86,7 @@ function InlineEntityCombobox(props) {
   const isPhone = usePhoneLayout();
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });
   const primaryOnly = usePrimaryPressOnly();
+  const quietRef = useRef(false);
   const [active, setActive] = useState(-1);
   const [text, setText] = useState(null);
   const sheetInputRef = useRef(null);
@@ -235,11 +237,21 @@ function InlineEntityCombobox(props) {
               onFocus: (e) => {
                 if (primaryOnly.fromAuxButton() || locked) return;
                 setText(shown);
+                if (isQuietFocus(e.currentTarget)) {
+                  quietRef.current = true;
+                  return;
+                }
                 e.currentTarget.select();
                 setOpen(true);
                 if (isPhone) sheetInputRef.current?.focus();
               },
+              onClick: () => {
+                if (!quietRef.current || locked) return;
+                quietRef.current = false;
+                setOpen(true);
+              },
               onBlur: () => {
+                quietRef.current = false;
                 if (!isPhone) reconcile();
               },
               onChange: (e) => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/inline-entity-combobox.tsx"],"sourcesContent":["// The id-keyed sibling of Combobox. Moved out of combobox.tsx as it was (MOD-9,\n// refactor audit 2026-10); combobox still exports `InlineEntityCombobox` and its props.\nimport { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown, Plus, X } from \"lucide-react\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { useDropdown } from \"./dropdown\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  offersCreate,\n  stepEnabled,\n  useActiveOptionScroll,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { foldForSearch, rankMatch } from \"../lib/text-match\";\nimport {\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 { hasContent } from \"../lib/presence\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { lockedKeyDown, rowClass, SuggestionList, usePrimaryPressOnly } from \"./combobox-suggestions\";\n\n/** {@link InlineEntityCombobox}'s create row over the shared row look: in the brand\n *  colour {@link Combobox}'s own create row wears, with a leading \"+\" as the panel\n *  pickers' has — an action at the foot of the list, not one more record. */\nconst CREATE_ROW_CLASS = \"flex items-center gap-2 font-medium text-brand\";\n\n/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}\n *  for why the div's spellings of them are omitted. */\nexport interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\">,\n    FieldHelpProps {\n  /** Selected option id; `null` or `clearValue` when nothing is selected. */\n  value: V | C | null;\n  /** Required and unanswered — see {@link Combobox}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value — see {@link Combobox}'s `error`. */\n  error?: ReactNode;\n  /** Standing advice — see {@link Combobox}'s `hint` (keksdose K4). */\n  hint?: ReactNode;\n  /** A picked/typed option emits its id; emptying the field, or the \"×\", emits\n   *  `clearValue`. */\n  onChange: (v: V | C) => void;\n  /** What a clear emits — `null` by default, `\"\"` for a schema that wants an empty\n   *  string. See {@link EntityCombobox}'s `clearValue`. */\n  clearValue?: C;\n  options: ComboOption<V>[];\n  /** The visible label — see {@link Combobox}'s `label` (a ReactNode since 0.34, API-9). */\n  label?: ReactNode;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`\n   *  below, open the list with it. A click-the-value editor needs it: the cell\n   *  the user clicked names the field the editor should land the caret in, and\n   *  without a passthrough this component's fixed prop list puts the `<input>`\n   *  out of a caller's reach entirely (Keksdose feedback live #218). */\n  autoFocus?: boolean;\n  /** Phone sheet only — the anchored list has the field itself to type in. Falls\n   *  back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */\n  searchPlaceholder?: string;\n  /** Phone sheet only: a full screen showing nothing has to say why. The anchored\n   *  list simply does not open. Default: `combobox.noResults` from the provider. */\n  emptyLabel?: string;\n  closeLabel?: string;\n  /** The phone sheet's heading (and, as a string, its accessible name) for a field\n   *  whose label is drawn by someone else — a bound field's label;\n   *  `RhfInlineEntityCombobox` hands its label over here (0.24). Default: `label`.\n   *  See {@link Combobox}'s `sheetTitle`. */\n  sheetTitle?: ReactNode;\n  /** Offer a clear \"×\" in place of the chevron whenever something is selected.\n   *\n   *  Emptying the text already clears (see {@link reconcile}), and on a desktop that\n   *  is the fast way. It is not a way at all on a PHONE: touching the field opens the\n   *  full-screen sheet, which covers the very input the text would have been deleted\n   *  from — so a field that had been answered could not be UNanswered by any gesture\n   *  the screen offered (Keksdose live #236, filed from a phone). The \"×\" is the one\n   *  affordance both shells share, and it clears without opening anything. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker\n   * that SAVES on change. keksdose G2: the statement review's account picker IS the\n   * write (picking re-runs the duplicate check on the server), and on the read-only demo\n   * the app wrapped it in a hand-made Tooltip over a native `disabled` — out of the tab\n   * order, so the reason never reached a keyboard.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey), opens no list or sheet, offers no clear \"×\", and no pick, typed\n   * label or clear reaches `onChange`; the reason is in the kit {@link Tooltip} and on\n   * the input's `aria-describedby`. Wins over `disabled`. Use it CONTROLLED, as the\n   * component always is: the shown label is `value`'s.\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  /**\n   * A last row that makes a new record from what was typed — keksdose G9, whose \"Create\n   * cash account\" had to become a separate button because this picker had no such row.\n   *\n   * Shown while the typed query is non-empty and names no option exactly\n   * (case-insensitive — an exact hit is a record the list already shows), worded\n   * `createLabel(query)`, default `combobox.create`: \"Create “{query}”\". The arrow keys\n   * reach it like an option; Enter or a click calls `onCreate(query)` and closes the\n   * list. Making the record, and then passing its id as `value`, is the caller's: the\n   * field shows the old selection until it does.\n   *\n   * The same rule as {@link EntityCombobox}'s `onCreate`, so the family agrees. It is a\n   * row of the LIST, not an option: it is never `aria-selected`, never matched by a\n   * typed label on blur, and never sorted among the records the way a sentinel option\n   * would be (the reason keksdose gave for the separate button).\n   */\n  onCreate?: (query: string) => void;\n  /** The create row's words for a query. Default: `combobox.create` from the\n   *  {@link UiKitProvider}, else English `Create “{query}”`. */\n  createLabel?: (query: string) => string;\n  /**\n   * Offer the create row with NOTHING typed too, worded as this — keksdose's \"Create cash\n   * account\", which mints an account under a default name and so needs no query.\n   * `onCreate` then receives `\"\"`, and the caller supplies the name. Left out, the row\n   * needs a query.\n   *\n   * One string rather than a switch: a row with no query has nothing to quote, so the\n   * kit cannot word it — \"Create “”\" says nothing — and naming it is what turns it on.\n   * With both, one handler serves both rows:\n   *\n   * ```tsx\n   * onCreate={(name) => createCash(name || t(\"cash_account_default_name\"))}\n   * createEmptyLabel={t(\"create_cash_account\")}\n   * ```\n   */\n  createEmptyLabel?: string;\n  /**\n   * The create row WRITES while picking does not — keksdose dev#496: on the read-only\n   * demo choosing the cash account is draft state and stays live, minting one is a\n   * write. Under a locked {@link WriteLockProvider} the row stays in the list, dimmed and\n   * passed over by the arrows, with the lock's reason as its second line (a hover is the\n   * one explanation a phone cannot show), and `onCreate` is not called. Not needed with\n   * `commit`: a locked field opens no list at all.\n   */\n  createCommit?: CommitScope;\n  /**\n   * The `<input>` — the focusable control, the one a reader types in — as a React 19\n   * ref prop (0.24, kastlan). Its account picker is this component inside an\n   * `RhfField` render, and react-hook-form's focus-on-error calls `focus()` on whatever\n   * `field.ref` is handed: with no ref there was nothing to hand it, so a line-item form\n   * whose account was missing failed its submit and left the caret where it was. Pass\n   * `field.ref` here, or use `RhfInlineEntityCombobox`, which does. The wrapper is not\n   * reachable this way — focus and selection are the input's. See {@link Combobox}'s `ref`.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input\n * with the shared field styling, chevron and inline as-you-type filtering) but\n * the value is an option id, not free text. Built so an entity picker can sit\n * next to a free-text combobox without any visible difference — a button-trigger\n * panel picker ({@link EntityCombobox}) never matches an input field exactly.\n *\n * Text-vs-value reconciliation: the input's text is transient. Picking a row or\n * typing an exact (unique) label commits that option; emptying the text commits\n * a clear; anything else reverts to the selected option's label on blur/Escape.\n *\n * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}\n * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto\n * this component and must not lose its sheet). The sheet carries its OWN query state\n * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a\n * sheet that emptied it to show the full list would read as \"the user cleared the\n * field\" the moment it closed.\n */\nexport function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>(\n  props: InlineEntityComboboxProps<V, C>,\n) {\n  const {\n    value: rawValue,\n    onChange,\n    clearValue = null as C,\n    options,\n    label,\n    id,\n    placeholder,\n    className,\n    disabled,\n    autoFocus,\n    searchPlaceholder,\n    emptyLabel,\n    closeLabel,\n    sheetTitle,\n    clearable,\n    clearLabel,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    invalid,\n    error,\n    hint,\n    help,\n    ref,\n    \"aria-label\": ariaLabel,\n    // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n    // on the wrapper div the hint and required state described nothing.\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  // The clear value reads as \"nothing selected\", whichever one the caller picked —\n  // so from here down `value` is the id or `null`, as it always was.\n  const value: V | null = rawValue == null || rawValue === clearValue ? null : (rawValue as V);\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // See the twin above on why these hang off the generated id.\n  const listboxId = `${generated}-listbox`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const isPhone = usePhoneLayout();\n  // See the twin above: the phone sheet owns its own Back entry (live #309), and the\n  // Escape layer is this field's own.\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });\n  const primaryOnly = usePrimaryPressOnly();\n  const [active, setActive] = useState(-1);\n  // null = not editing → the input shows the selected option's label.\n  const [text, setText] = useState<string | null>(null);\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — see {@link SuggestionList}.\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // The sheet's search box. Starts empty on every open, so a field that already\n  // holds a value still offers the whole list — the shape a native <select> has\n  // on a phone, and what the anchored panel gets from `query` below.\n  const [sheetQuery, setSheetQuery] = useState(\"\");\n  // Props first, provider second — see `EntityCombobox`. `emptyLabel` used to render\n  // nothing when omitted, which left a phone user staring at a blank full-screen\n  // sheet; now an omitted one says \"No results\" in the provider's language.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  // The lock (see `lockedKeyDown` above). A lock arriving mid-edit closes the list and\n  // drops the loose text, adjusted while rendering: nothing typed before it may be\n  // judged by `reconcile` after it.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  if (locked && (open || text !== null)) {\n    setOpen(false);\n    setText(null);\n  }\n  // The create row's own lock (`createCommit`): the list stays live, the row does not.\n  const createReason = useCommitReason(createCommit, undefined);\n  const createLocked = hasContent(createReason);\n\n  const selected = useMemo(\n    () => (value == null ? null : (options.find((o) => o.value === value) ?? null)),\n    [options, value],\n  );\n  const shown = text ?? selected?.label ?? \"\";\n  // Nothing selected has nothing to clear, and the chevron comes back — the field\n  // keeps exactly one trailing control, so the \"×\" never crowds the value it sits on.\n  const showClear = Boolean(clearable && value != null && !inert);\n\n  // Focusing select-alls the current label; filtering only kicks in once the\n  // text actually differs from it, so an already-filled field still opens on\n  // the FULL list instead of a single-row \"filter\" of its own value.\n  const typedQuery = text !== null && text !== (selected?.label ?? \"\") ? text.trim() : \"\";\n  const query = isPhone ? sheetQuery.trim() : typedQuery;\n  // Folded as every kit list folds (DUP-5): accents off and the locale's case, so\n  // \"zurich\" finds Zürich and, in Turkish, \"ı\" finds \"IRMAK\".\n  const locale = useKitLocale();\n  const matches = useMemo(() => {\n    let ranked = options;\n    if (query) {\n      const q = foldForSearch(query, locale);\n      const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);\n      // The label's whole name or its start first (`rankMatch` 0 and 1), then a match\n      // anywhere in the label or the sublabel. Not the group (0.40, kk run 79): with\n      // first-letter groups one typed letter matched its whole group.\n      const leads = (o: ComboOption<V>) => {\n        const rank = rankMatch(o.label, query, { locale });\n        return rank === 0 || rank === 1;\n      };\n      const starts = options.filter(leads);\n      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel)));\n      ranked = [...starts, ...rest];\n    }\n    if (!ranked.some((o) => o.group)) return ranked;\n    // Keep each group contiguous so the headings below appear once instead of\n    // re-appearing every time the ranking interleaves two groups — while preserving\n    // \"best match first\": a Map keeps insertion order, so groups come out ordered by\n    // their best-ranked member and members keep their rank order inside the group.\n    const blocks = new Map<string, ComboOption<V>[]>();\n    for (const o of ranked) {\n      const key = o.group ?? \"\";\n      if (!blocks.has(key)) blocks.set(key, []);\n      blocks.get(key)!.push(o);\n    }\n    return [...blocks.values()].flat();\n  }, [options, query, locale]);\n\n  // The create row (`onCreate`), on the query as typed — not lowercased: it becomes a\n  // name. Compared against EVERY option, not `matches`: an exact hit anywhere is a\n  // record that exists, disabled or not. Restated from `text` rather than derived from\n  // `typedQuery`: this value is handed to the caller's `onCreate`, and the React\n  // Compiler cannot then keep `matches` memoised on anything it was derived from.\n  const createQuery = isPhone\n    ? sheetQuery.trim()\n    : text !== null && text !== (selected?.label ?? \"\")\n      ? text.trim()\n      : \"\";\n  const showCreate = offersCreate(\n    onCreate,\n    createQuery,\n    options.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const createText = createQuery ? labels.create(createQuery) : createEmptyLabel;\n  // Every row the keyboard can land on: the options, then the create row — passed over\n  // like a disabled option while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...matches, { disabled: createLocked }]\n    : matches;\n  const createIndex = matches.length;\n\n  // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own\n  // search box holds focus, so the field behind it must not claim to be pointing at\n  // one of them.\n  // A disabled row is never the keyboard's, even if the list changed under it.\n  const activeId = !isPhone && isOptionEnabled(rows[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n    setSheetQuery(\"\");\n  };\n  // See the twin above: a layer while the list SHOWS, and Escape puts the label back.\n  const showing = !isPhone && open && !inert && (matches.length > 0 || showCreate);\n  useDismissLayer(showing, () => {\n    setText(null);\n    close();\n  });\n  const take = (o: ComboOption<V>) => {\n    // A `disabled` option is listed, never taken — by any path; nor is anything while\n    // the field is locked.\n    if (o.disabled || locked) return;\n    if (o.value !== value) onChange(o.value);\n    setText(null);\n    close();\n  };\n  /** Turn loose text into a decision: empty clears, an exact label match that names\n   *  ONE entity commits, anything else reverts to the selected label.\n   *\n   *  Unique by VALUE, not by row. An option may deliberately appear twice — Keksdose\n   *  repeats recently-used categories in a \"Recent\" group at the top (live #203) — and\n   *  counting rows made every such option uncommittable: two hits, so nothing fired and\n   *  the field reverted to whatever was selected before. Typing a category you had just\n   *  used, then tabbing away, silently discarded it, and the more categories you used\n   *  the more of them stopped working. Two rows naming the same id are not an ambiguity;\n   *  two ids sharing a label are. */\n  const create = () => {\n    if (!onCreate || locked || createLocked) return;\n    onCreate(createQuery);\n    setText(null);\n    close();\n  };\n  const reconcile = () => {\n    // Locked, loose text is dropped rather than judged: nothing reaches `onChange`.\n    if (text !== null && !locked) {\n      const q = text.trim();\n      if (!q) {\n        if (value != null) onChange(clearValue);\n      } else {\n        // A disabled option's label typed out in full is not a way round `disabled`:\n        // it is not a hit, so the text reverts like any other non-answer.\n        const hits = options.filter(\n          (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),\n        );\n        const ids = new Set(hits.map((h) => h.value));\n        if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);\n      }\n    }\n    setText(null);\n    close();\n  };\n\n  // The create row's inside, one for both shells: a \"+\" (it is an action, not a record),\n  // the words, and — while a write lock holds it — the lock's reason as a second line.\n  // Both lines wrap from Large up (text size §10.17, round 0.34 T1): the words hold what\n  // the reader typed, which an ellipsis would cut.\n  const createRowContent = (\n    <>\n      <Plus aria-hidden className=\"size-4 shrink-0\" />\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate-until-large\">{createText}</span>\n        {createLocked && (\n          <span className=\"block truncate-until-large text-xs font-normal text-placeholder\">\n            {createReason}\n          </span>\n        )}\n      </span>\n    </>\n  );\n  // While locked the field sits in the reason's Tooltip — see Combobox.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n    // description, invalid or required state: those belong on the <input> below,\n    // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n    // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n    <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {/* A real <label for> — see {@link Combobox}; with a \"?\", in a row after the field. */}\n      {label !== undefined && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel htmlFor={fieldId} className={inert ? \"opacity-50\" : undefined}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          /* Inner wrapper for chevron centering — same reasoning as Combobox above.\n              It is also what the portalled list anchors to.\n              Dimmed as a whole when disabled (or locked), the way EntityCombobox dims its\n              trigger. FIELD_BASE's grey alone left a disabled picker looking like a\n              filled-in one beside the pickers that do dim (the label is not the input's\n              `peer`, so it is dimmed by hand above). */\n          <div ref={fieldRef} className={cn(\"relative\", inert && \"cursor-not-allowed opacity-50\")}>\n            <input\n              ref={ref}\n              id={fieldId}\n              value={shown}\n              placeholder={placeholder}\n              // The caller's name, over the <label for> above. Just the label, never\n              // \"label: value\" the way a trigger button has to compose it: an input\n              // already exposes its value separately.\n              aria-label={ariaLabel}\n              role=\"combobox\"\n              aria-expanded={open}\n              // Required by the role, and the half that was missing: the field said it\n              // was expanded and never said what it had expanded (ESLint's\n              // `role-has-required-aria-props`, the audit's §a11y).\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-autocomplete=\"list\"\n              aria-invalid={field.isInvalid || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              aria-required={ariaRequired}\n              autoComplete=\"off\"\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `lockedKeyDown`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || undefined}\n              aria-disabled={locked || undefined}\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n              autoFocus={autoFocus}\n              // `inputMode=\"none\"` rather than readOnly, for the same reason Combobox\n              // above gives: the sheet carries the keyboard, and a readOnly field would\n              // take FIELD_BASE's settled look on a field that is perfectly editable.\n              inputMode={isPhone ? \"none\" : undefined}\n              onMouseDown={primaryOnly.onMouseDown}\n              onFocus={(e) => {\n                // See {@link usePrimaryPressOnly}: a back/forward button lands here on\n                // its way to navigating, and neither the list nor the select-all is\n                // anything it asked for (live #309 rework). A locked field takes focus to\n                // say why, and opens nothing.\n                if (primaryOnly.fromAuxButton() || locked) return;\n                setText(shown);\n                e.currentTarget.select();\n                setOpen(true);\n                // The sheet has its own input; the field behind it must not also pull up\n                // the keyboard and scroll the page under the dialog.\n                if (isPhone) sheetInputRef.current?.focus();\n              }}\n              onBlur={() => {\n                // On a phone the blur is the SHEET taking focus, not the user leaving the\n                // field — reconciling there would close the sheet the instant it opened.\n                if (!isPhone) reconcile();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                setText(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                if (locked) return lockedKeyDown(e);\n                // Disabled rows are passed over; Up from \"nothing highlighted\" lands on\n                // the first takeable row, as it always landed on row 0. The create row is\n                // the last row the arrows reach.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  setOpen(true);\n                  setActive((i) => stepEnabled(rows, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  setActive((i) => (i < 0 ? stepEnabled(rows, -1, 1) : stepEnabled(rows, i, -1)));\n                } else if (e.key === \"Enter\") {\n                  // An IME's Enter takes nothing, and judges no loose text (BUG-9).\n                  if (isImeEnter(e)) return;\n                  if (open && isOptionEnabled(rows[active])) {\n                    e.preventDefault();\n                    if (active === createIndex && showCreate) create();\n                    else take(matches[active]);\n                  } else {\n                    reconcile();\n                  }\n                } else if (e.key === \"Escape\") {\n                  // A showing list takes the key and stops it — see the twin in\n                  // {@link Combobox} (round 0.34 BUG-1).\n                  if (showing && takeEscape(e)) return;\n                  setText(null);\n                  close();\n                } else if (e.key === \"Tab\") {\n                  // Focus is in THIS input and stays there, so the browser's own Tab is\n                  // left alone; all that is needed is that the list stop covering what\n                  // the user is tabbing to. `reconcile` rather than `close`, because\n                  // leaving the field is exactly when loose text has to be judged.\n                  reconcile();\n                }\n                // Home/End stay with the caret — see the note in {@link Combobox}: this\n                // field is editable, and its text is what `reconcile` judges.\n              }}\n              className={cn(\n                FIELD_BASE,\n                label !== undefined && FIELD_FLOATING_PAD,\n                \"pe-9\",\n                field.isInvalid && FIELD_INVALID,\n              )}\n            />\n            {showClear ? (\n              <button\n                type=\"button\"\n                // Out of the tab order, like the clear on `EntityCombobox`: the keyboard\n                // already clears this field by selecting its text and deleting, and a\n                // second stop between every picker and the next field is a worse trade\n                // than the one gesture it saves.\n                tabIndex={-1}\n                aria-label={labels.clear}\n                // preventDefault, exactly as the chevron does: without it the press\n                // focuses the input, which on a phone opens the sheet over the field the\n                // press was clearing.\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => {\n                  setText(null);\n                  close();\n                  if (!locked) onChange(clearValue);\n                }}\n                className={cn(\n                  \"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder\",\n                  \"hover:text-secondary\",\n                )}\n              >\n                <X aria-hidden className=\"size-4\" />\n              </button>\n            ) : (\n              <ChevronDown\n                aria-hidden\n                onMouseDown={(e) => {\n                  // Toggle on the chevron without stealing focus from the input — and\n                  // not at all on a disabled or locked field, which the input's own\n                  // `disabled`/`readOnly` does not stop from here.\n                  e.preventDefault();\n                  if (!inert) setOpen((o) => !o);\n                }}\n                className={cn(\n                  \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n                  // The box above does the dimming; dimming here too would halve it again.\n                  !inert && \"cursor-pointer\",\n                )}\n              />\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel htmlFor={fieldId} className={cn(LABEL_IN_ROW, inert && \"opacity-50\")}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {isPhone && (\n        <PickerSheet\n          open={open && !inert}\n          // Closing without choosing keeps the value: `text` was never emptied, so\n          // reconcile has nothing to undo — it just puts the label back.\n          onClose={reconcile}\n          title={sheetTitle ?? label}\n          query={sheetQuery}\n          onQueryChange={(v) => {\n            setSheetQuery(v);\n            setActive(-1);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder ?? labels.search}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul id={listboxId} role=\"listbox\">\n            {matches.map((o, i) => (\n              // Keyed by group AND value, like combobox-core.tsx: an option may\n              // deliberately appear twice (see `reconcile`), and a bare value key\n              // would collide.\n              <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                {o.group && o.group !== matches[i - 1]?.group && (\n                  <li\n                    role=\"presentation\"\n                    className={cn(\n                      GROUP_HEADING_STICKY,\n                      \"px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                <li role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={o.value === value}\n                    aria-disabled={o.disabled || undefined}\n                    onClick={() => take(o)}\n                    className={cn(\n                      SHEET_ROW_CLASS,\n                      o.value === value && \"font-medium\",\n                      o.disabled && DISABLED_ROW_CLASS,\n                    )}\n                  >\n                    {o.label}\n                  </button>\n                </li>\n              </Fragment>\n            ))}\n            {showCreate && (\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  // An action, never chosen — see `onCreate`.\n                  aria-selected={false}\n                  aria-disabled={createLocked || undefined}\n                  onClick={create}\n                  className={cn(\n                    SHEET_ROW_CLASS,\n                    CREATE_ROW_CLASS,\n                    createLocked && DISABLED_ROW_CLASS,\n                  )}\n                >\n                  {createRowContent}\n                </button>\n              </li>\n            )}\n            {/* \"Nothing matched\" only when there is nothing to do either: with a create\n                row the list is not empty, it is offering to fill itself. */}\n            {matches.length === 0 && !showCreate && (\n              <li className=\"px-4 py-3 text-sm text-muted\">{labels.noResults}</li>\n            )}\n          </ul>\n        </PickerSheet>\n      )}\n      {showing && (\n        <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n          {matches.map((o, i) => (\n            // A group heading is emitted at each group boundary rather than repeating\n            // the group on every row (feedback #136). `matches` is group-contiguous,\n            // so comparing with the previous row is enough. Fragment key sits here;\n            // the heading and the option carry their own list semantics — keyed by\n            // group AND value, because an option may deliberately appear twice (see\n            // `reconcile`).\n            <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n              {o.group && o.group !== matches[i - 1]?.group && (\n                <li\n                  role=\"presentation\"\n                  className={cn(\n                    GROUP_HEADING_STICKY,\n                    \"px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1\",\n                  )}\n                >\n                  {o.group}\n                </li>\n              )}\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  id={optionId(i)}\n                  // See {@link Combobox}: the role rides the button, `aria-selected`\n                  // is the CHOSEN row, and the keyboard's row is the field's\n                  // `aria-activedescendant`.\n                  role=\"option\"\n                  aria-selected={o.value === value}\n                  aria-disabled={o.disabled || undefined}\n                  tabIndex={-1}\n                  onMouseDown={(e) => {\n                    // mousedown (not click) so the input's blur can't close the\n                    // list before the selection registers. Prevented on a disabled\n                    // row too, so pressing one leaves the field focused and open.\n                    e.preventDefault();\n                    take(o);\n                  }}\n                  onMouseEnter={() => {\n                    if (!o.disabled) setActive(i);\n                  }}\n                  className={cn(\n                    rowClass(i === active && !o.disabled),\n                    o.disabled && DISABLED_ROW_CLASS,\n                    // Indented under its heading, so the hierarchy is readable at a\n                    // glance instead of inferred from grey trailing text.\n                    o.group && \"ps-6\",\n                    o.value === value && \"font-medium\",\n                  )}\n                >\n                  {o.label}\n                  {o.sublabel && (\n                    <span className=\"ms-2 text-xs text-placeholder\">\n                      {o.sublabel}\n                    </span>\n                  )}\n                </button>\n              </li>\n            </Fragment>\n          ))}\n          {showCreate && (\n            <li role=\"presentation\">\n              <button\n                type=\"button\"\n                id={optionId(createIndex)}\n                role=\"option\"\n                // An action, never chosen; whether the keyboard is ON it is the field's\n                // `aria-activedescendant`'s to say.\n                aria-selected={false}\n                aria-disabled={createLocked || undefined}\n                tabIndex={-1}\n                onMouseDown={(e) => {\n                  // mousedown, like the rows above: the input's blur would otherwise\n                  // reconcile and close the list before the click landed.\n                  e.preventDefault();\n                  create();\n                }}\n                onMouseEnter={() => {\n                  if (!createLocked) setActive(createIndex);\n                }}\n                className={cn(\n                  rowClass(active === createIndex && !createLocked),\n                  CREATE_ROW_CLASS,\n                  createLocked && DISABLED_ROW_CLASS,\n                )}\n              >\n                {createRowContent}\n              </button>\n            </li>\n          )}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment","rest"]}
+{"version":3,"sources":["../../src/components/inline-entity-combobox.tsx"],"sourcesContent":["// The id-keyed sibling of Combobox. Moved out of combobox.tsx as it was (MOD-9,\n// refactor audit 2026-10); combobox still exports `InlineEntityCombobox` and its props.\nimport { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown, Plus, X } from \"lucide-react\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { useDropdown } from \"./dropdown\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { isQuietFocus } from \"../lib/quiet-focus\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  offersCreate,\n  stepEnabled,\n  useActiveOptionScroll,\n  type ComboClearValue,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { foldForSearch, rankMatch } from \"../lib/text-match\";\nimport {\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 { hasContent } from \"../lib/presence\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { lockedKeyDown, rowClass, SuggestionList, usePrimaryPressOnly } from \"./combobox-suggestions\";\n\n/** {@link InlineEntityCombobox}'s create row over the shared row look: in the brand\n *  colour {@link Combobox}'s own create row wears, with a leading \"+\" as the panel\n *  pickers' has — an action at the foot of the list, not one more record. */\nconst CREATE_ROW_CLASS = \"flex items-center gap-2 font-medium text-brand\";\n\n/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}\n *  for why the div's spellings of them are omitted. */\nexport interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\">,\n    FieldHelpProps {\n  /** Selected option id; `null` or `clearValue` when nothing is selected. */\n  value: V | C | null;\n  /** Required and unanswered — see {@link Combobox}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value — see {@link Combobox}'s `error`. */\n  error?: ReactNode;\n  /** Standing advice — see {@link Combobox}'s `hint` (keksdose K4). */\n  hint?: ReactNode;\n  /** A picked/typed option emits its id; emptying the field, or the \"×\", emits\n   *  `clearValue`. */\n  onChange: (v: V | C) => void;\n  /** What a clear emits — `null` by default, `\"\"` for a schema that wants an empty\n   *  string. See {@link EntityCombobox}'s `clearValue`. */\n  clearValue?: C;\n  options: ComboOption<V>[];\n  /** The visible label — see {@link Combobox}'s `label` (a ReactNode since 0.34, API-9). */\n  label?: ReactNode;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`\n   *  below, open the list with it. A click-the-value editor needs it: the cell\n   *  the user clicked names the field the editor should land the caret in, and\n   *  without a passthrough this component's fixed prop list puts the `<input>`\n   *  out of a caller's reach entirely (Keksdose feedback live #218). */\n  autoFocus?: boolean;\n  /** Phone sheet only — the anchored list has the field itself to type in. Falls\n   *  back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */\n  searchPlaceholder?: string;\n  /** Phone sheet only: a full screen showing nothing has to say why. The anchored\n   *  list simply does not open. Default: `combobox.noResults` from the provider. */\n  emptyLabel?: string;\n  closeLabel?: string;\n  /** The phone sheet's heading (and, as a string, its accessible name) for a field\n   *  whose label is drawn by someone else — a bound field's label;\n   *  `RhfInlineEntityCombobox` hands its label over here (0.24). Default: `label`.\n   *  See {@link Combobox}'s `sheetTitle`. */\n  sheetTitle?: ReactNode;\n  /** Offer a clear \"×\" in place of the chevron whenever something is selected.\n   *\n   *  Emptying the text already clears (see {@link reconcile}), and on a desktop that\n   *  is the fast way. It is not a way at all on a PHONE: touching the field opens the\n   *  full-screen sheet, which covers the very input the text would have been deleted\n   *  from — so a field that had been answered could not be UNanswered by any gesture\n   *  the screen offered (Keksdose live #236, filed from a phone). The \"×\" is the one\n   *  affordance both shells share, and it clears without opening anything. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker\n   * that SAVES on change. keksdose G2: the statement review's account picker IS the\n   * write (picking re-runs the duplicate check on the server), and on the read-only demo\n   * the app wrapped it in a hand-made Tooltip over a native `disabled` — out of the tab\n   * order, so the reason never reached a keyboard.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey), opens no list or sheet, offers no clear \"×\", and no pick, typed\n   * label or clear reaches `onChange`; the reason is in the kit {@link Tooltip} and on\n   * the input's `aria-describedby`. Wins over `disabled`. Use it CONTROLLED, as the\n   * component always is: the shown label is `value`'s.\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  /**\n   * A last row that makes a new record from what was typed — keksdose G9, whose \"Create\n   * cash account\" had to become a separate button because this picker had no such row.\n   *\n   * Shown while the typed query is non-empty and names no option exactly\n   * (case-insensitive — an exact hit is a record the list already shows), worded\n   * `createLabel(query)`, default `combobox.create`: \"Create “{query}”\". The arrow keys\n   * reach it like an option; Enter or a click calls `onCreate(query)` and closes the\n   * list. Making the record, and then passing its id as `value`, is the caller's: the\n   * field shows the old selection until it does.\n   *\n   * The same rule as {@link EntityCombobox}'s `onCreate`, so the family agrees. It is a\n   * row of the LIST, not an option: it is never `aria-selected`, never matched by a\n   * typed label on blur, and never sorted among the records the way a sentinel option\n   * would be (the reason keksdose gave for the separate button).\n   */\n  onCreate?: (query: string) => void;\n  /** The create row's words for a query. Default: `combobox.create` from the\n   *  {@link UiKitProvider}, else English `Create “{query}”`. */\n  createLabel?: (query: string) => string;\n  /**\n   * Offer the create row with NOTHING typed too, worded as this — keksdose's \"Create cash\n   * account\", which mints an account under a default name and so needs no query.\n   * `onCreate` then receives `\"\"`, and the caller supplies the name. Left out, the row\n   * needs a query.\n   *\n   * One string rather than a switch: a row with no query has nothing to quote, so the\n   * kit cannot word it — \"Create “”\" says nothing — and naming it is what turns it on.\n   * With both, one handler serves both rows:\n   *\n   * ```tsx\n   * onCreate={(name) => createCash(name || t(\"cash_account_default_name\"))}\n   * createEmptyLabel={t(\"create_cash_account\")}\n   * ```\n   */\n  createEmptyLabel?: string;\n  /**\n   * The create row WRITES while picking does not — keksdose dev#496: on the read-only\n   * demo choosing the cash account is draft state and stays live, minting one is a\n   * write. Under a locked {@link WriteLockProvider} the row stays in the list, dimmed and\n   * passed over by the arrows, with the lock's reason as its second line (a hover is the\n   * one explanation a phone cannot show), and `onCreate` is not called. Not needed with\n   * `commit`: a locked field opens no list at all.\n   */\n  createCommit?: CommitScope;\n  /**\n   * The `<input>` — the focusable control, the one a reader types in — as a React 19\n   * ref prop (0.24, kastlan). Its account picker is this component inside an\n   * `RhfField` render, and react-hook-form's focus-on-error calls `focus()` on whatever\n   * `field.ref` is handed: with no ref there was nothing to hand it, so a line-item form\n   * whose account was missing failed its submit and left the caret where it was. Pass\n   * `field.ref` here, or use `RhfInlineEntityCombobox`, which does. The wrapper is not\n   * reachable this way — focus and selection are the input's. See {@link Combobox}'s `ref`.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input\n * with the shared field styling, chevron and inline as-you-type filtering) but\n * the value is an option id, not free text. Built so an entity picker can sit\n * next to a free-text combobox without any visible difference — a button-trigger\n * panel picker ({@link EntityCombobox}) never matches an input field exactly.\n *\n * Text-vs-value reconciliation: the input's text is transient. Picking a row or\n * typing an exact (unique) label commits that option; emptying the text commits\n * a clear; anything else reverts to the selected option's label on blur/Escape.\n *\n * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}\n * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto\n * this component and must not lose its sheet). The sheet carries its OWN query state\n * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a\n * sheet that emptied it to show the full list would read as \"the user cleared the\n * field\" the moment it closed.\n */\nexport function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>(\n  props: InlineEntityComboboxProps<V, C>,\n) {\n  const {\n    value: rawValue,\n    onChange,\n    clearValue = null as C,\n    options,\n    label,\n    id,\n    placeholder,\n    className,\n    disabled,\n    autoFocus,\n    searchPlaceholder,\n    emptyLabel,\n    closeLabel,\n    sheetTitle,\n    clearable,\n    clearLabel,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    invalid,\n    error,\n    hint,\n    help,\n    ref,\n    \"aria-label\": ariaLabel,\n    // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s\n    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and\n    // on the wrapper div the hint and required state described nothing.\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  // The clear value reads as \"nothing selected\", whichever one the caller picked —\n  // so from here down `value` is the id or `null`, as it always was.\n  const value: V | null = rawValue == null || rawValue === clearValue ? null : (rawValue as V);\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // See the twin above on why these hang off the generated id.\n  const listboxId = `${generated}-listbox`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const isPhone = usePhoneLayout();\n  // See the twin above: the phone sheet owns its own Back entry (live #309), and the\n  // Escape layer is this field's own.\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });\n  const primaryOnly = usePrimaryPressOnly();\n  // The field took the tour's quiet focus (§11.8) and has not opened since.\n  const quietRef = useRef(false);\n  const [active, setActive] = useState(-1);\n  // null = not editing → the input shows the selected option's label.\n  const [text, setText] = useState<string | null>(null);\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — see {@link SuggestionList}.\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // The sheet's search box. Starts empty on every open, so a field that already\n  // holds a value still offers the whole list — the shape a native <select> has\n  // on a phone, and what the anchored panel gets from `query` below.\n  const [sheetQuery, setSheetQuery] = useState(\"\");\n  // Props first, provider second — see `EntityCombobox`. `emptyLabel` used to render\n  // nothing when omitted, which left a phone user staring at a blank full-screen\n  // sheet; now an omitted one says \"No results\" in the provider's language.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  // The lock (see `lockedKeyDown` above). A lock arriving mid-edit closes the list and\n  // drops the loose text, adjusted while rendering: nothing typed before it may be\n  // judged by `reconcile` after it.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  if (locked && (open || text !== null)) {\n    setOpen(false);\n    setText(null);\n  }\n  // The create row's own lock (`createCommit`): the list stays live, the row does not.\n  const createReason = useCommitReason(createCommit, undefined);\n  const createLocked = hasContent(createReason);\n\n  const selected = useMemo(\n    () => (value == null ? null : (options.find((o) => o.value === value) ?? null)),\n    [options, value],\n  );\n  const shown = text ?? selected?.label ?? \"\";\n  // Nothing selected has nothing to clear, and the chevron comes back — the field\n  // keeps exactly one trailing control, so the \"×\" never crowds the value it sits on.\n  const showClear = Boolean(clearable && value != null && !inert);\n\n  // Focusing select-alls the current label; filtering only kicks in once the\n  // text actually differs from it, so an already-filled field still opens on\n  // the FULL list instead of a single-row \"filter\" of its own value.\n  const typedQuery = text !== null && text !== (selected?.label ?? \"\") ? text.trim() : \"\";\n  const query = isPhone ? sheetQuery.trim() : typedQuery;\n  // Folded as every kit list folds (DUP-5): accents off and the locale's case, so\n  // \"zurich\" finds Zürich and, in Turkish, \"ı\" finds \"IRMAK\".\n  const locale = useKitLocale();\n  const matches = useMemo(() => {\n    let ranked = options;\n    if (query) {\n      const q = foldForSearch(query, locale);\n      const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);\n      // The label's whole name or its start first (`rankMatch` 0 and 1), then a match\n      // anywhere in the label or the sublabel. Not the group (0.40, kk run 79): with\n      // first-letter groups one typed letter matched its whole group.\n      const leads = (o: ComboOption<V>) => {\n        const rank = rankMatch(o.label, query, { locale });\n        return rank === 0 || rank === 1;\n      };\n      const starts = options.filter(leads);\n      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel)));\n      ranked = [...starts, ...rest];\n    }\n    if (!ranked.some((o) => o.group)) return ranked;\n    // Keep each group contiguous so the headings below appear once instead of\n    // re-appearing every time the ranking interleaves two groups — while preserving\n    // \"best match first\": a Map keeps insertion order, so groups come out ordered by\n    // their best-ranked member and members keep their rank order inside the group.\n    const blocks = new Map<string, ComboOption<V>[]>();\n    for (const o of ranked) {\n      const key = o.group ?? \"\";\n      if (!blocks.has(key)) blocks.set(key, []);\n      blocks.get(key)!.push(o);\n    }\n    return [...blocks.values()].flat();\n  }, [options, query, locale]);\n\n  // The create row (`onCreate`), on the query as typed — not lowercased: it becomes a\n  // name. Compared against EVERY option, not `matches`: an exact hit anywhere is a\n  // record that exists, disabled or not. Restated from `text` rather than derived from\n  // `typedQuery`: this value is handed to the caller's `onCreate`, and the React\n  // Compiler cannot then keep `matches` memoised on anything it was derived from.\n  const createQuery = isPhone\n    ? sheetQuery.trim()\n    : text !== null && text !== (selected?.label ?? \"\")\n      ? text.trim()\n      : \"\";\n  const showCreate = offersCreate(\n    onCreate,\n    createQuery,\n    options.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const createText = createQuery ? labels.create(createQuery) : createEmptyLabel;\n  // Every row the keyboard can land on: the options, then the create row — passed over\n  // like a disabled option while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...matches, { disabled: createLocked }]\n    : matches;\n  const createIndex = matches.length;\n\n  // Pointer-device only: the phone's rows live in a {@link PickerSheet} whose own\n  // search box holds focus, so the field behind it must not claim to be pointing at\n  // one of them.\n  // A disabled row is never the keyboard's, even if the list changed under it.\n  const activeId = !isPhone && isOptionEnabled(rows[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n    setSheetQuery(\"\");\n  };\n  // See the twin above: a layer while the list SHOWS, and Escape puts the label back.\n  const showing = !isPhone && open && !inert && (matches.length > 0 || showCreate);\n  useDismissLayer(showing, () => {\n    setText(null);\n    close();\n  });\n  const take = (o: ComboOption<V>) => {\n    // A `disabled` option is listed, never taken — by any path; nor is anything while\n    // the field is locked.\n    if (o.disabled || locked) return;\n    if (o.value !== value) onChange(o.value);\n    setText(null);\n    close();\n  };\n  /** Turn loose text into a decision: empty clears, an exact label match that names\n   *  ONE entity commits, anything else reverts to the selected label.\n   *\n   *  Unique by VALUE, not by row. An option may deliberately appear twice — Keksdose\n   *  repeats recently-used categories in a \"Recent\" group at the top (live #203) — and\n   *  counting rows made every such option uncommittable: two hits, so nothing fired and\n   *  the field reverted to whatever was selected before. Typing a category you had just\n   *  used, then tabbing away, silently discarded it, and the more categories you used\n   *  the more of them stopped working. Two rows naming the same id are not an ambiguity;\n   *  two ids sharing a label are. */\n  const create = () => {\n    if (!onCreate || locked || createLocked) return;\n    onCreate(createQuery);\n    setText(null);\n    close();\n  };\n  const reconcile = () => {\n    // Locked, loose text is dropped rather than judged: nothing reaches `onChange`.\n    if (text !== null && !locked) {\n      const q = text.trim();\n      if (!q) {\n        if (value != null) onChange(clearValue);\n      } else {\n        // A disabled option's label typed out in full is not a way round `disabled`:\n        // it is not a hit, so the text reverts like any other non-answer.\n        const hits = options.filter(\n          (o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase(),\n        );\n        const ids = new Set(hits.map((h) => h.value));\n        if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);\n      }\n    }\n    setText(null);\n    close();\n  };\n\n  // The create row's inside, one for both shells: a \"+\" (it is an action, not a record),\n  // the words, and — while a write lock holds it — the lock's reason as a second line.\n  // Both lines wrap from Large up (text size §10.17, round 0.34 T1): the words hold what\n  // the reader typed, which an ellipsis would cut.\n  const createRowContent = (\n    <>\n      <Plus aria-hidden className=\"size-4 shrink-0\" />\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate-until-large\">{createText}</span>\n        {createLocked && (\n          <span className=\"block truncate-until-large text-xs font-normal text-placeholder\">\n            {createReason}\n          </span>\n        )}\n      </span>\n    </>\n  );\n  // While locked the field sits in the reason's Tooltip — see Combobox.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,\n    // description, invalid or required state: those belong on the <input> below,\n    // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the\n    // handlers carrying live #309 and dev#549 cannot be replaced from outside.\n    <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n      {/* A real <label for> — see {@link Combobox}; with a \"?\", in a row after the field. */}\n      {label !== undefined && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel htmlFor={fieldId} className={inert ? \"opacity-50\" : undefined}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          /* Inner wrapper for chevron centering — same reasoning as Combobox above.\n              It is also what the portalled list anchors to.\n              Dimmed as a whole when disabled (or locked), the way EntityCombobox dims its\n              trigger. FIELD_BASE's grey alone left a disabled picker looking like a\n              filled-in one beside the pickers that do dim (the label is not the input's\n              `peer`, so it is dimmed by hand above). */\n          <div ref={fieldRef} className={cn(\"relative\", inert && \"cursor-not-allowed opacity-50\")}>\n            <input\n              ref={ref}\n              id={fieldId}\n              value={shown}\n              placeholder={placeholder}\n              // The caller's name, over the <label for> above. Just the label, never\n              // \"label: value\" the way a trigger button has to compose it: an input\n              // already exposes its value separately.\n              aria-label={ariaLabel}\n              role=\"combobox\"\n              aria-expanded={open}\n              // Required by the role, and the half that was missing: the field said it\n              // was expanded and never said what it had expanded (ESLint's\n              // `role-has-required-aria-props`, the audit's §a11y).\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-autocomplete=\"list\"\n              aria-invalid={field.isInvalid || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              aria-required={ariaRequired}\n              autoComplete=\"off\"\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `lockedKeyDown`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || undefined}\n              aria-disabled={locked || undefined}\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n              autoFocus={autoFocus}\n              // `inputMode=\"none\"` rather than readOnly, for the same reason Combobox\n              // above gives: the sheet carries the keyboard, and a readOnly field would\n              // take FIELD_BASE's settled look on a field that is perfectly editable.\n              inputMode={isPhone ? \"none\" : undefined}\n              onMouseDown={primaryOnly.onMouseDown}\n              onFocus={(e) => {\n                // See {@link usePrimaryPressOnly}: a back/forward button lands here on\n                // its way to navigating, and neither the list nor the select-all is\n                // anything it asked for (live #309 rework). A locked field takes focus to\n                // say why, and opens nothing.\n                if (primaryOnly.fromAuxButton() || locked) return;\n                setText(shown);\n                // The tour's focus on arrival (§11.8) opens nothing: the list would cover\n                // its card (0.50.1). A click, ArrowDown or typing opens it.\n                if (isQuietFocus(e.currentTarget)) {\n                  quietRef.current = true;\n                  return;\n                }\n                e.currentTarget.select();\n                setOpen(true);\n                // The sheet has its own input; the field behind it must not also pull up\n                // the keyboard and scroll the page under the dialog.\n                if (isPhone) sheetInputRef.current?.focus();\n              }}\n              // After a quiet focus, the person's click on the already-focused field\n              // fires no `focus`: the click is their \"open\" instead.\n              onClick={() => {\n                if (!quietRef.current || locked) return;\n                quietRef.current = false;\n                setOpen(true);\n              }}\n              onBlur={() => {\n                quietRef.current = false;\n                // On a phone the blur is the SHEET taking focus, not the user leaving the\n                // field — reconciling there would close the sheet the instant it opened.\n                if (!isPhone) reconcile();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                setText(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                if (locked) return lockedKeyDown(e);\n                // Disabled rows are passed over; Up from \"nothing highlighted\" lands on\n                // the first takeable row, as it always landed on row 0. The create row is\n                // the last row the arrows reach.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  setOpen(true);\n                  setActive((i) => stepEnabled(rows, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  setActive((i) => (i < 0 ? stepEnabled(rows, -1, 1) : stepEnabled(rows, i, -1)));\n                } else if (e.key === \"Enter\") {\n                  // An IME's Enter takes nothing, and judges no loose text (BUG-9).\n                  if (isImeEnter(e)) return;\n                  if (open && isOptionEnabled(rows[active])) {\n                    e.preventDefault();\n                    if (active === createIndex && showCreate) create();\n                    else take(matches[active]);\n                  } else {\n                    reconcile();\n                  }\n                } else if (e.key === \"Escape\") {\n                  // A showing list takes the key and stops it — see the twin in\n                  // {@link Combobox} (round 0.34 BUG-1).\n                  if (showing && takeEscape(e)) return;\n                  setText(null);\n                  close();\n                } else if (e.key === \"Tab\") {\n                  // Focus is in THIS input and stays there, so the browser's own Tab is\n                  // left alone; all that is needed is that the list stop covering what\n                  // the user is tabbing to. `reconcile` rather than `close`, because\n                  // leaving the field is exactly when loose text has to be judged.\n                  reconcile();\n                }\n                // Home/End stay with the caret — see the note in {@link Combobox}: this\n                // field is editable, and its text is what `reconcile` judges.\n              }}\n              className={cn(\n                FIELD_BASE,\n                label !== undefined && FIELD_FLOATING_PAD,\n                \"pe-9\",\n                field.isInvalid && FIELD_INVALID,\n              )}\n            />\n            {showClear ? (\n              <button\n                type=\"button\"\n                // Out of the tab order, like the clear on `EntityCombobox`: the keyboard\n                // already clears this field by selecting its text and deleting, and a\n                // second stop between every picker and the next field is a worse trade\n                // than the one gesture it saves.\n                tabIndex={-1}\n                aria-label={labels.clear}\n                // preventDefault, exactly as the chevron does: without it the press\n                // focuses the input, which on a phone opens the sheet over the field the\n                // press was clearing.\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => {\n                  setText(null);\n                  close();\n                  if (!locked) onChange(clearValue);\n                }}\n                className={cn(\n                  \"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder\",\n                  \"hover:text-secondary\",\n                )}\n              >\n                <X aria-hidden className=\"size-4\" />\n              </button>\n            ) : (\n              <ChevronDown\n                aria-hidden\n                onMouseDown={(e) => {\n                  // Toggle on the chevron without stealing focus from the input — and\n                  // not at all on a disabled or locked field, which the input's own\n                  // `disabled`/`readOnly` does not stop from here.\n                  e.preventDefault();\n                  if (!inert) setOpen((o) => !o);\n                }}\n                className={cn(\n                  \"absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\",\n                  // The box above does the dimming; dimming here too would halve it again.\n                  !inert && \"cursor-pointer\",\n                )}\n              />\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel htmlFor={fieldId} className={cn(LABEL_IN_ROW, inert && \"opacity-50\")}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {isPhone && (\n        <PickerSheet\n          open={open && !inert}\n          // Closing without choosing keeps the value: `text` was never emptied, so\n          // reconcile has nothing to undo — it just puts the label back.\n          onClose={reconcile}\n          title={sheetTitle ?? label}\n          query={sheetQuery}\n          onQueryChange={(v) => {\n            setSheetQuery(v);\n            setActive(-1);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder ?? labels.search}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul id={listboxId} role=\"listbox\">\n            {matches.map((o, i) => (\n              // Keyed by group AND value, like combobox-core.tsx: an option may\n              // deliberately appear twice (see `reconcile`), and a bare value key\n              // would collide.\n              <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                {o.group && o.group !== matches[i - 1]?.group && (\n                  <li\n                    role=\"presentation\"\n                    className={cn(\n                      GROUP_HEADING_STICKY,\n                      \"px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                <li role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={o.value === value}\n                    aria-disabled={o.disabled || undefined}\n                    onClick={() => take(o)}\n                    className={cn(\n                      SHEET_ROW_CLASS,\n                      o.value === value && \"font-medium\",\n                      o.disabled && DISABLED_ROW_CLASS,\n                    )}\n                  >\n                    {o.label}\n                  </button>\n                </li>\n              </Fragment>\n            ))}\n            {showCreate && (\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  // An action, never chosen — see `onCreate`.\n                  aria-selected={false}\n                  aria-disabled={createLocked || undefined}\n                  onClick={create}\n                  className={cn(\n                    SHEET_ROW_CLASS,\n                    CREATE_ROW_CLASS,\n                    createLocked && DISABLED_ROW_CLASS,\n                  )}\n                >\n                  {createRowContent}\n                </button>\n              </li>\n            )}\n            {/* \"Nothing matched\" only when there is nothing to do either: with a create\n                row the list is not empty, it is offering to fill itself. */}\n            {matches.length === 0 && !showCreate && (\n              <li className=\"px-4 py-3 text-sm text-muted\">{labels.noResults}</li>\n            )}\n          </ul>\n        </PickerSheet>\n      )}\n      {showing && (\n        <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n          {matches.map((o, i) => (\n            // A group heading is emitted at each group boundary rather than repeating\n            // the group on every row (feedback #136). `matches` is group-contiguous,\n            // so comparing with the previous row is enough. Fragment key sits here;\n            // the heading and the option carry their own list semantics — keyed by\n            // group AND value, because an option may deliberately appear twice (see\n            // `reconcile`).\n            <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n              {o.group && o.group !== matches[i - 1]?.group && (\n                <li\n                  role=\"presentation\"\n                  className={cn(\n                    GROUP_HEADING_STICKY,\n                    \"px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1\",\n                  )}\n                >\n                  {o.group}\n                </li>\n              )}\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  id={optionId(i)}\n                  // See {@link Combobox}: the role rides the button, `aria-selected`\n                  // is the CHOSEN row, and the keyboard's row is the field's\n                  // `aria-activedescendant`.\n                  role=\"option\"\n                  aria-selected={o.value === value}\n                  aria-disabled={o.disabled || undefined}\n                  tabIndex={-1}\n                  onMouseDown={(e) => {\n                    // mousedown (not click) so the input's blur can't close the\n                    // list before the selection registers. Prevented on a disabled\n                    // row too, so pressing one leaves the field focused and open.\n                    e.preventDefault();\n                    take(o);\n                  }}\n                  onMouseEnter={() => {\n                    if (!o.disabled) setActive(i);\n                  }}\n                  className={cn(\n                    rowClass(i === active && !o.disabled),\n                    o.disabled && DISABLED_ROW_CLASS,\n                    // Indented under its heading, so the hierarchy is readable at a\n                    // glance instead of inferred from grey trailing text.\n                    o.group && \"ps-6\",\n                    o.value === value && \"font-medium\",\n                  )}\n                >\n                  {o.label}\n                  {o.sublabel && (\n                    <span className=\"ms-2 text-xs text-placeholder\">\n                      {o.sublabel}\n                    </span>\n                  )}\n                </button>\n              </li>\n            </Fragment>\n          ))}\n          {showCreate && (\n            <li role=\"presentation\">\n              <button\n                type=\"button\"\n                id={optionId(createIndex)}\n                role=\"option\"\n                // An action, never chosen; whether the keyboard is ON it is the field's\n                // `aria-activedescendant`'s to say.\n                aria-selected={false}\n                aria-disabled={createLocked || undefined}\n                tabIndex={-1}\n                onMouseDown={(e) => {\n                  // mousedown, like the rows above: the input's blur would otherwise\n                  // reconcile and close the list before the click landed.\n                  e.preventDefault();\n                  create();\n                }}\n                onMouseEnter={() => {\n                  if (!createLocked) setActive(createIndex);\n                }}\n                className={cn(\n                  rowClass(active === createIndex && !createLocked),\n                  CREATE_ROW_CLASS,\n                  createLocked && DISABLED_ROW_CLASS,\n                )}\n              >\n                {createRowContent}\n              </button>\n            </li>\n          )}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment","rest"]}

package/dist/components/modal.js

@@ -137,6 +137,7 @@ function ModalPanel({
       "div",
       {
         "aria-hidden": exiting || void 0,
+        "data-kit-layer": "backdrop",
         className: cn(
           // Live #320. The panel below rises only where it is bottom-anchored: from md up
           // it is centred, and a centred box sliding up from off-screen reads as a