@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, 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 {\n  anchoredHeadingClass,\n  ComboboxFieldLabel,\n  endHintRowProps,\n  GroupedOptions,\n  groupRuns,\n  SHEET_HEADING_CLASS,\n  useTypedListStatus,\n  type GroupRun,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { sameName, searchRanked } 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\">, FieldHelpProps {\n  value: string;\n  onChange: (v: string) => void;\n  /** Suggestion pool (e.g. existing payee names). */\n  options: readonly 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  // A closed list has no row the keyboard is on, however it closed — the sheet's X,\n  // Escape or Back, a press outside — adjusted while rendering. The arrows' row outlived\n  // it: the list reopens on the whole pool, so the row the arrows had put on \"Migros\"\n  // showed \"Aldi\" highlighted, and Enter took it over the typed value (0.52 code review,\n  // combobox.tsx). An ArrowDown that opens the list sets both at once, and keeps its row.\n  if (!open && active !== -1) setActive(-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  // The live status's words (INP-6): the result count and \"No results\", as the panel\n  // pickers say them.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\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      // Every word of the query somewhere in the name (0.51.4's rule, which this list\n      // was said to have and did not: refactor audit 2026-10-30, DUP-4), ranked by the\n      // WHOLE query — the whole name, then prefix matches, then substring matches, then\n      // the names that hold the words apart (`searchRanked`, each name folded once). A\n      // stable sort keeps the pool's order within a rank.\n      ranked = searchRanked(uniq, query, (o) => [o], { locale })\n        .sort((a, b) => a.rank - b.rank)\n        .map((x) => x.row)\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   * The rows cut into their groups — computed once for both lists, each run a\n   * `role=\"group\"` its heading names (INP-8). Without `groupBy`, one bare run.\n   *\n   * The desktop list had the boundaries as `matches[i - 1]`, which is free; the sheet had\n   * them as `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and\n   * another per heading test. That is quadratic in the sheet's own cap of 50, on the\n   * branch that runs on the slowest hardware we ship to — and it answers the wrong\n   * question besides: `indexOf` finds the FIRST row with that string, so a duplicated\n   * option would have compared against a neighbour it is not next to. (`matches`\n   * de-duplicates today; that is a property of the memo above, not of the row being\n   * rendered.)\n   */\n  const runs = useMemo<GroupRun<string>[]>(\n    () => (groupBy ? groupRuns(matches, groupBy) : [{ group: null, start: 0, rows: matches }]),\n    [matches, groupBy],\n  );\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  // 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  // Offered only when the typed text is genuinely NOT in the pool: an exact match —\n  // folded as the list matches, so \"cafe\" is Café ({@link sameName}, DUP-5 in the\n  // 2026-10-30 refactor audit) — 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  const typed = value.trim();\n  const createRow =\n    createLabel && typed.length > 0 && !options.some((o) => sameName(o, typed, locale)) ? createLabel(typed) : null;\n\n  // Whether a list shows, the row the keyboard is on — named by the field, or on a phone\n  // by the sheet's own search box, which takes the same keys (INP-6, 0.34's BUG-5 for\n  // this field) — and the live status: the family's one rule for a typed list.\n  const { showing, expanded, activeOption, statusRegion } = useTypedListStatus({\n    isPhone,\n    open,\n    inert,\n    rowCount: matches.length,\n    extraRow: Boolean(createRow),\n    query,\n    active: active < matches.length ? active : -1,\n    optionId,\n    labels,\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  useDismissLayer(showing, () => {\n    setOpen(false);\n    setActive(-1);\n  });\n\n  /** The list's keys — in the field and, on a phone, in the sheet's search box. Enter\n   *  with no row highlighted is \"I mean what I typed\" in both. */\n  const listKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\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 row and\n      // 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` only when a\n        // caller is taking Enter, so a plain form submit is otherwise left alone.\n        if (onSubmit) e.preventDefault();\n        setOpen(false);\n        onSubmit?.();\n      }\n    }\n  };\n\n  /** The rows in their runs — each group a `role=\"group\"` its heading names (INP-8) —\n   *  for the sheet or the anchored list; `row` draws one option, `grouped` when it\n   *  stands under a heading. `matches` is group-contiguous, so the boundaries are a\n   *  property of the list rather than of the branch drawing it (see `runs`). */\n  const groupedRows = (sheet: boolean, row: (o: string, i: number, grouped: boolean) => ReactNode) => (\n    <GroupedOptions\n      runs={runs}\n      listboxId={listboxId}\n      rowKey={(o) => o}\n      row={row}\n      // The list's first item sits closer to its top edge; the create row comes first\n      // when there is one.\n      headingClassName={(run) => (sheet ? SHEET_HEADING_CLASS : anchoredHeadingClass(run, !createRow))}\n    />\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={expanded}\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              // Only on a pointer device: on a phone the sheet's own search box holds\n              // focus and names the row, and the field behind it says nothing.\n              aria-activedescendant={isPhone ? undefined : activeOption}\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                setActive(-1);\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                // The whole pool again, so no row of the typed list is the keyboard's\n                // (0.52 code review, combobox.tsx — see `active`).\n                setTyping(false);\n                setActive(-1);\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                listKeyDown(e);\n                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      {/* The live status — see `useTypedListStatus` for where it goes and why. */}\n      {!isPhone && statusRegion}\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            setActive(-1);\n            setTyping(true);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n          // The field's own keys, in the box focus is in while the sheet is up: arrows\n          // and Enter there did nothing (INP-6, as BUG-5 gave the panel pickers).\n          onSearchKeyDown={listKeyDown}\n          listboxId={listboxId}\n          activeId={activeOption}\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            {groupedRows(true, (o, i) => (\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  id={optionId(i)}\n                  role=\"option\"\n                  aria-selected={o === value}\n                  onClick={() => take(o)}\n                  className={cn(\n                    SHEET_ROW_CLASS,\n                    // The row the sheet's arrows are on.\n                    i === active && \"bg-active\",\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            ))}\n          </ul>\n          {statusRegion}\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          {groupedRows(false, (o, i, grouped) => (\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 the\n                // field's `aria-activedescendant`; saying \"selected\" for it would tell a\n                // reader that the row they are passing over is already the answer.\n                aria-selected={o === value}\n                // Focus stays in the field — that is what `aria-activedescendant` is\n                // 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                  // Every row of a group indented under its heading — it was the first\n                  // row of each group only.\n                  grouped && \"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          ))}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, 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 {\n  anchoredHeadingClass,\n  ComboboxFieldLabel,\n  endHintRowProps,\n  GroupedOptions,\n  groupRuns,\n  SHEET_HEADING_CLASS,\n  useTypedListStatus,\n  type GroupRun,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { sameName, searchRanked } from \"../lib/text-match\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockFrame,\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\">, FieldHelpProps {\n  value: string;\n  onChange: (v: string) => void;\n  /** Suggestion pool (e.g. existing payee names). */\n  options: readonly 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  // A closed list has no row the keyboard is on, however it closed — the sheet's X,\n  // Escape or Back, a press outside — adjusted while rendering. The arrows' row outlived\n  // it: the list reopens on the whole pool, so the row the arrows had put on \"Migros\"\n  // showed \"Aldi\" highlighted, and Enter took it over the typed value (0.52 code review,\n  // combobox.tsx). An ArrowDown that opens the list sets both at once, and keeps its row.\n  if (!open && active !== -1) setActive(-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  // The live status's words (INP-6): the result count and \"No results\", as the panel\n  // pickers say them.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\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      // Every word of the query somewhere in the name (0.51.4's rule, which this list\n      // was said to have and did not: refactor audit 2026-10-30, DUP-4), ranked by the\n      // WHOLE query — the whole name, then prefix matches, then substring matches, then\n      // the names that hold the words apart (`searchRanked`, each name folded once). A\n      // stable sort keeps the pool's order within a rank.\n      ranked = searchRanked(uniq, query, (o) => [o], { locale })\n        .sort((a, b) => a.rank - b.rank)\n        .map((x) => x.row)\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   * The rows cut into their groups — computed once for both lists, each run a\n   * `role=\"group\"` its heading names (INP-8). Without `groupBy`, one bare run.\n   *\n   * The desktop list had the boundaries as `matches[i - 1]`, which is free; the sheet had\n   * them as `matches[matches.indexOf(o) - 1]`, which is a scan of the list per row and\n   * another per heading test. That is quadratic in the sheet's own cap of 50, on the\n   * branch that runs on the slowest hardware we ship to — and it answers the wrong\n   * question besides: `indexOf` finds the FIRST row with that string, so a duplicated\n   * option would have compared against a neighbour it is not next to. (`matches`\n   * de-duplicates today; that is a property of the memo above, not of the row being\n   * rendered.)\n   */\n  const runs = useMemo<GroupRun<string>[]>(\n    () => (groupBy ? groupRuns(matches, groupBy) : [{ group: null, start: 0, rows: matches }]),\n    [matches, groupBy],\n  );\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  // 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    <LockFrame lock={lock} display={disabledReasonDisplay}>\n      {box}\n    </LockFrame>\n  );\n\n  // Offered only when the typed text is genuinely NOT in the pool: an exact match —\n  // folded as the list matches, so \"cafe\" is Café ({@link sameName}, DUP-5 in the\n  // 2026-10-30 refactor audit) — 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  const typed = value.trim();\n  const createRow =\n    createLabel && typed.length > 0 && !options.some((o) => sameName(o, typed, locale)) ? createLabel(typed) : null;\n\n  // Whether a list shows, the row the keyboard is on — named by the field, or on a phone\n  // by the sheet's own search box, which takes the same keys (INP-6, 0.34's BUG-5 for\n  // this field) — and the live status: the family's one rule for a typed list.\n  const { showing, expanded, activeOption, statusRegion } = useTypedListStatus({\n    isPhone,\n    open,\n    inert,\n    rowCount: matches.length,\n    extraRow: Boolean(createRow),\n    query,\n    active: active < matches.length ? active : -1,\n    optionId,\n    labels,\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  useDismissLayer(showing, () => {\n    setOpen(false);\n    setActive(-1);\n  });\n\n  /** The list's keys — in the field and, on a phone, in the sheet's search box. Enter\n   *  with no row highlighted is \"I mean what I typed\" in both. */\n  const listKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\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 row and\n      // 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` only when a\n        // caller is taking Enter, so a plain form submit is otherwise left alone.\n        if (onSubmit) e.preventDefault();\n        setOpen(false);\n        onSubmit?.();\n      }\n    }\n  };\n\n  /** The rows in their runs — each group a `role=\"group\"` its heading names (INP-8) —\n   *  for the sheet or the anchored list; `row` draws one option, `grouped` when it\n   *  stands under a heading. `matches` is group-contiguous, so the boundaries are a\n   *  property of the list rather than of the branch drawing it (see `runs`). */\n  const groupedRows = (sheet: boolean, row: (o: string, i: number, grouped: boolean) => ReactNode) => (\n    <GroupedOptions\n      runs={runs}\n      listboxId={listboxId}\n      rowKey={(o) => o}\n      row={row}\n      // The list's first item sits closer to its top edge; the create row comes first\n      // when there is one.\n      headingClassName={(run) => (sheet ? SHEET_HEADING_CLASS : anchoredHeadingClass(run, !createRow))}\n    />\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={expanded}\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              // Only on a pointer device: on a phone the sheet's own search box holds\n              // focus and names the row, and the field behind it says nothing.\n              aria-activedescendant={isPhone ? undefined : activeOption}\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                setActive(-1);\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                // The whole pool again, so no row of the typed list is the keyboard's\n                // (0.52 code review, combobox.tsx — see `active`).\n                setTyping(false);\n                setActive(-1);\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                listKeyDown(e);\n                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      {/* The live status — see `useTypedListStatus` for where it goes and why. */}\n      {!isPhone && statusRegion}\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            setActive(-1);\n            setTyping(true);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n          // The field's own keys, in the box focus is in while the sheet is up: arrows\n          // and Enter there did nothing (INP-6, as BUG-5 gave the panel pickers).\n          onSearchKeyDown={listKeyDown}\n          listboxId={listboxId}\n          activeId={activeOption}\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            {groupedRows(true, (o, i) => (\n              <li role=\"presentation\">\n                <button\n                  type=\"button\"\n                  id={optionId(i)}\n                  role=\"option\"\n                  aria-selected={o === value}\n                  onClick={() => take(o)}\n                  className={cn(\n                    SHEET_ROW_CLASS,\n                    // The row the sheet's arrows are on.\n                    i === active && \"bg-active\",\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            ))}\n          </ul>\n          {statusRegion}\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          {groupedRows(false, (o, i, grouped) => (\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 the\n                // field's `aria-activedescendant`; saying \"selected\" for it would tell a\n                // reader that the row they are passing over is already the answer.\n                aria-selected={o === value}\n                // Focus stays in the field — that is what `aria-activedescendant` is\n                // 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                  // Every row of a group indented under its heading — it was the first\n                  // row of each group only.\n                  grouped && \"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          ))}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/consent-again-notice-labels.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `ConsentAgainNotice`'s words — the `consentAgain` namespace of `<UiKitProvider labels>`
+ * (0.55). The kit's chrome only: the title, the intro, the list of changes and the wording
+ * before and now are the app's, as they say what this consent is about.
+ */
+export interface ConsentAgainLabels {
+    /** The button that gives the consent again. */
+    agree: string;
+    /** The banner's ×, its accessible name: not a refusal, the question comes back. */
+    notNow: string;
+    /** The banner's disclosure that unfolds the list of changes. */
+    changesToggle: string;
+    /** The card's disclosure that unfolds the full wording, before and now. */
+    wordingToggle: string;
+    /** Over the text agreed to before. */
+    beforeHeading: string;
+    /** Over the text asked for now. */
+    nowHeading: string;
+    /** Read before each paragraph of the old text, which is struck through: a line-through
+     *  is not announced, and colour alone must not carry the meaning. */
+    removed: string;
+    /** Read before each paragraph of the new text. */
+    added: string;
+}
+export declare const DEFAULT_CONSENT_AGAIN_LABELS: ConsentAgainLabels;

package/dist/components/consent-again-notice-labels.js

@@ -0,0 +1,15 @@
+"use client";
+const DEFAULT_CONSENT_AGAIN_LABELS = {
+  agree: "Agree",
+  notNow: "Not now",
+  changesToggle: "See what changed",
+  wordingToggle: "Show the full wording, before and now",
+  beforeHeading: "Until now",
+  nowHeading: "From now on",
+  removed: "Removed:",
+  added: "Added:"
+};
+export {
+  DEFAULT_CONSENT_AGAIN_LABELS
+};
+//# sourceMappingURL=consent-again-notice-labels.js.map

package/dist/components/consent-again-notice-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/consent-again-notice-labels.ts"],"sourcesContent":["// The English words of ./consent-again-notice, in a module with no component code: the\n// English catalogue (src/i18n/defaults.ts) imports them without the component (0.34, KS U8).\n// keksdose's reviewed words (price_pool.reconsent.*) are the canon, without its price pool:\n// the kit cannot know what was agreed to, only that the text changed and is asked again.\n\n/**\n * `ConsentAgainNotice`'s words — the `consentAgain` namespace of `<UiKitProvider labels>`\n * (0.55). The kit's chrome only: the title, the intro, the list of changes and the wording\n * before and now are the app's, as they say what this consent is about.\n */\nexport interface ConsentAgainLabels {\n  /** The button that gives the consent again. */\n  agree: string;\n  /** The banner's ×, its accessible name: not a refusal, the question comes back. */\n  notNow: string;\n  /** The banner's disclosure that unfolds the list of changes. */\n  changesToggle: string;\n  /** The card's disclosure that unfolds the full wording, before and now. */\n  wordingToggle: string;\n  /** Over the text agreed to before. */\n  beforeHeading: string;\n  /** Over the text asked for now. */\n  nowHeading: string;\n  /** Read before each paragraph of the old text, which is struck through: a line-through\n   *  is not announced, and colour alone must not carry the meaning. */\n  removed: string;\n  /** Read before each paragraph of the new text. */\n  added: string;\n}\n\nexport const DEFAULT_CONSENT_AGAIN_LABELS: ConsentAgainLabels = {\n  agree: \"Agree\",\n  notNow: \"Not now\",\n  changesToggle: \"See what changed\",\n  wordingToggle: \"Show the full wording, before and now\",\n  beforeHeading: \"Until now\",\n  nowHeading: \"From now on\",\n  removed: \"Removed:\",\n  added: \"Added:\",\n};\n"],"mappings":";AA8BO,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;","names":[]}

package/dist/components/consent-again-notice.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { CommitScope } from "./write-lock.js";
+import { DEFAULT_CONSENT_AGAIN_LABELS, type ConsentAgainLabels } from "./consent-again-notice-labels.js";
+export { DEFAULT_CONSENT_AGAIN_LABELS };
+export type { ConsentAgainLabels };
+interface ConsentAgainNoticeBase {
+    /** What changed, as a headline: "Price sharing has changed — please agree again". */
+    title: ReactNode;
+    /** What holds until the answer — what stops, what goes on. */
+    intro: ReactNode;
+    /** The "what's new" list, one entry per change, in the reader's terms. */
+    changes: readonly ReactNode[];
+    /** Agree is busy: the consent is on its way to the server. */
+    agreePending?: boolean;
+    /**
+     * Agree commits — under a locked `WriteLockProvider` it is disabled with the lock's
+     * reason, as every committing button is. Default `true`: an answer the server keeps is a
+     * write, and the demo, a lapsed plan or an offline device refuse it (keksdose's price
+     * pool). `false` for a consent that only this device keeps.
+     */
+    commit?: CommitScope;
+    labels?: LabelOverride<ConsentAgainLabels>;
+    className?: string;
+}
+/** `frame="card"`: everything, where the question stays until it is answered. */
+export interface ConsentAgainCardProps extends ConsentAgainNoticeBase {
+    frame: "card";
+    /** The full text agreed to before and the one asked for now, one paragraph per entry,
+     *  behind a disclosure. Left out, no disclosure. */
+    wording?: {
+        before: readonly ReactNode[];
+        now: readonly ReactNode[];
+    };
+    /** Left out for a reader who may not answer (a guest, a member who is not the owner):
+     *  no Agree, and {@link note} says who can. */
+    onAgree?: () => void;
+    /** A quiet line under the list — why this reader cannot agree. */
+    note?: ReactNode;
+    /** The title's element. Default `h3`; the wording's two headings are one level below
+     *  (a `div` title, `div` headings). */
+    headingAs?: "div" | "h2" | "h3" | "h4";
+}
+/** `frame="banner"`: the short form, where the reader is about to do what waits for it. */
+export interface ConsentAgainBannerProps extends ConsentAgainNoticeBase {
+    frame: "banner";
+    /** Always there: the banner is only shown to a reader who may answer. */
+    onAgree: () => void;
+    /** The ×: the banner does not hide itself — the caller removes it and remembers that it
+     *  did, and asks again later. "Not now" is not a refusal. */
+    onNotNow: () => void;
+    /** The quiet last line under the unfolded list: where the full wording is (a link to
+     *  the card). */
+    wordingLink?: ReactNode;
+}
+export type ConsentAgainNoticeProps = ConsentAgainCardProps | ConsentAgainBannerProps;
+/**
+ * "What you agreed to has changed — agree again?" (0.55): the question an app asks when the
+ * text a consent was given to has changed, and the consent is needed again before what it
+ * covers goes on. keksdose built it first (shared/components/consent-again-notice.tsx, for
+ * its price pool's second consent text, price pool v2 plan §6), display-only so it could be
+ * lifted as it is: every word of the subject and both choices are the app's, and nothing
+ * here knows a consent version or where "Not now" is remembered.
+ *
+ * Two frames, which do not hold the same parts:
+ *
+ * - `card` — everything, for the settings page where the question stays until it is
+ *   answered: an info-toned card with the title, the intro, the "what's new" list in front
+ *   and the full wording before and now behind a disclosure. No "Not now": there is nothing
+ *   for it to do there. A reader who may not answer gets no Agree, and the app's `note`.
+ * - `banner` — the short form, where the reader is about to do what waits for the answer:
+ *   one or two sentences, the same list one tap away in the banner (informed consent wants
+ *   it beside Agree), Agree as the action and "Not now" as the ×. The old and new wording
+ *   is not in it — two folding levels in a callout is too much, and on a 390px phone the
+ *   banner with everything was ~600px — so the type takes none; `wordingLink` points to
+ *   the card.
+ *
+ * Never a modal: the app stays usable without an answer, and "Not now" is not a refusal
+ * (Marcel, 2026-10-24: two choices only, Agree and Not now).
+ *
+ * On the card the old text is a `<del>` and the new an `<ins>`, each paragraph led by a
+ * visually hidden "Removed:" / "Added:": a line-through is not announced, and colour alone
+ * must not carry the meaning.
+ */
+export declare function ConsentAgainNotice(props: ConsentAgainNoticeProps): import("react").JSX.Element;

package/dist/components/consent-again-notice.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { AlertBanner } from "./alert-banner.js";
+import { Button } from "./button.js";
+import { Card, CardTitle } from "./card.js";
+import { Disclosure } from "./disclosure.js";
+import { DEFAULT_CONSENT_AGAIN_LABELS } from "./consent-again-notice-labels.js";
+const SUB_HEADING = { div: "div", h2: "h3", h3: "h4", h4: "h5" };
+function ChangeList({ changes }) {
+  return /* @__PURE__ */ jsx("ul", { className: "list-disc space-y-1 ps-5 text-sm text-secondary", "data-slot": "consent-changes", children: changes.map((change, i) => (
+    // The list is the caller's fixed copy, in a fixed order: the index is its key.
+    /* @__PURE__ */ jsx("li", { children: change }, i)
+  )) });
+}
+function ConsentAgainNotice(props) {
+  const { title, intro, changes, onAgree, agreePending = false, commit = true, className } = props;
+  const labels = useKitLabels("consentAgain", DEFAULT_CONSENT_AGAIN_LABELS, props.labels);
+  const agree = onAgree && /* @__PURE__ */ jsx(Button, { commit, pending: agreePending, onClick: onAgree, children: labels.agree });
+  if (props.frame === "banner") {
+    return /* @__PURE__ */ jsx(
+      AlertBanner,
+      {
+        tone: "info",
+        variant: "box",
+        action: agree,
+        onDismiss: props.onNotNow,
+        dismissLabel: labels.notNow,
+        className,
+        "data-consent-again": "banner",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-secondary", children: intro })
+          ] }),
+          /* @__PURE__ */ jsxs(Disclosure, { variant: "bare", title: labels.changesToggle, children: [
+            /* @__PURE__ */ jsx(ChangeList, { changes }),
+            props.wordingLink != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: props.wordingLink })
+          ] })
+        ] })
+      }
+    );
+  }
+  const { wording, note, headingAs = "h3" } = props;
+  const Sub = SUB_HEADING[headingAs];
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      tone: "info",
+      toneStrength: "strong",
+      toneFill: true,
+      density: "compact",
+      padding: "md",
+      className: cn("space-y-3", className),
+      "data-consent-again": "card",
+      children: [
+        /* @__PURE__ */ jsx(CardTitle, { as: headingAs, children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary", children: intro }),
+        /* @__PURE__ */ jsx(ChangeList, { changes }),
+        wording && /* @__PURE__ */ jsx(Disclosure, { variant: "bare", title: labels.wordingToggle, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 pt-2 text-sm text-secondary", children: [
+          /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(Sub, { className: "text-xs font-medium text-primary", children: labels.beforeHeading }),
+            wording.before.map((text, i) => /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsxs("del", { children: [
+              /* @__PURE__ */ jsxs("span", { className: "sr-only-fixed", children: [
+                labels.removed,
+                " "
+              ] }),
+              text
+            ] }) }, i))
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(Sub, { className: "text-xs font-medium text-primary", children: labels.nowHeading }),
+            wording.now.map((text, i) => /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsxs("ins", { className: "no-underline", children: [
+              /* @__PURE__ */ jsxs("span", { className: "sr-only-fixed", children: [
+                labels.added,
+                " "
+              ] }),
+              text
+            ] }) }, i))
+          ] })
+        ] }) }),
+        note != null && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: note }),
+        agree && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: agree })
+      ]
+    }
+  );
+}
+export {
+  ConsentAgainNotice,
+  DEFAULT_CONSENT_AGAIN_LABELS
+};
+//# sourceMappingURL=consent-again-notice.js.map

