@eifi1/ui-kit 0.50.0 → 0.50.1

package/README.md

@@ -568,26 +568,26 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**2188 names from 361 modules** — 1014 values and 1174 types. _Italic_ is a type-only export.
+**2189 names from 361 modules** — 1014 values and 1175 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 2188 |
+| `@eifi1/ui-kit` | 2189 |
 | `@eifi1/ui-kit/chart` | 100 |
 | `@eifi1/ui-kit/shell` | 117 |
 | `@eifi1/ui-kit/data-table` | 56 |
 | `@eifi1/ui-kit/wizard` | 25 |
-| `@eifi1/ui-kit/tour` | 48 |
+| `@eifi1/ui-kit/tour` | 49 |
 | `@eifi1/ui-kit/feedback` | 212 |
 | `@eifi1/ui-kit/search` | 23 |
 | `@eifi1/ui-kit/dates` | 22 |
 | `@eifi1/ui-kit/table-text` | 14 |
 | `@eifi1/ui-kit/currencies` | 3 |
 | `@eifi1/ui-kit/eslint` | 1 |
-| `@eifi1/ui-kit/testing` | 11 |
+| `@eifi1/ui-kit/testing` | 15 |
 | `@eifi1/ui-kit/testing/react` | 2 |
 | `@eifi1/ui-kit/rhf` | 48 |
 | `@eifi1/ui-kit/offline` | 33 |
@@ -930,7 +930,7 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `tour/tour` | `DEFAULT_TOUR_LABELS`, `TourProvider`, `useTour`, `useTourOptional`, _`TourAt`_, _`TourCompletion`_, _`TourLabels`_, _`TourLauncher`_, _`TourPlacement`_, _`TourStart`_, _`TourStep`_, _`TourStepContext`_ |
+| `tour/tour` | `DEFAULT_TOUR_LABELS`, `TourProvider`, `useTour`, `useTourOptional`, _`TourAt`_, _`TourCompletion`_, _`TourEngine`_, _`TourLabels`_, _`TourLauncher`_, _`TourPlacement`_, _`TourStart`_, _`TourStep`_, _`TourStepContext`_ |
 | `tour/tour-catalogue` | `DEFAULT_TOUR_CATALOGUE_LABELS`, `TourCatalogue`, `TourCatalogueCard`, _`TourCatalogueCardProps`_, _`TourCatalogueLabels`_, _`TourCatalogueProps`_ |
 | `tour/tour-info` | `doneCount`, `earnedPoints`, `isTourDone`, `isTourNew`, `isTourReset`, _`TourCompletions`_, _`TourGroup`_, _`TourInfo`_, _`TourUpdate`_ |
 | `tour/use-tour-progress` | `completeTour`, `resetTourProgress`, `signOutTourProgress`, `useTourProgress`, _`TourProgress`_, _`TourProgressAccount`_, _`TourProgressAdopt`_, _`TourProgressBody`_, _`UseTourProgressOptions`_ |

package/dist/components/autocomplete.js

@@ -8,6 +8,7 @@ import { Spinner } from "./spinner.js";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
 import { isImeEnter } from "../lib/ime.js";
+import { isQuietFocus } from "../lib/quiet-focus.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
 import {
   ComboboxFieldLabel,
@@ -87,6 +88,7 @@ function Autocomplete(props) {
   const field = useFieldError(error, invalid, hintParts.describedBy, rest["aria-invalid"]);
   const [ownOpen, setOwnOpen] = useState(false);
   const open = openProp ?? ownOpen;
+  const quietRef = useRef(false);
   const setOpen = (next) => {
     setOwnOpen(next);
     if (next !== open) onOpenChange?.(next);
@@ -180,9 +182,20 @@ function Autocomplete(props) {
               onFocus: (e) => {
                 onFocus?.(e);
                 if (locked) return;
+                if (isQuietFocus(e.currentTarget)) {
+                  quietRef.current = true;
+                  return;
+                }
+                setOpen(true);
+              },
+              onClick: (e) => {
+                rest.onClick?.(e);
+                if (!quietRef.current || locked) return;
+                quietRef.current = false;
                 setOpen(true);
               },
               onBlur: (e) => {
+                quietRef.current = false;
                 onBlur?.(e);
                 close();
               },

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  stepEnabled,\n  SUGGESTION_LIST_CLASS,\n  suggestionRowClass,\n  useActiveOptionScroll,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\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 type { CommitScope } from \"./write-lock\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  >,\n    FieldHelpProps {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. 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  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): it was\n   *  `forwardRef`, cast back to a generic function, with a `displayName` line beside it. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n *\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport function Autocomplete<V extends string | number = string>(props: AutocompleteProps<V>) {\n  const {\n    ref,\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    help,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  // A form library's `aria-invalid` paints as well as announces (DUP-8: it only\n  // announced, through the spread below).\n  const field = useFieldError(error, invalid, hintParts.describedBy, rest[\"aria-invalid\"]);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  // The list is a layer on the kit's Escape stack while it shows (Wave 2, DUP-1).\n  useDismissLayer(expanded, close);\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-muted\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  // At Large the label stands above the field and the strip is gone\n                  // (0.33, §10.17): the value's line is under FIELD_BASE's `py-2`.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center large:top-[calc(0.5rem+1px)]\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded && takeEscape(e)) return;\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone. Nor is a row taken by the Enter that confirms an IME\n                  // composition, which is the IME's (BUG-9).\n                  if (expanded && activeId && !isImeEnter(e)) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            // The family's suggestion box (DUP-4), as a column: the list scrolls inside\n            // it and the status line stays under the rows.\n            className={cn(SUGGESTION_LIST_CLASS, \"fixed z-50 flex flex-col overflow-hidden py-0\")}\n            // Flipped above, the list hangs from its bottom edge: three rows under a\n            // 256 px cap, placed by `top`, floated ~176 px above the field (keksdose K1),\n            // and the rows come and go as the user types.\n            style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\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                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            // The family's suggestion row (DUP-4): it hand-rolled its\n                            // own with a plain `truncate`, so a long address was cut at\n                            // Large, where Combobox's rows wrap (text size §10.17, T1).\n                            // A flex row here, for the icon and the two lines.\n                            suggestionRowClass(i === active && !o.disabled),\n                            \"flex items-center gap-2\",\n                            small && \"py-1 text-xs\",\n                            o.disabled && DISABLED_ROW_CLASS,\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-muted\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate-until-large text-primary\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate-until-large text-placeholder\",\n                                  small ? \"text-caption\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-danger\" : \"text-muted\",\n                  results.length > 0 && \"border-t border-subtle text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { isQuietFocus } from \"../lib/quiet-focus\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  endHintRowProps,\n  GROUP_HEADING_STICKY,\n  isOptionEnabled,\n  stepEnabled,\n  SUGGESTION_LIST_CLASS,\n  suggestionRowClass,\n  useActiveOptionScroll,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\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 type { CommitScope } from \"./write-lock\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  >,\n    FieldHelpProps {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * Standing advice — {@link Combobox}'s `hint`, so this field reads like every other\n   * (keksdose K4): plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box. Not the list's\n   * `status` line, which talks about the lookup, not the field.\n   *\n   * Pass it — even as `undefined` — on a field whose hint comes and goes (0.24): the\n   * unlabelled field then keeps its end-hint row whether or not a \"?\" is in it, so the\n   * `<input>` is never re-parented, and focus and caret survive the toggle. The rule\n   * the rest of the family has had since 0.23 (and the fields since 0.22).\n   */\n  hint?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n  /**\n   * Why the field cannot be changed — {@link Button}'s `disabledReason`, the Combobox\n   * family's write lock (keksdose G2, 0.23), for a field whose pick SAVES: an address\n   * search whose taken row writes the address, a lookup that links a record.\n   *\n   * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field), opens no list and asks no\n   * `loadOptions` — whatever `open` says — and nothing reaches `onChange`, `onSelect` or\n   * `onOpenChange(true)`. Enter is swallowed, so a locked field does not submit the form\n   * around it, and a caller's `onKeyDown` does not hear it; every other key still\n   * reaches the caller (an Escape that closes its panel) and the caret. The reason is in\n   * the kit {@link Tooltip} and on the input's `aria-describedby`. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way with the lock's reason (which wins over its own). A search\n   * whose result is only draft state — the form's Save writes it — leaves this off and\n   * stays live under the lock. 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  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): it was\n   *  `forwardRef`, cast back to a generic function, with a `displayName` line beside it. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n *\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport function Autocomplete<V extends string | number = string>(props: AutocompleteProps<V>) {\n  const {\n    ref,\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    hint,\n    help,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  } = props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  // A form library's `aria-invalid` paints as well as announces (DUP-8: it only\n  // announced, through the spread below).\n  const field = useFieldError(error, invalid, hintParts.describedBy, rest[\"aria-invalid\"]);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  // The field took the tour's quiet focus (§11.8) and has not opened since.\n  const quietRef = useRef(false);\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  // The lock: focusable, `readOnly`, no list — see `disabledReason`. Folded into `live`,\n  // so a locked field asks nothing and shows nothing even with `open` held true.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const live = open && !disabled && !locked;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, bottom, maxHeight, above } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  // The list is a layer on the kit's Escape stack while it shows (Wave 2, DUP-1).\n  useDismissLayer(expanded, close);\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled || locked) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && hintParts.labelHint === undefined && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      {/* `\"hint\" in props`: the family's 0.22 rule (see `endHintRowProps`) — passed at\n          all, even as `undefined`, a hint keeps the unlabelled field's end-hint row, so\n          a \"?\" coming and going never re-parents the <input> under the caret (0.24, the\n          last of the family to get it; the siblings had it in 0.23). */}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, hasLabel, hintParts.labelHint)}>\n        {withLock(\n          <div ref={fieldRef} className={cn(\"relative\", locked && \"cursor-not-allowed\")}>\n            {icon && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none absolute flex text-muted\",\n                  small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n                  // Labelled, the icon sits on the VALUE's line — the one line box below\n                  // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of\n                  // the box. Centred on the box it rose into the top strip and sat on the\n                  // label's first letters, which float at the same start inset. On the\n                  // value line it is beside what it describes, and the label keeps the\n                  // start edge every other label in the form's column shares.\n                  // At Large the label stands above the field and the strip is gone\n                  // (0.33, §10.17): the value's line is under FIELD_BASE's `py-2`.\n                  hasLabel\n                    ? \"top-[calc(1rem+1px)] h-5 items-center large:top-[calc(0.5rem+1px)]\"\n                    : \"top-1/2 -translate-y-1/2\",\n                )}\n              >\n                {icon}\n              </span>\n            )}\n            <input\n              {...rest}\n              ref={ref}\n              id={fieldId}\n              size={nativeSize}\n              type=\"text\"\n              value={value}\n              // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n              disabled={locked ? undefined : disabled}\n              readOnly={locked || rest.readOnly}\n              aria-disabled={locked || rest[\"aria-disabled\"]}\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-expanded={expanded}\n              // Required by the role, and set while closed too, as on the siblings.\n              aria-controls={listboxId}\n              aria-activedescendant={activeId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n              aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n              aria-describedby={mergeDescribedBy(field.describedBy, locked && lock.reasonId)}\n              autoComplete=\"off\"\n              onFocus={(e) => {\n                onFocus?.(e);\n                // A locked field takes focus to say why, and opens nothing.\n                if (locked) return;\n                // The tour's focus on arrival (§11.8) looks nothing up: the list would\n                // cover 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                // A seeded field (keksdose's `initialQuery`) is looked up as it is\n                // focused; an empty one asks nothing, because of `minChars`.\n                setOpen(true);\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={(e) => {\n                rest.onClick?.(e);\n                if (!quietRef.current || locked) return;\n                quietRef.current = false;\n                setOpen(true);\n              }}\n              onBlur={(e) => {\n                quietRef.current = false;\n                onBlur?.(e);\n                close();\n              }}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n              }}\n              onKeyDown={(e) => {\n                // Locked: Enter is swallowed (no form submit, no caller's \"search now\");\n                // every other key is the caller's and the caret's. No list to drive.\n                if (locked) {\n                  if (e.key === \"Enter\") e.preventDefault();\n                  else onKeyDown?.(e);\n                  return;\n                }\n                // An Escape that closes the OPEN list is the list's, and is consumed before\n                // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n                // address search) otherwise closed the whole panel when the user only meant\n                // to dismiss the suggestions — the opposite of what the docs promised.\n                if (e.key === \"Escape\" && expanded && takeEscape(e)) return;\n                onKeyDown?.(e);\n                if (e.defaultPrevented) return;\n                // Disabled rows are passed over; at either end the highlight stays put.\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  else setActive((i) => stepEnabled(results, i, 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  if (!open) setOpen(true);\n                  // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n                  else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n                } else if (e.key === \"Enter\") {\n                  // No row highlighted: the text is the answer, and a form's own submit\n                  // is left alone. Nor is a row taken by the Enter that confirms an IME\n                  // composition, which is the IME's (BUG-9).\n                  if (expanded && activeId && !isImeEnter(e)) {\n                    e.preventDefault();\n                    take(results[active]);\n                  }\n                } else if (e.key === \"Tab\") {\n                  close();\n                }\n              }}\n              className={cn(\n                FIELD_BASE,\n                hasLabel && FIELD_FLOATING_PAD,\n                // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n                // cannot grow it.\n                small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n                icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n                busy && (small ? \"pe-7\" : \"pe-9\"),\n                field.isInvalid && FIELD_INVALID,\n                inputClassName,\n              )}\n            />\n            {busy && live && (\n              // Decorative: the live region below already says \"Loading…\".\n              <span\n                className={cn(\n                  \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n                  small ? \"end-2\" : \"end-2.5\",\n                )}\n              >\n                <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n              </span>\n            )}\n          </div>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it, after the field so the \"?\"\n          follows the control in the tab order (as on Input and Select). */}\n      {hasLabel && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <ComboboxFieldLabel id={labelId} htmlFor={fieldId} className={LABEL_IN_ROW}>\n            {label}\n          </ComboboxFieldLabel>\n        </StaticLabelRow>\n      )}\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            // The family's suggestion box (DUP-4), as a column: the list scrolls inside\n            // it and the status line stays under the rows.\n            className={cn(SUGGESTION_LIST_CLASS, \"fixed z-50 flex flex-col overflow-hidden py-0\")}\n            // Flipped above, the list hangs from its bottom edge: three rows under a\n            // 256 px cap, placed by `top`, floated ~176 px above the field (keksdose K1),\n            // and the rows come and go as the user types.\n            style={{ ...(above ? { bottom } : { top }), left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\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                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            // The family's suggestion row (DUP-4): it hand-rolled its\n                            // own with a plain `truncate`, so a long address was cut at\n                            // Large, where Combobox's rows wrap (text size §10.17, T1).\n                            // A flex row here, for the icon and the two lines.\n                            suggestionRowClass(i === active && !o.disabled),\n                            \"flex items-center gap-2\",\n                            small && \"py-1 text-xs\",\n                            o.disabled && DISABLED_ROW_CLASS,\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-muted\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate-until-large text-primary\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate-until-large text-placeholder\",\n                                  small ? \"text-caption\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-danger\" : \"text-muted\",\n                  results.length > 0 && \"border-t border-subtle text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/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 { ComboboxFieldLabel, endHintRowProps, GROUP_HEADING_STICKY, useActiveOptionScroll } from "./combobox-core.js";
@@ -169,8 +170,9 @@ function Combobox(props) {
               autoFocus,
               onBlur,
               onMouseDown: primaryOnly.onMouseDown,
-              onFocus: () => {
+              onFocus: (e) => {
                 if (primaryOnly.fromAuxButton() || locked) return;
+                if (isQuietFocus(e.currentTarget)) return;
                 setOpen(true);
                 setTyping(false);
                 if (isPhone) sheetInputRef.current?.focus();

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown } 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 { ComboboxFieldLabel, endHintRowProps, GROUP_HEADING_STICKY, useActiveOptionScroll } from \"./combobox-core\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { 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 type { CommitScope } from \"./write-lock\";\nimport { lockedKeyDown, rowClass, SuggestionList, usePrimaryPressOnly } from \"./combobox-suggestions\";\n// The id-keyed sibling lives in inline-entity-combobox.tsx (MOD-9), the list both share\n// in combobox-suggestions.tsx; its public names are still this module's.\nexport { InlineEntityCombobox } from \"./inline-entity-combobox\";\nexport type { InlineEntityComboboxProps } from \"./inline-entity-combobox\";\n\n/**\n * Four of the div's own attributes are omitted because this component already owns\n * the name, with a different meaning: `id` is the INPUT's (a caller labels or\n * automates the field, not the box around it), and `onChange`/`onBlur`/`onSubmit`\n * are the field's — a value, a departure, and \"I mean what I typed\" — rather than\n * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.\n */\nexport interface ComboboxProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\" | \"onBlur\" | \"onSubmit\">,\n    FieldHelpProps {\n  value: string;\n  onChange: (v: string) => void;\n  /** Suggestion pool (e.g. existing payee names). */\n  options: string[];\n  /** The visible label, a `<label for>` above the field: a ReactNode, as on every kit\n   *  field (a string until 0.34, refactor audit 2026-10, API-9). Without one, name the\n   *  field with `aria-label`. */\n  label?: ReactNode;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`\n   *  itself rather than on the wrapper, which is what let Keksdose's account picker\n   *  delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying\n   *  because this component had no `invalid` of its own. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the `<input>`'s `aria-describedby`, and implies `invalid` (lenkbank's\n   *  scope fields, which moved here off `<Input list>` + `<datalist>`). */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Input}'s `hint`, so the combobox family\n   * reads like every other field (keksdose K4: the family had `error` and no `hint`, so\n   * the app's pickers carried their captions outside the component, attached to\n   * nothing). Plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** As `<input disabled>`: no focus, no list, the field's settled look. The chevron\n   *  stops toggling with it — it is a mouse target the input's own `disabled` does\n   *  not reach. */\n  disabled?: boolean;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that SAVES itself (an inline editor whose blur writes). The input stays focusable\n   * and `aria-disabled`, is `readOnly`, opens no list and calls neither `onChange` nor\n   * `onSubmit`; the reason is in the kit {@link Tooltip} and on its `aria-describedby`.\n   * Wins over `disabled`. The family's lock (keksdose G2) — see {@link InlineEntityCombobox}.\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   *  `disabledReason` way with the lock's reason; inside a form with its own Save, leave\n   *  it off and put `commit` on the Save. No provider, or an unlocked one: no effect. */\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  /** Heading an option belongs under. Supplying it makes this list read exactly\n   *  like {@link InlineEntityCombobox}'s — one heading per group with its rows\n   *  indented beneath — instead of a flat list (feedback #136 rework: the payee\n   *  field sat next to the newly-grouped category field and no longer matched).\n   *  Omit for a plain list. */\n  groupBy?: (option: string) => string;\n  /**\n   * Something to show at the far end of an option's row — a badge saying what the\n   * option IS, as distinct from what it is called.\n   *\n   * Keksdose's category-name field is the case: its proposals carry per-locale\n   * names, so picking one stores a category that follows the UI language, and\n   * picking a look-alike custom name does not. That difference is invisible in the\n   * label and decides what the row DOES, so the row has to show it. Returning\n   * `null` for an option renders nothing and costs no layout.\n   *\n   * Not rendered in the create row, which by definition names nothing in the pool.\n   */\n  optionAdornment?: (option: string) => ReactNode;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open\n   *  the list with it. A click-the-value inline editor needs it: the cell the user\n   *  clicked names the field the caret should land in. {@link InlineEntityCombobox}\n   *  has had it since live #218. */\n  autoFocus?: boolean;\n  /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress\n   *  `mousedown`, so the input never blurs — which is what makes it usable as a\n   *  \"close the inline editor\" signal. */\n  onBlur?: () => void;\n  /** Enter pressed with no row highlighted, i.e. \"I mean what I typed\". The list\n   *  closes either way; this is for a caller whose Enter also submits a row editor. */\n  onSubmit?: () => void;\n  /** Rows to offer when the field is empty. 8 on a dropdown, where that is all\n   *  that fits; the phone sheet asks for more because it has a screen. */\n  maxSuggestions?: number;\n  searchPlaceholder?: string;\n  closeLabel?: string;\n  /**\n   * The phone sheet's heading — and, as a string, the dialog's accessible name — for a\n   * field whose label is drawn by someone else: a bound field's label above it,\n   * which `RhfTextCombobox` hands over here (0.24). Default: `label`. Without either, the\n   * full-screen sheet opened untitled and unnamed, the one screen on a phone that has to\n   * say what it is asking for (live #200).\n   */\n  sheetTitle?: ReactNode;\n  /**\n   * Label for the row that COMMITS a value the list does not contain — e.g.\n   * `(v) => \\`Add \"${v}\" as payee\\``. Supplying it turns the free text into\n   * something you confirm rather than something you leave behind.\n   *\n   * Keksdose live #212: *\"For the payee input have an apply button, when input is\n   * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with\n   * the right top X, which seems not intuitive.\"* On the phone sheet the search box\n   * IS the value, so typing a brand-new name and dismissing the sheet did commit it —\n   * but the only control on offer was the close X, which reads as \"discard\". A named\n   * affordance says what the typing did.\n   *\n   * Omit and the row is not rendered, which is the right default for a list whose\n   * values are all supposed to already exist.\n   */\n  createLabel?: (value: string) => string;\n  /**\n   * The `<input>` — the control a reader types in and the one focus belongs on — as a\n   * React 19 ref prop, the way {@link CountrySelect} takes its trigger's (0.24, kastlan:\n   * react-hook-form's focus-on-error calls `focus()` on whatever `field.ref` is handed,\n   * and a combobox with no ref inside a hand-wired `RhfField` gave it nothing, so a\n   * failed submit could not take the user to it). Not the wrapper: a ref is for focus,\n   * measurement and selection, and all three are the input's. `RhfTextCombobox` passes it.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE\n * styling, chevron and static floating label) but lets the user type a value\n * that isn't in the list — e.g. naming a brand-new payee. Picking from the\n * filtered suggestion list fills the value; typing keeps whatever was entered.\n *\n * Use this instead of an `<Input list=\"…\">` + `<datalist>` so the control is\n * visually and behaviourally consistent with the other dropdowns (feedback\n * #230 — the payee field looked/behaved differently from every other select).\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    value,\n    onChange,\n    options,\n    label,\n    id,\n    placeholder,\n    className,\n    groupBy,\n    maxSuggestions,\n    searchPlaceholder,\n    closeLabel,\n    sheetTitle,\n    createLabel,\n    invalid,\n    error,\n    hint,\n    help,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    optionAdornment,\n    autoFocus,\n    onBlur,\n    onSubmit,\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  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  // Derived from the GENERATED id, never from `id`: a caller's id is theirs to\n  // collide with, and `aria-controls` has to resolve.\n  const listboxId = `${generated}-listbox`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  // `backCloses` is the desktop half of live #309: the phone's list IS a\n  // {@link PickerSheet}, which registers its own history entry, so registering a\n  // second one here would cost two Back presses to dismiss one sheet. Its Escape\n  // layer is this field's own, below — the list can be open with nothing to show.\n  const isPhone = usePhoneLayout();\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });\n  const primaryOnly = usePrimaryPressOnly();\n  const [active, setActive] = useState(-1);\n  // The lock (see `lockedKeyDown`): a lock arriving while the list is up closes it,\n  // adjusted while rendering so no frame offers a row that can no longer be taken.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  if (locked && open) setOpen(false);\n  // A phone opens the list as a full-screen sheet with its own input, the way a\n  // native <select> does — live #200: \"Paid as full screen dialog with input.\n  // Similar to the account select that already appears as full screen.\" The\n  // anchored list stays for pointer devices, where it is the better shape.\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — the inner wrapper, which hugs the input,\n  // not the outer one (a grid item that can be taller than the field).\n  const fieldRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * Is the text in the field a QUERY, or just what was picked last time?\n   *\n   * Keksdose dev#549, filed against the category-name field: *\"Currently it acts kind\n   * of a filter and clicking again does not open anything since the previous text is\n   * still there likely filtering all other options out.\"* A combobox whose filter is\n   * its own value can only ever re-offer the answer it already has — after picking\n   * \"REWE\" the list reopens holding one row, the one you are looking at, and changing\n   * your mind means clearing the field by hand first.\n   *\n   * So the text filters only while it is being TYPED; opening the list, by focus or\n   * by clicking the field again, puts the whole pool back. {@link InlineEntityCombobox}\n   * below has had this since it was written (see its `typedQuery`) and the app's\n   * category-name field grew its own copy to get it — this one, the payee field, was\n   * the one left with the bug.\n   *\n   * Not derived from \"does the text exactly match an option\": a custom value that\n   * happens to collide with one would then behave differently from every other, and\n   * what is being tracked is what the user just did, which is not a property of the\n   * string.\n   */\n  const [typing, setTyping] = useState(false);\n\n  const query = typing ? value.trim() : \"\";\n  // Folded as every kit list folds (DUP-5): \"zurich\" finds Zürich, by the locale's case.\n  const locale = useKitLocale();\n  const matches = useMemo(() => {\n    const seen = new Set<string>();\n    const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));\n    let ranked: string[];\n    const cap = maxSuggestions ?? (isPhone ? 50 : 8);\n    if (!query) {\n      ranked = uniq.slice(0, cap);\n    } else {\n      // The whole name, then prefix matches, then substring matches — most relevant on\n      // top (`rankMatch`; a stable sort keeps the pool's order within a rank).\n      ranked = uniq\n        .map((o) => ({ o, rank: rankMatch(o, query, { locale }) }))\n        .filter((x) => x.rank >= 0)\n        .sort((a, b) => a.rank - b.rank)\n        .map((x) => x.o)\n        .slice(0, cap);\n    }\n    if (!groupBy) return ranked;\n    // Keep each group contiguous so a heading appears once instead of every time\n    // the ranking interleaves two groups — while preserving \"best match first\":\n    // a Map keeps insertion order, so groups come out ordered by their best-ranked\n    // member and members keep their rank order inside the group.\n    const byGroup = new Map<string, string[]>();\n    for (const o of ranked) {\n      const key = groupBy(o);\n      if (!byGroup.has(key)) byGroup.set(key, []);\n      byGroup.get(key)!.push(o);\n    }\n    return [...byGroup.values()].flat();\n  }, [options, query, groupBy, maxSuggestions, isPhone, locale]);\n\n  /**\n   * Which rows OPEN a group, and with what heading — computed once for both lists.\n   *\n   * The desktop list had this as `matches[i - 1]`, which is free; the sheet had it as\n   * `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and another\n   * per heading test. That is quadratic in the sheet's own cap of 50, on the branch\n   * that runs on the slowest hardware we ship to — and it answers the wrong question\n   * besides: `indexOf` finds the FIRST row with that string, so a duplicated option\n   * would have compared against a neighbour it is not next to. (`matches` de-duplicates\n   * today; that is a property of the memo above, not of the row being rendered.)\n   */\n  const groupHeadings = useMemo(() => {\n    if (!groupBy) return null;\n    const heads = new Map<number, string>();\n    let prev: string | undefined;\n    matches.forEach((o, i) => {\n      const group = groupBy(o);\n      if (group != null && group !== prev) heads.set(i, group);\n      prev = group;\n    });\n    return heads;\n  }, [matches, groupBy]);\n\n  const take = (v: string) => {\n    if (locked) return;\n    onChange(v);\n    setOpen(false);\n    setActive(-1);\n    // What is in the field is now an ANSWER, not a query — so reopening offers the\n    // whole pool again rather than a one-row filter of the value just chosen.\n    setTyping(false);\n  };\n\n  // Offered only when the typed text is genuinely NOT in the pool: an exact\n  // (case-insensitive) match is an existing entry the list is already showing, and a\n  // second way to pick it would be noise. Compared against `options`, not `matches` —\n  // `matches` is capped, so a pool of 300 payees would otherwise offer to \"add\" one\n  // that exists but fell off the end of the list.\n  // What the field claims the keyboard is on. Only on a pointer device: the phone\n  // renders its rows in a {@link PickerSheet} whose own search box owns focus, and a\n  // field pointing at an id that is not there is worse than one pointing nowhere.\n  const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  const typed = value.trim();\n  const createRow =\n    createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase())\n      ? createLabel(typed)\n      : null;\n\n  // The list is a layer on the Escape stack while it SHOWS (Wave 2, DUP-1): an Escape\n  // over an empty \"open\" list is the dialog's, as it always was. On a phone the sheet\n  // is the layer.\n  const showing = !isPhone && open && !inert && (matches.length > 0 || Boolean(createRow));\n  useDismissLayer(showing, () => {\n    setOpen(false);\n    setActive(-1);\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> since lenkbank's tests met a field `getByLabelText` could\n          not find: it used to be a <span>, with the text copied onto `aria-label`. The\n          name a reader hears is the same words either way. With a \"?\" it moves into a\n          row after the field, below. */}\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          /* The chevron centers against this inner wrapper, which hugs the input.\n              The outer div can be taller than the input (as a grid item it\n              stretches to the row height, e.g. next to the editor's category cell\n              with its split button), which used to drag a top-1/2 chevron down to\n              the input's bottom edge (feedback #248).\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={value}\n              placeholder={placeholder}\n              // The caller's name, over the <label for> above — which is what names the\n              // field otherwise (dev#477: a field with neither announces only its text).\n              aria-label={ariaLabel}\n              role=\"combobox\"\n              aria-expanded={open}\n              // The list this field is the mouth of. Required by the role, and the half\n              // that was missing: the field said it was expanded and never said what it\n              // had expanded, so a reader had no way from the box to the options\n              // (ESLint's `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              onBlur={onBlur}\n              onMouseDown={primaryOnly.onMouseDown}\n              onFocus={() => {\n                // A back/forward mouse button focuses this field on its way to\n                // navigating; it is not a request to open anything (live #309 rework).\n                // A locked field takes focus to say why, and opens nothing.\n                if (primaryOnly.fromAuxButton() || locked) return;\n                setOpen(true);\n                setTyping(false);\n                // The sheet carries its own input, so the field behind it must not also\n                // pull up the keyboard and scroll the page under the dialog.\n                if (isPhone) sheetInputRef.current?.focus();\n              }}\n              // A CLICK as well as focus — the other half of dev#549. Picking a suggestion\n              // closes the list without moving focus (the rows suppress `mousedown` on\n              // purpose, so the input never blurred), which means clicking the field again\n              // fires no `focus` event at all and the list stayed shut. \"Does not open\n              // anything\" was literally true.\n              onClick={() => {\n                if (locked) return;\n                setOpen(true);\n                setTyping(false);\n              }}\n              // `inputMode=\"none\"` rather than readOnly: the field must not look\n              // uneditable (FIELD_BASE greys a read-only field since dev#468) and must\n              // still take focus — it just has no keyboard of its own, the same trick\n              // the amount field uses for the numpad.\n              inputMode={isPhone ? \"none\" : undefined}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n                setTyping(true);\n              }}\n              onKeyDown={(e) => {\n                if (locked) return lockedKeyDown(e);\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  setOpen(true);\n                  setActive((i) => Math.min(i + 1, matches.length - 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  setActive((i) => Math.max(i - 1, 0));\n                } else if (e.key === \"Enter\") {\n                  // The Enter that confirms an IME composition is the IME's: it picks no\n                  // row and submits nothing (BUG-9).\n                  if (isImeEnter(e)) return;\n                  if (open && active >= 0 && active < matches.length) {\n                    e.preventDefault();\n                    take(matches[active]);\n                  } else {\n                    // No row highlighted: the typed text is the answer. `preventDefault`\n                    // only when a caller is taking Enter, so a plain form submit is\n                    // otherwise left alone.\n                    if (onSubmit) e.preventDefault();\n                    setOpen(false);\n                    onSubmit?.();\n                  }\n                } else if (e.key === \"Escape\") {\n                  // A list that is SHOWING is the top of the Escape stack, and the key\n                  // closes it and stops here: a Modal or FullBleedDialog around the field\n                  // otherwise closed with it, form and all (round 0.34 BUG-1). With no\n                  // list on screen the key goes on to whoever wants it.\n                  if (showing && takeEscape(e)) return;\n                  setOpen(false);\n                  setActive(-1);\n                } else if (e.key === \"Tab\") {\n                  // Closes, and lets the browser take the Tab: focus is in THIS input,\n                  // which is staying, so there is nothing to catch — unlike the pickers\n                  // whose focus sits inside a portalled panel.\n                  setOpen(false);\n                  setActive(-1);\n                }\n                // Home/End are deliberately absent. The APG gives them to the list only\n                // where the combobox is not editable; here the text IS the value, a\n                // payee name is long enough to want the caret moved to its start, and\n                // the desktop list is capped at 8 rows — so jumping it would be worth\n                // almost nothing and would cost the one gesture that field is used with.\n              }}\n              className={cn(\n                FIELD_BASE,\n                label !== undefined && FIELD_FLOATING_PAD,\n                \"pe-9\",\n                field.isInvalid && FIELD_INVALID,\n              )}\n            />\n            <ChevronDown\n              aria-hidden\n              onMouseDown={(e) => {\n                // Toggle on the chevron without stealing focus from the input.\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          </div>,\n        )}\n      </EndHintRow>\n      {/* The label and its \"?\" share the top strip — after the field in the DOM, so the\n          \"?\" follows the control in the tab order, as it does on Input and Select. */}\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          onClose={() => setOpen(false)}\n          title={sheetTitle ?? label}\n          // The sheet's input IS the field: this is a free-text control, so what is\n          // typed here is the value (a brand-new payee is just a name nothing\n          // matches), and the list below narrows as it changes.\n          query={value}\n          onQueryChange={(v) => {\n            onChange(v);\n            setTyping(true);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul id={listboxId} role=\"listbox\">\n            {createRow && (\n              // `role=\"option\"` rides the BUTTON, not the <li> around it: an option\n              // may not contain a separately focusable control, and the button is\n              // what a pointer presses. Same shape `CommandPalette` has always had.\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={false}\n                  onClick={() => take(typed)}\n                  className={cn(SHEET_ROW_CLASS, \"font-medium text-brand\")}\n                >\n                  {createRow}\n                </button>\n              </li>\n            )}\n            {matches.map((o, i) => {\n              const group = groupHeadings?.get(i);\n              return (\n                <Fragment key={o}>\n                  {group !== undefined && (\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                      {group}\n                    </li>\n                  )}\n                  <li role=\"presentation\">\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={o === value}\n                      onClick={() => take(o)}\n                      className={cn(\n                        SHEET_ROW_CLASS,\n                        optionAdornment && \"flex items-center justify-between gap-2\",\n                      )}\n                    >\n                      {optionAdornment ? <span className=\"truncate-until-large\">{o}</span> : o}\n                      {optionAdornment?.(o)}\n                    </button>\n                  </li>\n                </Fragment>\n              );\n            })}\n          </ul>\n        </PickerSheet>\n      )}\n      {showing && (\n        <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n          {createRow && (\n            <li role=\"presentation\">\n              <button\n                type=\"button\"\n                role=\"option\"\n                aria-selected={false}\n                tabIndex={-1}\n                onMouseDown={(e) => {\n                  // mousedown, like the rows below: the input's blur would otherwise\n                  // close the list before the click landed.\n                  e.preventDefault();\n                  take(typed);\n                }}\n                className={cn(rowClass(false), \"font-medium text-brand\")}\n              >\n                {createRow}\n              </button>\n            </li>\n          )}\n          {matches.map((o, i) => {\n            // Heading at each group boundary only — `matches` is group-contiguous, so\n            // the boundaries are a property of the list rather than of the branch\n            // drawing it. See `groupHeadings`.\n            const group = groupHeadings?.get(i);\n            return (\n              <Fragment key={o}>\n                {group !== undefined && (\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                    {group}\n                  </li>\n                )}\n                <li role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    id={optionId(i)}\n                    role=\"option\"\n                    // CHOSEN, not highlighted. The row the arrows are on is named by\n                    // the field's `aria-activedescendant`; saying \"selected\" for it\n                    // would tell a reader that the row they are passing over is\n                    // already the answer.\n                    aria-selected={o === value}\n                    // Focus stays in the field — that is what\n                    // `aria-activedescendant` is for — so the rows are not tab stops.\n                    tabIndex={-1}\n                    onMouseDown={(e) => {\n                      // mousedown (not click) so the blur from the input firing first\n                      // doesn't close the list before the selection registers.\n                      e.preventDefault();\n                      take(o);\n                    }}\n                    onMouseEnter={() => setActive(i)}\n                    className={cn(\n                      rowClass(i === active),\n                      group != null && \"ps-6\",\n                      // A row with a badge is a flex row so the label truncates and the\n                      // badge keeps its width; without one it stays the plain block the\n                      // other lists render, so nothing shifts for callers that pass none.\n                      // From Large up the label wraps instead (`truncate-until-large`,\n                      // text size §10.17, round 0.34 T1), as the badge-less row does.\n                      optionAdornment && \"flex items-center justify-between gap-2\",\n                    )}\n                  >\n                    {optionAdornment ? <span className=\"truncate-until-large\">{o}</span> : o}\n                    {optionAdornment?.(o)}\n                  </button>\n                </li>\n              </Fragment>\n            );\n          })}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { ChevronDown } 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 { ComboboxFieldLabel, endHintRowProps, GROUP_HEADING_STICKY, useActiveOptionScroll } from \"./combobox-core\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { 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 type { CommitScope } from \"./write-lock\";\nimport { lockedKeyDown, rowClass, SuggestionList, usePrimaryPressOnly } from \"./combobox-suggestions\";\n// The id-keyed sibling lives in inline-entity-combobox.tsx (MOD-9), the list both share\n// in combobox-suggestions.tsx; its public names are still this module's.\nexport { InlineEntityCombobox } from \"./inline-entity-combobox\";\nexport type { InlineEntityComboboxProps } from \"./inline-entity-combobox\";\n\n/**\n * Four of the div's own attributes are omitted because this component already owns\n * the name, with a different meaning: `id` is the INPUT's (a caller labels or\n * automates the field, not the box around it), and `onChange`/`onBlur`/`onSubmit`\n * are the field's — a value, a departure, and \"I mean what I typed\" — rather than\n * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.\n */\nexport interface ComboboxProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"id\" | \"onChange\" | \"onBlur\" | \"onSubmit\">,\n    FieldHelpProps {\n  value: string;\n  onChange: (v: string) => void;\n  /** Suggestion pool (e.g. existing payee names). */\n  options: string[];\n  /** The visible label, a `<label for>` above the field: a ReactNode, as on every kit\n   *  field (a string until 0.34, refactor audit 2026-10, API-9). Without one, name the\n   *  field with `aria-label`. */\n  label?: ReactNode;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`\n   *  itself rather than on the wrapper, which is what let Keksdose's account picker\n   *  delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying\n   *  because this component had no `invalid` of its own. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the `<input>`'s `aria-describedby`, and implies `invalid` (lenkbank's\n   *  scope fields, which moved here off `<Input list>` + `<datalist>`). */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field — {@link Input}'s `hint`, so the combobox family\n   * reads like every other field (keksdose K4: the family had `error` and no `hint`, so\n   * the app's pickers carried their captions outside the component, attached to\n   * nothing). Plain TEXT is a caption under the field on the input's\n   * `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the label line,\n   * or with no label sits at the field's end edge, outside the box.\n   */\n  hint?: ReactNode;\n  /** As `<input disabled>`: no focus, no list, the field's settled look. The chevron\n   *  stops toggling with it — it is a mouse target the input's own `disabled` does\n   *  not reach. */\n  disabled?: boolean;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a field\n   * that SAVES itself (an inline editor whose blur writes). The input stays focusable\n   * and `aria-disabled`, is `readOnly`, opens no list and calls neither `onChange` nor\n   * `onSubmit`; the reason is in the kit {@link Tooltip} and on its `aria-describedby`.\n   * Wins over `disabled`. The family's lock (keksdose G2) — see {@link InlineEntityCombobox}.\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the\n   *  `disabledReason` way with the lock's reason; inside a form with its own Save, leave\n   *  it off and put `commit` on the Save. No provider, or an unlocked one: no effect. */\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  /** Heading an option belongs under. Supplying it makes this list read exactly\n   *  like {@link InlineEntityCombobox}'s — one heading per group with its rows\n   *  indented beneath — instead of a flat list (feedback #136 rework: the payee\n   *  field sat next to the newly-grouped category field and no longer matched).\n   *  Omit for a plain list. */\n  groupBy?: (option: string) => string;\n  /**\n   * Something to show at the far end of an option's row — a badge saying what the\n   * option IS, as distinct from what it is called.\n   *\n   * Keksdose's category-name field is the case: its proposals carry per-locale\n   * names, so picking one stores a category that follows the UI language, and\n   * picking a look-alike custom name does not. That difference is invisible in the\n   * label and decides what the row DOES, so the row has to show it. Returning\n   * `null` for an option renders nothing and costs no layout.\n   *\n   * Not rendered in the create row, which by definition names nothing in the pool.\n   */\n  optionAdornment?: (option: string) => ReactNode;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open\n   *  the list with it. A click-the-value inline editor needs it: the cell the user\n   *  clicked names the field the caret should land in. {@link InlineEntityCombobox}\n   *  has had it since live #218. */\n  autoFocus?: boolean;\n  /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress\n   *  `mousedown`, so the input never blurs — which is what makes it usable as a\n   *  \"close the inline editor\" signal. */\n  onBlur?: () => void;\n  /** Enter pressed with no row highlighted, i.e. \"I mean what I typed\". The list\n   *  closes either way; this is for a caller whose Enter also submits a row editor. */\n  onSubmit?: () => void;\n  /** Rows to offer when the field is empty. 8 on a dropdown, where that is all\n   *  that fits; the phone sheet asks for more because it has a screen. */\n  maxSuggestions?: number;\n  searchPlaceholder?: string;\n  closeLabel?: string;\n  /**\n   * The phone sheet's heading — and, as a string, the dialog's accessible name — for a\n   * field whose label is drawn by someone else: a bound field's label above it,\n   * which `RhfTextCombobox` hands over here (0.24). Default: `label`. Without either, the\n   * full-screen sheet opened untitled and unnamed, the one screen on a phone that has to\n   * say what it is asking for (live #200).\n   */\n  sheetTitle?: ReactNode;\n  /**\n   * Label for the row that COMMITS a value the list does not contain — e.g.\n   * `(v) => \\`Add \"${v}\" as payee\\``. Supplying it turns the free text into\n   * something you confirm rather than something you leave behind.\n   *\n   * Keksdose live #212: *\"For the payee input have an apply button, when input is\n   * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with\n   * the right top X, which seems not intuitive.\"* On the phone sheet the search box\n   * IS the value, so typing a brand-new name and dismissing the sheet did commit it —\n   * but the only control on offer was the close X, which reads as \"discard\". A named\n   * affordance says what the typing did.\n   *\n   * Omit and the row is not rendered, which is the right default for a list whose\n   * values are all supposed to already exist.\n   */\n  createLabel?: (value: string) => string;\n  /**\n   * The `<input>` — the control a reader types in and the one focus belongs on — as a\n   * React 19 ref prop, the way {@link CountrySelect} takes its trigger's (0.24, kastlan:\n   * react-hook-form's focus-on-error calls `focus()` on whatever `field.ref` is handed,\n   * and a combobox with no ref inside a hand-wired `RhfField` gave it nothing, so a\n   * failed submit could not take the user to it). Not the wrapper: a ref is for focus,\n   * measurement and selection, and all three are the input's. `RhfTextCombobox` passes it.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE\n * styling, chevron and static floating label) but lets the user type a value\n * that isn't in the list — e.g. naming a brand-new payee. Picking from the\n * filtered suggestion list fills the value; typing keeps whatever was entered.\n *\n * Use this instead of an `<Input list=\"…\">` + `<datalist>` so the control is\n * visually and behaviourally consistent with the other dropdowns (feedback\n * #230 — the payee field looked/behaved differently from every other select).\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    value,\n    onChange,\n    options,\n    label,\n    id,\n    placeholder,\n    className,\n    groupBy,\n    maxSuggestions,\n    searchPlaceholder,\n    closeLabel,\n    sheetTitle,\n    createLabel,\n    invalid,\n    error,\n    hint,\n    help,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    optionAdornment,\n    autoFocus,\n    onBlur,\n    onSubmit,\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  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  // Derived from the GENERATED id, never from `id`: a caller's id is theirs to\n  // collide with, and `aria-controls` has to resolve.\n  const listboxId = `${generated}-listbox`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  // `backCloses` is the desktop half of live #309: the phone's list IS a\n  // {@link PickerSheet}, which registers its own history entry, so registering a\n  // second one here would cost two Back presses to dismiss one sheet. Its Escape\n  // layer is this field's own, below — the list can be open with nothing to show.\n  const isPhone = usePhoneLayout();\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });\n  const primaryOnly = usePrimaryPressOnly();\n  const [active, setActive] = useState(-1);\n  // The lock (see `lockedKeyDown`): a lock arriving while the list is up closes it,\n  // adjusted while rendering so no frame offers a row that can no longer be taken.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const inert = locked || Boolean(disabled);\n  if (locked && open) setOpen(false);\n  // A phone opens the list as a full-screen sheet with its own input, the way a\n  // native <select> does — live #200: \"Paid as full screen dialog with input.\n  // Similar to the account select that already appears as full screen.\" The\n  // anchored list stays for pointer devices, where it is the better shape.\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — the inner wrapper, which hugs the input,\n  // not the outer one (a grid item that can be taller than the field).\n  const fieldRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * Is the text in the field a QUERY, or just what was picked last time?\n   *\n   * Keksdose dev#549, filed against the category-name field: *\"Currently it acts kind\n   * of a filter and clicking again does not open anything since the previous text is\n   * still there likely filtering all other options out.\"* A combobox whose filter is\n   * its own value can only ever re-offer the answer it already has — after picking\n   * \"REWE\" the list reopens holding one row, the one you are looking at, and changing\n   * your mind means clearing the field by hand first.\n   *\n   * So the text filters only while it is being TYPED; opening the list, by focus or\n   * by clicking the field again, puts the whole pool back. {@link InlineEntityCombobox}\n   * below has had this since it was written (see its `typedQuery`) and the app's\n   * category-name field grew its own copy to get it — this one, the payee field, was\n   * the one left with the bug.\n   *\n   * Not derived from \"does the text exactly match an option\": a custom value that\n   * happens to collide with one would then behave differently from every other, and\n   * what is being tracked is what the user just did, which is not a property of the\n   * string.\n   */\n  const [typing, setTyping] = useState(false);\n\n  const query = typing ? value.trim() : \"\";\n  // Folded as every kit list folds (DUP-5): \"zurich\" finds Zürich, by the locale's case.\n  const locale = useKitLocale();\n  const matches = useMemo(() => {\n    const seen = new Set<string>();\n    const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));\n    let ranked: string[];\n    const cap = maxSuggestions ?? (isPhone ? 50 : 8);\n    if (!query) {\n      ranked = uniq.slice(0, cap);\n    } else {\n      // The whole name, then prefix matches, then substring matches — most relevant on\n      // top (`rankMatch`; a stable sort keeps the pool's order within a rank).\n      ranked = uniq\n        .map((o) => ({ o, rank: rankMatch(o, query, { locale }) }))\n        .filter((x) => x.rank >= 0)\n        .sort((a, b) => a.rank - b.rank)\n        .map((x) => x.o)\n        .slice(0, cap);\n    }\n    if (!groupBy) return ranked;\n    // Keep each group contiguous so a heading appears once instead of every time\n    // the ranking interleaves two groups — while preserving \"best match first\":\n    // a Map keeps insertion order, so groups come out ordered by their best-ranked\n    // member and members keep their rank order inside the group.\n    const byGroup = new Map<string, string[]>();\n    for (const o of ranked) {\n      const key = groupBy(o);\n      if (!byGroup.has(key)) byGroup.set(key, []);\n      byGroup.get(key)!.push(o);\n    }\n    return [...byGroup.values()].flat();\n  }, [options, query, groupBy, maxSuggestions, isPhone, locale]);\n\n  /**\n   * Which rows OPEN a group, and with what heading — computed once for both lists.\n   *\n   * The desktop list had this as `matches[i - 1]`, which is free; the sheet had it as\n   * `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and another\n   * per heading test. That is quadratic in the sheet's own cap of 50, on the branch\n   * that runs on the slowest hardware we ship to — and it answers the wrong question\n   * besides: `indexOf` finds the FIRST row with that string, so a duplicated option\n   * would have compared against a neighbour it is not next to. (`matches` de-duplicates\n   * today; that is a property of the memo above, not of the row being rendered.)\n   */\n  const groupHeadings = useMemo(() => {\n    if (!groupBy) return null;\n    const heads = new Map<number, string>();\n    let prev: string | undefined;\n    matches.forEach((o, i) => {\n      const group = groupBy(o);\n      if (group != null && group !== prev) heads.set(i, group);\n      prev = group;\n    });\n    return heads;\n  }, [matches, groupBy]);\n\n  const take = (v: string) => {\n    if (locked) return;\n    onChange(v);\n    setOpen(false);\n    setActive(-1);\n    // What is in the field is now an ANSWER, not a query — so reopening offers the\n    // whole pool again rather than a one-row filter of the value just chosen.\n    setTyping(false);\n  };\n\n  // Offered only when the typed text is genuinely NOT in the pool: an exact\n  // (case-insensitive) match is an existing entry the list is already showing, and a\n  // second way to pick it would be noise. Compared against `options`, not `matches` —\n  // `matches` is capped, so a pool of 300 payees would otherwise offer to \"add\" one\n  // that exists but fell off the end of the list.\n  // What the field claims the keyboard is on. Only on a pointer device: the phone\n  // renders its rows in a {@link PickerSheet} whose own search box owns focus, and a\n  // field pointing at an id that is not there is worse than one pointing nowhere.\n  const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n\n  // While locked the field sits in the reason's Tooltip — in a fragment with a hidden\n  // copy of the reason, Button's anatomy; `block` so a full-width field stays full width.\n  const withLock = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n\n  const typed = value.trim();\n  const createRow =\n    createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase())\n      ? createLabel(typed)\n      : null;\n\n  // The list is a layer on the Escape stack while it SHOWS (Wave 2, DUP-1): an Escape\n  // over an empty \"open\" list is the dialog's, as it always was. On a phone the sheet\n  // is the layer.\n  const showing = !isPhone && open && !inert && (matches.length > 0 || Boolean(createRow));\n  useDismissLayer(showing, () => {\n    setOpen(false);\n    setActive(-1);\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> since lenkbank's tests met a field `getByLabelText` could\n          not find: it used to be a <span>, with the text copied onto `aria-label`. The\n          name a reader hears is the same words either way. With a \"?\" it moves into a\n          row after the field, below. */}\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          /* The chevron centers against this inner wrapper, which hugs the input.\n              The outer div can be taller than the input (as a grid item it\n              stretches to the row height, e.g. next to the editor's category cell\n              with its split button), which used to drag a top-1/2 chevron down to\n              the input's bottom edge (feedback #248).\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={value}\n              placeholder={placeholder}\n              // The caller's name, over the <label for> above — which is what names the\n              // field otherwise (dev#477: a field with neither announces only its text).\n              aria-label={ariaLabel}\n              role=\"combobox\"\n              aria-expanded={open}\n              // The list this field is the mouth of. Required by the role, and the half\n              // that was missing: the field said it was expanded and never said what it\n              // had expanded, so a reader had no way from the box to the options\n              // (ESLint's `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              onBlur={onBlur}\n              onMouseDown={primaryOnly.onMouseDown}\n              onFocus={(e) => {\n                // A back/forward mouse button focuses this field on its way to\n                // navigating; it is not a request to open anything (live #309 rework).\n                // A locked field takes focus to say why, and opens nothing.\n                if (primaryOnly.fromAuxButton() || locked) return;\n                // The tour's focus on arrival (§11.8) opens nothing: the list would cover\n                // its card (0.50.1). The click handler below still opens on a click.\n                if (isQuietFocus(e.currentTarget)) return;\n                setOpen(true);\n                setTyping(false);\n                // The sheet carries its own input, so the field behind it must not also\n                // pull up the keyboard and scroll the page under the dialog.\n                if (isPhone) sheetInputRef.current?.focus();\n              }}\n              // A CLICK as well as focus — the other half of dev#549. Picking a suggestion\n              // closes the list without moving focus (the rows suppress `mousedown` on\n              // purpose, so the input never blurred), which means clicking the field again\n              // fires no `focus` event at all and the list stayed shut. \"Does not open\n              // anything\" was literally true.\n              onClick={() => {\n                if (locked) return;\n                setOpen(true);\n                setTyping(false);\n              }}\n              // `inputMode=\"none\"` rather than readOnly: the field must not look\n              // uneditable (FIELD_BASE greys a read-only field since dev#468) and must\n              // still take focus — it just has no keyboard of its own, the same trick\n              // the amount field uses for the numpad.\n              inputMode={isPhone ? \"none\" : undefined}\n              onChange={(e) => {\n                if (locked) return;\n                onChange(e.target.value);\n                setOpen(true);\n                setActive(-1);\n                setTyping(true);\n              }}\n              onKeyDown={(e) => {\n                if (locked) return lockedKeyDown(e);\n                if (e.key === \"ArrowDown\") {\n                  e.preventDefault();\n                  setOpen(true);\n                  setActive((i) => Math.min(i + 1, matches.length - 1));\n                } else if (e.key === \"ArrowUp\") {\n                  e.preventDefault();\n                  setActive((i) => Math.max(i - 1, 0));\n                } else if (e.key === \"Enter\") {\n                  // The Enter that confirms an IME composition is the IME's: it picks no\n                  // row and submits nothing (BUG-9).\n                  if (isImeEnter(e)) return;\n                  if (open && active >= 0 && active < matches.length) {\n                    e.preventDefault();\n                    take(matches[active]);\n                  } else {\n                    // No row highlighted: the typed text is the answer. `preventDefault`\n                    // only when a caller is taking Enter, so a plain form submit is\n                    // otherwise left alone.\n                    if (onSubmit) e.preventDefault();\n                    setOpen(false);\n                    onSubmit?.();\n                  }\n                } else if (e.key === \"Escape\") {\n                  // A list that is SHOWING is the top of the Escape stack, and the key\n                  // closes it and stops here: a Modal or FullBleedDialog around the field\n                  // otherwise closed with it, form and all (round 0.34 BUG-1). With no\n                  // list on screen the key goes on to whoever wants it.\n                  if (showing && takeEscape(e)) return;\n                  setOpen(false);\n                  setActive(-1);\n                } else if (e.key === \"Tab\") {\n                  // Closes, and lets the browser take the Tab: focus is in THIS input,\n                  // which is staying, so there is nothing to catch — unlike the pickers\n                  // whose focus sits inside a portalled panel.\n                  setOpen(false);\n                  setActive(-1);\n                }\n                // Home/End are deliberately absent. The APG gives them to the list only\n                // where the combobox is not editable; here the text IS the value, a\n                // payee name is long enough to want the caret moved to its start, and\n                // the desktop list is capped at 8 rows — so jumping it would be worth\n                // almost nothing and would cost the one gesture that field is used with.\n              }}\n              className={cn(\n                FIELD_BASE,\n                label !== undefined && FIELD_FLOATING_PAD,\n                \"pe-9\",\n                field.isInvalid && FIELD_INVALID,\n              )}\n            />\n            <ChevronDown\n              aria-hidden\n              onMouseDown={(e) => {\n                // Toggle on the chevron without stealing focus from the input.\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          </div>,\n        )}\n      </EndHintRow>\n      {/* The label and its \"?\" share the top strip — after the field in the DOM, so the\n          \"?\" follows the control in the tab order, as it does on Input and Select. */}\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          onClose={() => setOpen(false)}\n          title={sheetTitle ?? label}\n          // The sheet's input IS the field: this is a free-text control, so what is\n          // typed here is the value (a brand-new payee is just a name nothing\n          // matches), and the list below narrows as it changes.\n          query={value}\n          onQueryChange={(v) => {\n            onChange(v);\n            setTyping(true);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul id={listboxId} role=\"listbox\">\n            {createRow && (\n              // `role=\"option\"` rides the BUTTON, not the <li> around it: an option\n              // may not contain a separately focusable control, and the button is\n              // what a pointer presses. Same shape `CommandPalette` has always had.\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={false}\n                  onClick={() => take(typed)}\n                  className={cn(SHEET_ROW_CLASS, \"font-medium text-brand\")}\n                >\n                  {createRow}\n                </button>\n              </li>\n            )}\n            {matches.map((o, i) => {\n              const group = groupHeadings?.get(i);\n              return (\n                <Fragment key={o}>\n                  {group !== undefined && (\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                      {group}\n                    </li>\n                  )}\n                  <li role=\"presentation\">\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={o === value}\n                      onClick={() => take(o)}\n                      className={cn(\n                        SHEET_ROW_CLASS,\n                        optionAdornment && \"flex items-center justify-between gap-2\",\n                      )}\n                    >\n                      {optionAdornment ? <span className=\"truncate-until-large\">{o}</span> : o}\n                      {optionAdornment?.(o)}\n                    </button>\n                  </li>\n                </Fragment>\n              );\n            })}\n          </ul>\n        </PickerSheet>\n      )}\n      {showing && (\n        <SuggestionList id={listboxId} anchorRef={fieldRef} panelRef={panelRef}>\n          {createRow && (\n            <li role=\"presentation\">\n              <button\n                type=\"button\"\n                role=\"option\"\n                aria-selected={false}\n                tabIndex={-1}\n                onMouseDown={(e) => {\n                  // mousedown, like the rows below: the input's blur would otherwise\n                  // close the list before the click landed.\n                  e.preventDefault();\n                  take(typed);\n                }}\n                className={cn(rowClass(false), \"font-medium text-brand\")}\n              >\n                {createRow}\n              </button>\n            </li>\n          )}\n          {matches.map((o, i) => {\n            // Heading at each group boundary only — `matches` is group-contiguous, so\n            // the boundaries are a property of the list rather than of the branch\n            // drawing it. See `groupHeadings`.\n            const group = groupHeadings?.get(i);\n            return (\n              <Fragment key={o}>\n                {group !== undefined && (\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                    {group}\n                  </li>\n                )}\n                <li role=\"presentation\">\n                  <button\n                    type=\"button\"\n                    id={optionId(i)}\n                    role=\"option\"\n                    // CHOSEN, not highlighted. The row the arrows are on is named by\n                    // the field's `aria-activedescendant`; saying \"selected\" for it\n                    // would tell a reader that the row they are passing over is\n                    // already the answer.\n                    aria-selected={o === value}\n                    // Focus stays in the field — that is what\n                    // `aria-activedescendant` is for — so the rows are not tab stops.\n                    tabIndex={-1}\n                    onMouseDown={(e) => {\n                      // mousedown (not click) so the blur from the input firing first\n                      // doesn't close the list before the selection registers.\n                      e.preventDefault();\n                      take(o);\n                    }}\n                    onMouseEnter={() => setActive(i)}\n                    className={cn(\n                      rowClass(i === active),\n                      group != null && \"ps-6\",\n                      // A row with a badge is a flex row so the label truncates and the\n                      // badge keeps its width; without one it stays the plain block the\n                      // other lists render, so nothing shifts for callers that pass none.\n                      // From Large up the label wraps instead (`truncate-until-large`,\n                      // text size §10.17, round 0.34 T1), as the badge-less row does.\n                      optionAdornment && \"flex items-center justify-between gap-2\",\n                    )}\n                  >\n                    {optionAdornment ? <span className=\"truncate-until-large\">{o}</span> : o}\n                    {optionAdornment?.(o)}\n                  </button>\n                </li>\n              </Fragment>\n            );\n          })}\n        </SuggestionList>\n      )}\n    </div>\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) => {