package/dist/components/consent-again-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/consent-again-notice.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Button } from \"./button\";\nimport { Card, CardTitle } from \"./card\";\nimport { Disclosure } from \"./disclosure\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DEFAULT_CONSENT_AGAIN_LABELS, type ConsentAgainLabels } from \"./consent-again-notice-labels\";\n\nexport { DEFAULT_CONSENT_AGAIN_LABELS };\nexport type { ConsentAgainLabels };\n\ninterface ConsentAgainNoticeBase {\n  /** What changed, as a headline: \"Price sharing has changed — please agree again\". */\n  title: ReactNode;\n  /** What holds until the answer — what stops, what goes on. */\n  intro: ReactNode;\n  /** The \"what's new\" list, one entry per change, in the reader's terms. */\n  changes: readonly ReactNode[];\n  /** Agree is busy: the consent is on its way to the server. */\n  agreePending?: boolean;\n  /**\n   * Agree commits — under a locked `WriteLockProvider` it is disabled with the lock's\n   * reason, as every committing button is. Default `true`: an answer the server keeps is a\n   * write, and the demo, a lapsed plan or an offline device refuse it (keksdose's price\n   * pool). `false` for a consent that only this device keeps.\n   */\n  commit?: CommitScope;\n  labels?: LabelOverride<ConsentAgainLabels>;\n  className?: string;\n}\n\n/** `frame=\"card\"`: everything, where the question stays until it is answered. */\nexport interface ConsentAgainCardProps extends ConsentAgainNoticeBase {\n  frame: \"card\";\n  /** The full text agreed to before and the one asked for now, one paragraph per entry,\n   *  behind a disclosure. Left out, no disclosure. */\n  wording?: {\n    before: readonly ReactNode[];\n    now: readonly ReactNode[];\n  };\n  /** Left out for a reader who may not answer (a guest, a member who is not the owner):\n   *  no Agree, and {@link note} says who can. */\n  onAgree?: () => void;\n  /** A quiet line under the list — why this reader cannot agree. */\n  note?: ReactNode;\n  /** The title's element. Default `h3`; the wording's two headings are one level below\n   *  (a `div` title, `div` headings). */\n  headingAs?: \"div\" | \"h2\" | \"h3\" | \"h4\";\n}\n\n/** `frame=\"banner\"`: the short form, where the reader is about to do what waits for it. */\nexport interface ConsentAgainBannerProps extends ConsentAgainNoticeBase {\n  frame: \"banner\";\n  /** Always there: the banner is only shown to a reader who may answer. */\n  onAgree: () => void;\n  /** The ×: the banner does not hide itself — the caller removes it and remembers that it\n   *  did, and asks again later. \"Not now\" is not a refusal. */\n  onNotNow: () => void;\n  /** The quiet last line under the unfolded list: where the full wording is (a link to\n   *  the card). */\n  wordingLink?: ReactNode;\n}\n\nexport type ConsentAgainNoticeProps = ConsentAgainCardProps | ConsentAgainBannerProps;\n\nconst SUB_HEADING = { div: \"div\", h2: \"h3\", h3: \"h4\", h4: \"h5\" } as const;\n\nfunction ChangeList({ changes }: { changes: readonly ReactNode[] }) {\n  return (\n    <ul className=\"list-disc space-y-1 ps-5 text-sm text-secondary\" data-slot=\"consent-changes\">\n      {changes.map((change, i) => (\n        // The list is the caller's fixed copy, in a fixed order: the index is its key.\n        <li key={i}>{change}</li>\n      ))}\n    </ul>\n  );\n}\n\n/**\n * \"What you agreed to has changed — agree again?\" (0.55): the question an app asks when the\n * text a consent was given to has changed, and the consent is needed again before what it\n * covers goes on. keksdose built it first (shared/components/consent-again-notice.tsx, for\n * its price pool's second consent text, price pool v2 plan §6), display-only so it could be\n * lifted as it is: every word of the subject and both choices are the app's, and nothing\n * here knows a consent version or where \"Not now\" is remembered.\n *\n * Two frames, which do not hold the same parts:\n *\n * - `card` — everything, for the settings page where the question stays until it is\n *   answered: an info-toned card with the title, the intro, the \"what's new\" list in front\n *   and the full wording before and now behind a disclosure. No \"Not now\": there is nothing\n *   for it to do there. A reader who may not answer gets no Agree, and the app's `note`.\n * - `banner` — the short form, where the reader is about to do what waits for the answer:\n *   one or two sentences, the same list one tap away in the banner (informed consent wants\n *   it beside Agree), Agree as the action and \"Not now\" as the ×. The old and new wording\n *   is not in it — two folding levels in a callout is too much, and on a 390px phone the\n *   banner with everything was ~600px — so the type takes none; `wordingLink` points to\n *   the card.\n *\n * Never a modal: the app stays usable without an answer, and \"Not now\" is not a refusal\n * (Marcel, 2026-10-24: two choices only, Agree and Not now).\n *\n * On the card the old text is a `<del>` and the new an `<ins>`, each paragraph led by a\n * visually hidden \"Removed:\" / \"Added:\": a line-through is not announced, and colour alone\n * must not carry the meaning.\n */\nexport function ConsentAgainNotice(props: ConsentAgainNoticeProps) {\n  const { title, intro, changes, onAgree, agreePending = false, commit = true, className } = props;\n  const labels = useKitLabels(\"consentAgain\", DEFAULT_CONSENT_AGAIN_LABELS, props.labels);\n  const agree = onAgree && (\n    <Button commit={commit} pending={agreePending} onClick={onAgree}>\n      {labels.agree}\n    </Button>\n  );\n\n  if (props.frame === \"banner\") {\n    // `actionPlacement` stays at its default, `own-line`: on a phone Agree sits under the\n    // text instead of squeezing it into a column beside the button.\n    return (\n      <AlertBanner\n        tone=\"info\"\n        variant=\"box\"\n        action={agree}\n        onDismiss={props.onNotNow}\n        dismissLabel={labels.notNow}\n        className={className}\n        data-consent-again=\"banner\"\n      >\n        <div className=\"space-y-1\">\n          <p>\n            <span className=\"font-medium\">{title}</span> <span className=\"text-secondary\">{intro}</span>\n          </p>\n          <Disclosure variant=\"bare\" title={labels.changesToggle}>\n            <ChangeList changes={changes} />\n            {props.wordingLink != null && <p className=\"mt-1 text-xs\">{props.wordingLink}</p>}\n          </Disclosure>\n        </div>\n      </AlertBanner>\n    );\n  }\n\n  const { wording, note, headingAs = \"h3\" } = props;\n  const Sub = SUB_HEADING[headingAs];\n  return (\n    <Card\n      tone=\"info\"\n      toneStrength=\"strong\"\n      toneFill\n      density=\"compact\"\n      padding=\"md\"\n      className={cn(\"space-y-3\", className)}\n      data-consent-again=\"card\"\n    >\n      <CardTitle as={headingAs}>{title}</CardTitle>\n      <p className=\"text-sm text-secondary\">{intro}</p>\n      <ChangeList changes={changes} />\n      {wording && (\n        <Disclosure variant=\"bare\" title={labels.wordingToggle}>\n          <div className=\"space-y-3 pt-2 text-sm text-secondary\">\n            <section className=\"space-y-1\">\n              <Sub className=\"text-xs font-medium text-primary\">{labels.beforeHeading}</Sub>\n              {wording.before.map((text, i) => (\n                <p key={i}>\n                  <del>\n                    <span className=\"sr-only-fixed\">{labels.removed} </span>\n                    {text}\n                  </del>\n                </p>\n              ))}\n            </section>\n            <section className=\"space-y-1\">\n              <Sub className=\"text-xs font-medium text-primary\">{labels.nowHeading}</Sub>\n              {wording.now.map((text, i) => (\n                <p key={i}>\n                  <ins className=\"no-underline\">\n                    <span className=\"sr-only-fixed\">{labels.added} </span>\n                    {text}\n                  </ins>\n                </p>\n              ))}\n            </section>\n          </div>\n        </Disclosure>\n      )}\n      {note != null && <p className=\"text-xs text-muted\">{note}</p>}\n      {agree && <div className=\"flex flex-wrap gap-2\">{agree}</div>}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/country-select.js

@@ -9,7 +9,7 @@ import { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, Floatin
 import {
   assignRef,
   EndHintRow,
-  LockedReason,
+  LockFrame,
   mergeDescribedBy,
   useFieldMessages,
   useLockReason
@@ -223,12 +223,7 @@ function CountrySelect({
       ]
     }
   );
-  const control = locked ? (
-    // Button's frame: the line under the trigger, or the Tooltip with a hidden copy for
-    // `aria-describedby`. `items-stretch`: in the line's column the trigger keeps the
-    // field's full width.
-    /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "flex w-full items-stretch", children: trigger })
-  ) : trigger;
+  const control = /* @__PURE__ */ jsx(LockFrame, { lock, display: disabledReasonDisplay, className: "flex w-full items-stretch", children: trigger });
   const box = label !== void 0 ? /* @__PURE__ */ jsx(FloatingField, { htmlFor: triggerId, label, staticLabel: true, hint: field.labelHint, children: control }) : (
     // No label line to ride: a "?" goes at the field's end, outside the box, as on an
     // unlabelled Select.