@eifi1/ui-kit 0.35.0 → 0.37.0

package/dist/components/icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent } from \"../lib/presence\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { LabelStrip, useFieldMessages } from \"./field-parts\";\nimport { DEFAULT_ICON_PICKER_LABELS } from \"./icon-picker-labels\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\n// Defined in ./icon-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ICON_PICKER_LABELS };\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the grid, describing it. */\n  hint?: ReactNode;\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the grid (DUP-2). Only with a label.\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    describedBy: ariaDescribedBy,\n    reasonId: mixed && mixedId,\n  });\n  const [query, setQuery] = useState(\"\");\n  // Case- and accent-insensitive, so \"cafe\" finds \"Café\" — every kit list's fold (DUP-5).\n  const needle = foldForSearch(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => foldForSearch(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={messages.describedBy}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-primary\" : \"text-secondary\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-muted\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled} className={className}>\n      {picker}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent } from \"../lib/presence\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { LabelStrip, useFieldMessages, type FieldHelpProps } from \"./field-parts\";\nimport { DEFAULT_ICON_PICKER_LABELS } from \"./icon-picker-labels\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\n// Defined in ./icon-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ICON_PICKER_LABELS };\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\">,\n    FieldHelpProps {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the grid, describing it. */\n  hint?: ReactNode;\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  help,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the grid (DUP-2). Only with a label, the\n  // help's \"?\" too (0.36).\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    help: labelled ? help : undefined,\n    name: label,\n    describedBy: ariaDescribedBy,\n    reasonId: mixed && mixedId,\n  });\n  const [query, setQuery] = useState(\"\");\n  // Case- and accent-insensitive, so \"cafe\" finds \"Café\" — every kit list's fold (DUP-5).\n  const needle = foldForSearch(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => foldForSearch(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={messages.describedBy}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-primary\" : \"text-secondary\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-muted\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled} className={className}>\n      {picker}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,10 +1,10 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { type ComboClearValue, type ComboOption } from "./combobox-core.js";
-import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 import { type CommitScope } from "./write-lock.js";
 /** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}
  *  for why the div's spellings of them are omitted. */
-export interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange"> {
+export interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange">, FieldHelpProps {
     /** Selected option id; `null` or `clearValue` when nothing is selected. */
     value: V | C | null;
     /** Required and unanswered — see {@link Combobox}'s `invalid`. */

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

@@ -63,6 +63,7 @@ function InlineEntityCombobox(props) {
     invalid,
     error,
     hint,
+    help,
     ref,
     "aria-label": ariaLabel,
     // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s
@@ -74,7 +75,7 @@ function InlineEntityCombobox(props) {
     ...rest
   } = props;
   const value = rawValue == null || rawValue === clearValue ? null : rawValue;
-  const hintParts = useFieldHint(hint, ariaDescribedBy);
+  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });
   const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);
   const generated = useId();
   const fieldId = id ?? generated;

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

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

package/dist/components/input.d.ts

@@ -1,8 +1,8 @@
 import type { InputHTMLAttributes, ReactNode, Ref } from "react";
 import type { CommitScope } from "./write-lock.js";
-import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 import { type CharacterCountLabels, type PasswordRevealLabels } from "./field-base.js";
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldHelpProps {
     label?: ReactNode;
     /** Classes for the `<input>` itself, as distinct from `className`, which
      *  styles the field WRAPPER once a `label` turns this into a FloatingField.

package/dist/components/input.js

@@ -53,6 +53,7 @@ function Input(props) {
     invalid,
     error,
     hint,
+    help,
     showCount,
     countLabels,
     passwordLabels,
@@ -65,7 +66,7 @@ function Input(props) {
   const generated = useId();
   const fieldId = id ?? generated;
   const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
   const maxLength = rest.maxLength;
   const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
   const length = useTypedLength(rest.value, rest.defaultValue);

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LockedReason,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\nimport {\n  CharacterCount,\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FieldGroup,\n  FloatingField,\n  FLOATING_INPUT_CLASS,\n  FLOATING_PLACEHOLDER_ON_FOCUS,\n  fieldBelow,\n  hasPlaceholderText,\n  useCharacterCountLabels,\n  useTypedLength,\n  type CharacterCountLabels,\n  type PasswordRevealLabels,\n} from \"./field-base\";\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Classes for the `<input>` itself, as distinct from `className`, which\n   *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n   *  Without it a labelled Input had no way to reach its own element — so\n   *  `tabular-nums` on a numeric text field, which NumberInput has supported\n   *  all along through the identically named prop, was simply unavailable. */\n  inputClassName?: string;\n  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n   *  heading. For the one field a form is about (a feedback subject, an account\n   *  name), never for a stack of them. Labelled fields only: the label is what\n   *  the placeholder falls back to once it goes `sr-only`. */\n  variant?: \"field\" | \"display\";\n  /** The field is required and unanswered, or holds something that cannot be\n   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n   *  since feedback #235.\n   *\n   *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n   *  attribute spreads onto the element and nothing styles it — there is no\n   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n   *  and painted the field exactly as if it were fine. Setting the prop sets the\n   *  attribute too, so the two can no longer be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong with the value, in the caller's own words (\"That IBAN has 21\n   *  digits\"). Rendered under the field, pointed at by the control's\n   *  `aria-describedby` — MERGED with any the caller already passed — and implies\n   *  `invalid`, so the field paints as well as announces. `invalid` alone still\n   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the\n   * app built the caption by hand under each field, and half of those never reached a\n   * screen reader). The {@link Select} rule, so every field reads alike:\n   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with\n   *    `aria-describedby` — after the caller's own ids, before the error's;\n   *  - anything else (a {@link FieldHint} \"?\") rides the label line beside the\n   *    animated label, as NumberInput's does — or, on a field with no label, sits at the\n   *    field's end edge outside the box, and `className` then styles that row.\n   */\n  hint?: ReactNode;\n  /**\n   * A live \"12/80\" under the field, with `maxLength` (keksdose K11 — the broadcast,\n   * support and handoff-note fields counted by hand). Read with the field as \"12 of 80\n   * characters\", and announced politely only on entering the last stretch and on\n   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored\n   * without a `maxLength`: a count with no limit is not what this answers. Counts\n   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;\n   * uncontrolled, `defaultValue` and then every change event — a value written from\n   * outside without one (a form library's `reset`) shows from the next keystroke.\n   */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** Names for the password reveal toggle, English by default — it is the one\n   *  string this component renders on its own behalf, and a German form was\n   *  reading it out in English. See {@link PasswordRevealLabels}. */\n  passwordLabels?: Partial<PasswordRevealLabels>;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a text field\n   * that SAVES itself: a name committed on blur (0.34, KS U10 — Kurvenschmiede's segment\n   * and profile names, behind a local `CommitInput`). `disabled` takes the field out of\n   * the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled` — NumberInput's\n   * lock (0.33.1), Autocomplete's. Nothing a save listens to is reported: not `onChange`,\n   * not `onBlur` (on a field that saves itself, blur IS the save), and not Enter, which is\n   * swallowed so the field does not submit the form around it; the caller's `onKeyDown`\n   * still hears every other key. The reason is a line under the field at Large and on a\n   * touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the\n   * input's `aria-describedby`, between the caption and the error. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through its\n   * form's Save leaves this off and stays editable under the lock — the Save takes\n   * `commit`. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): as\n   *  `forwardRef`, with a `displayName` line beside it, this module could not drop an\n   *  unused component, and `{ Spinner }` brought Input, Select and Textarea along. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** What a locked {@link Input} swallows of a key: Enter, which would submit the form. */\nfunction swallowEnter(onKeyDown: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined) {\n  return (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      return;\n    }\n    onKeyDown?.(e);\n  };\n}\n\nexport function Input(props: InputProps) {\n  const {\n    ref,\n    className,\n    inputClassName,\n    label,\n    id,\n    placeholder,\n    type,\n    variant = \"field\",\n    invalid,\n    error,\n    hint,\n    showCount,\n    countLabels,\n    passwordLabels,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ...rest\n  } = props;\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The\n  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under\n  // the control must not rebuild it, or focus and the caret are lost mid-edit.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"]);\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  // The lock (0.34, KS U10): focusable, `readOnly`, nothing a save listens to is\n  // reported — see `disabledReason`.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // Caller's, caption, count, a lock's reason — then the error, appended by the hook.\n    mergeDescribedBy(hintParts.describedBy, counting && countId, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = locked\n    ? undefined\n    : counting\n      ? (e: ChangeEvent<HTMLInputElement>) => {\n          length.track(e.target.value);\n          rest.onChange?.(e);\n        }\n      : rest.onChange;\n  // Locked, these win over what the caller's spread carried: focusable rather than\n  // `disabled`, `readOnly`, no blur reported (blur is a self-saving field's save), and\n  // Enter swallowed. Spread AFTER `rest` on every branch's input.\n  const lockProps = locked\n    ? {\n        disabled: undefined,\n        readOnly: true,\n        \"aria-disabled\": true as const,\n        onBlur: undefined,\n        onKeyDown: swallowEnter(rest.onKeyDown),\n      }\n    : undefined;\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes its outermost box — so `className` (a width, a flex or grid cell) moves onto\n  // that, as on Select, and the form keeps its layout. `block` so a full-width field\n  // stays full width in it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  const asDisplay = usePhoneLayout() && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const passwordText = useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      // `tabIndex={-1}` sat here, which made this a painted, clickable control that\n      // Tab stepped straight over — on the one field whose value cannot be checked by\n      // looking at it. There is no mouse-only case for a reveal toggle; the people who\n      // cannot see what they typed are exactly who it is for. It is a tab stop now,\n      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the\n      // input underneath and stays put while focus moves onto the button on top of it.\n      onClick={() => setRevealed((v) => !v)}\n      // …and since it is a tab stop, a field the user may not edit must not hand the\n      // keyboard a control that shows what is in it — a locked one included.\n      disabled={rest.disabled || locked}\n      aria-label={revealed ? passwordText.hide : passwordText.show}\n      aria-pressed={revealed}\n      className={cn(\n        \"absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-placeholder transition-colors hover:text-secondary focus:outline-none disabled:cursor-default disabled:opacity-50\",\n        FOCUS_RING,\n      )}\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    // A \"?\" with no label line to ride goes at the end edge, outside the box, and\n    // `className` moves to that row (see `hint`); without one nothing moves.\n    const endHint = hintParts.labelHint;\n    const ownClass = endHint === undefined ? boxClass : undefined;\n    if (!isPassword) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <EndHintRow hint={endHint} className={boxClass}>\n              <input\n                ref={ref}\n                id={id}\n                type={type}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n                // carried, or setting `invalid` would have quietly deleted a caller's own\n                // `aria-invalid`. The prop is the one that also paints; a bare attribute\n                // still announces, which is all it ever did.\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                // Likewise merged rather than replaced — see {@link useFieldError}.\n                aria-describedby={describedBy}\n                onClick={handleClick}\n                onChange={onChange}\n                className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n            </EndHintRow>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <EndHintRow hint={endHint} className={boxClass}>\n            <div className={cn(\"relative\", ownClass)}>\n              <input\n                ref={ref}\n                id={id}\n                type={effectiveType}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                aria-describedby={describedBy}\n                onChange={onChange}\n                className={cn(FIELD_BASE, \"pe-9\", inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n              {revealToggle}\n            </div>\n          </EndHintRow>,\n        )}\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={hintParts.labelHint}\n        >\n          <input\n            ref={ref}\n            id={fieldId}\n            type={effectiveType}\n            // A labelled field with no placeholder of its own gets a single space, which\n            // feeds the floating label's peer-placeholder-shown trick. A caller's own is\n            // kept and shown on focus, once the label has floated out of its way (kastlan\n            // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no\n            // float left to drive, and an empty borderless line would say nothing at all\n            // — so there the label text is the placeholder when the caller gave none.\n            placeholder={\n              asDisplay\n                ? (placeholder ?? (typeof label === \"string\" ? label : \" \"))\n                : ownPlaceholder\n                  ? placeholder\n                  : \" \"\n            }\n            {...rest}\n            {...lockProps}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onClick={handleClick}\n            onChange={onChange}\n            className={cn(\n              asDisplay\n                ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n                : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),\n              isPassword && \"pe-9\",\n              inputClassName,\n              isInvalid && FIELD_INVALID,\n              locked && \"cursor-not-allowed\",\n            )}\n          />\n          {revealToggle}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LockedReason,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\nimport {\n  CharacterCount,\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FieldGroup,\n  FloatingField,\n  FLOATING_INPUT_CLASS,\n  FLOATING_PLACEHOLDER_ON_FOCUS,\n  fieldBelow,\n  hasPlaceholderText,\n  useCharacterCountLabels,\n  useTypedLength,\n  type CharacterCountLabels,\n  type PasswordRevealLabels,\n} from \"./field-base\";\n\n// Native date/time inputs only reveal the calendar via the tiny trailing icon;\n// open the picker on a click anywhere in the field instead (feedback #224).\nconst PICKER_TYPES = new Set([\"date\", \"datetime-local\", \"month\", \"time\", \"week\"]);\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldHelpProps {\n  label?: ReactNode;\n  /** Classes for the `<input>` itself, as distinct from `className`, which\n   *  styles the field WRAPPER once a `label` turns this into a FloatingField.\n   *  Without it a labelled Input had no way to reach its own element — so\n   *  `tabular-nums` on a numeric text field, which NumberInput has supported\n   *  all along through the identically named prop, was simply unavailable. */\n  inputClassName?: string;\n  /** {@link FIELD_DISPLAY} — on a phone, drop the chrome and set the value as a\n   *  heading. For the one field a form is about (a feedback subject, an account\n   *  name), never for a stack of them. Labelled fields only: the label is what\n   *  the placeholder falls back to once it goes `sr-only`. */\n  variant?: \"field\" | \"display\";\n  /** The field is required and unanswered, or holds something that cannot be\n   *  saved — {@link FIELD_INVALID}, the same rose border/ring `Select` has worn\n   *  since feedback #235.\n   *\n   *  It exists here because writing `aria-invalid` by hand did NOT do this. The\n   *  attribute spreads onto the element and nothing styles it — there is no\n   *  `[aria-invalid]` rule in this package or in either consumer's stylesheet —\n   *  so three Keksdose dialogs flagged a mismatched passphrase to a screen reader\n   *  and painted the field exactly as if it were fine. Setting the prop sets the\n   *  attribute too, so the two can no longer be spelled separately. */\n  invalid?: boolean;\n  /** What is wrong with the value, in the caller's own words (\"That IBAN has 21\n   *  digits\"). Rendered under the field, pointed at by the control's\n   *  `aria-describedby` — MERGED with any the caller already passed — and implies\n   *  `invalid`, so the field paints as well as announces. `invalid` alone still\n   *  covers the case where the message lives elsewhere. See {@link useFieldError}. */\n  error?: ReactNode;\n  /**\n   * Standing advice for the field (keksdose K4: Input had `error` but no `hint`, so the\n   * app built the caption by hand under each field, and half of those never reached a\n   * screen reader). The {@link Select} rule, so every field reads alike:\n   *  - plain TEXT (a string or a number) is a caption UNDER the field, attached with\n   *    `aria-describedby` — after the caller's own ids, before the error's;\n   *  - anything else (a {@link FieldHint} \"?\") rides the label line beside the\n   *    animated label, as NumberInput's does — or, on a field with no label, sits at the\n   *    field's end edge outside the box, and `className` then styles that row.\n   */\n  hint?: ReactNode;\n  /**\n   * A live \"12/80\" under the field, with `maxLength` (keksdose K11 — the broadcast,\n   * support and handoff-note fields counted by hand). Read with the field as \"12 of 80\n   * characters\", and announced politely only on entering the last stretch and on\n   * reaching the limit — never on every keystroke. See {@link CharacterCount}. Ignored\n   * without a `maxLength`: a count with no limit is not what this answers. Counts\n   * UTF-16 code units, as `maxLength` itself does. Controlled, it counts `value`;\n   * uncontrolled, `defaultValue` and then every change event — a value written from\n   * outside without one (a form library's `reset`) shows from the next keystroke.\n   */\n  showCount?: boolean;\n  /** The counter's words. See {@link CharacterCountLabels}. */\n  countLabels?: Partial<CharacterCountLabels>;\n  /** Names for the password reveal toggle, English by default — it is the one\n   *  string this component renders on its own behalf, and a German form was\n   *  reading it out in English. See {@link PasswordRevealLabels}. */\n  passwordLabels?: Partial<PasswordRevealLabels>;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a text field\n   * that SAVES itself: a name committed on blur (0.34, KS U10 — Kurvenschmiede's segment\n   * and profile names, behind a local `CommitInput`). `disabled` takes the field out of\n   * the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled` — NumberInput's\n   * lock (0.33.1), Autocomplete's. Nothing a save listens to is reported: not `onChange`,\n   * not `onBlur` (on a field that saves itself, blur IS the save), and not Enter, which is\n   * swallowed so the field does not submit the form around it; the caller's `onKeyDown`\n   * still hears every other key. The reason is a line under the field at Large and on a\n   * touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`), and on the\n   * input's `aria-describedby`, between the caption and the error. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through its\n   * form's Save leaves this off and stays editable under the lock — the Save takes\n   * `commit`. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10): as\n   *  `forwardRef`, with a `displayName` line beside it, this module could not drop an\n   *  unused component, and `{ Spinner }` brought Input, Select and Textarea along. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** What a locked {@link Input} swallows of a key: Enter, which would submit the form. */\nfunction swallowEnter(onKeyDown: ((e: KeyboardEvent<HTMLInputElement>) => void) | undefined) {\n  return (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      return;\n    }\n    onKeyDown?.(e);\n  };\n}\n\nexport function Input(props: InputProps) {\n  const {\n    ref,\n    className,\n    inputClassName,\n    label,\n    id,\n    placeholder,\n    type,\n    variant = \"field\",\n    invalid,\n    error,\n    hint,\n    help,\n    showCount,\n    countLabels,\n    passwordLabels,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    ...rest\n  } = props;\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup. The\n  // same for `hint` and `showCount` (keksdose, 0.22): a caption coming and going under\n  // the control must not rebuild it, or focus and the caret are lost mid-edit.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const countId = useId();\n  const hintParts = useFieldHint(hint, rest[\"aria-describedby\"], { help, name: label ?? rest[\"aria-label\"] });\n  const maxLength = rest.maxLength;\n  const counting = Boolean(showCount) && typeof maxLength === \"number\" && maxLength > 0;\n  const length = useTypedLength(rest.value, rest.defaultValue);\n  const countText = useCharacterCountLabels(countLabels);\n  // The lock (0.34, KS U10): focusable, `readOnly`, nothing a save listens to is\n  // reported — see `disabledReason`.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // Caller's, caption, count, a lock's reason — then the error, appended by the hook.\n    mergeDescribedBy(hintParts.describedBy, counting && countId, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const counter = counting ? (\n    <CharacterCount\n      id={countId}\n      used={length.used}\n      max={maxLength}\n      labels={countText}\n      caption={<FieldCaption parts={hintParts} className=\"mt-0\" />}\n    />\n  ) : null;\n  const below = fieldBelow(hintParts, counter, errorEl);\n  const onChange = locked\n    ? undefined\n    : counting\n      ? (e: ChangeEvent<HTMLInputElement>) => {\n          length.track(e.target.value);\n          rest.onChange?.(e);\n        }\n      : rest.onChange;\n  // Locked, these win over what the caller's spread carried: focusable rather than\n  // `disabled`, `readOnly`, no blur reported (blur is a self-saving field's save), and\n  // Enter swallowed. Spread AFTER `rest` on every branch's input.\n  const lockProps = locked\n    ? {\n        disabled: undefined,\n        readOnly: true,\n        \"aria-disabled\": true as const,\n        onBlur: undefined,\n        onKeyDown: swallowEnter(rest.onKeyDown),\n      }\n    : undefined;\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes its outermost box — so `className` (a width, a flex or grid cell) moves onto\n  // that, as on Select, and the form keeps its layout. `block` so a full-width field\n  // stays full width in it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  const asDisplay = usePhoneLayout() && variant === \"display\";\n  // Password fields get a reveal toggle so users can check what they typed.\n  const isPassword = type === \"password\";\n  const [revealed, setRevealed] = useState(false);\n  const effectiveType = isPassword && revealed ? \"text\" : type;\n  const handleClick = PICKER_TYPES.has(type ?? \"\")\n    ? (e: MouseEvent<HTMLInputElement>) => {\n        rest.onClick?.(e);\n        try {\n          // showPicker throws if unsupported or not user-activated — a click is\n          // a valid activation, so this is safe; guard for older browsers.\n          (e.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();\n        } catch {\n          /* ignore */\n        }\n      }\n    : rest.onClick;\n  const passwordText = useKitLabels(\"passwordReveal\", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);\n  const revealToggle = isPassword ? (\n    <button\n      type=\"button\"\n      // `tabIndex={-1}` sat here, which made this a painted, clickable control that\n      // Tab stepped straight over — on the one field whose value cannot be checked by\n      // looking at it. There is no mouse-only case for a reveal toggle; the people who\n      // cannot see what they typed are exactly who it is for. It is a tab stop now,\n      // and it needs a focus ring of its own, because FIELD_BASE's ring belongs to the\n      // input underneath and stays put while focus moves onto the button on top of it.\n      onClick={() => setRevealed((v) => !v)}\n      // …and since it is a tab stop, a field the user may not edit must not hand the\n      // keyboard a control that shows what is in it — a locked one included.\n      disabled={rest.disabled || locked}\n      aria-label={revealed ? passwordText.hide : passwordText.show}\n      aria-pressed={revealed}\n      className={cn(\n        \"absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-placeholder transition-colors hover:text-secondary focus:outline-none disabled:cursor-default disabled:opacity-50\",\n        FOCUS_RING,\n      )}\n    >\n      {revealed ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n    </button>\n  ) : null;\n  if (label === undefined) {\n    // A \"?\" with no label line to ride goes at the end edge, outside the box, and\n    // `className` moves to that row (see `hint`); without one nothing moves.\n    const endHint = hintParts.labelHint;\n    const ownClass = endHint === undefined ? boxClass : undefined;\n    if (!isPassword) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <EndHintRow hint={endHint} className={boxClass}>\n              <input\n                ref={ref}\n                id={id}\n                type={type}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                // AFTER the spread, so the prop wins — but OR-ed with whatever the spread\n                // carried, or setting `invalid` would have quietly deleted a caller's own\n                // `aria-invalid`. The prop is the one that also paints; a bare attribute\n                // still announces, which is all it ever did.\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                // Likewise merged rather than replaced — see {@link useFieldError}.\n                aria-describedby={describedBy}\n                onClick={handleClick}\n                onChange={onChange}\n                className={cn(FIELD_BASE, ownClass, inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n            </EndHintRow>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <EndHintRow hint={endHint} className={boxClass}>\n            <div className={cn(\"relative\", ownClass)}>\n              <input\n                ref={ref}\n                id={id}\n                type={effectiveType}\n                placeholder={placeholder}\n                {...rest}\n                {...lockProps}\n                aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n                aria-describedby={describedBy}\n                onChange={onChange}\n                className={cn(FIELD_BASE, \"pe-9\", inputClassName, isInvalid && FIELD_INVALID, locked && \"cursor-not-allowed\")}\n              />\n              {revealToggle}\n            </div>\n          </EndHintRow>,\n        )}\n      </FieldGroup>\n    );\n  }\n  const ownPlaceholder = hasPlaceholderText(placeholder);\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField\n          className={boxClass}\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={hintParts.labelHint}\n        >\n          <input\n            ref={ref}\n            id={fieldId}\n            type={effectiveType}\n            // A labelled field with no placeholder of its own gets a single space, which\n            // feeds the floating label's peer-placeholder-shown trick. A caller's own is\n            // kept and shown on focus, once the label has floated out of its way (kastlan\n            // 8) — see FLOATING_PLACEHOLDER_ON_FOCUS. With the label sr-only there is no\n            // float left to drive, and an empty borderless line would say nothing at all\n            // — so there the label text is the placeholder when the caller gave none.\n            placeholder={\n              asDisplay\n                ? (placeholder ?? (typeof label === \"string\" ? label : \" \"))\n                : ownPlaceholder\n                  ? placeholder\n                  : \" \"\n            }\n            {...rest}\n            {...lockProps}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            onClick={handleClick}\n            onChange={onChange}\n            className={cn(\n              asDisplay\n                ? cn(FIELD_DISPLAY, \"text-xl font-semibold leading-snug\")\n                : cn(FLOATING_INPUT_CLASS, ownPlaceholder && FLOATING_PLACEHOLDER_ON_FOCUS),\n              isPassword && \"pe-9\",\n              inputClassName,\n              isInvalid && FIELD_INVALID,\n              locked && \"cursor-not-allowed\",\n            )}\n          />\n          {revealToggle}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/month-picker.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { type LabelOverride } from "../i18n/kit-labels.js";
+import { type FieldHelpProps } from "./field-parts.js";
 import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels.js";
 /**
  * Every string the month picker can speak. The month and year names are NOT here —
@@ -39,7 +40,7 @@ export { DEFAULT_MONTH_PICKER_LABELS };
  * a `FormEvent`, and this one answers with a month key. Everything else reaches the
  * field's root, so a test id or a `data-tour` anchor can find it.
  */
-export interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
     /**
      * The selected month as a `"YYYY-MM"` key, or `""` for none.
      *

package/dist/components/month-picker.js

@@ -458,6 +458,7 @@ function MonthPicker(props) {
     invalid,
     error,
     hint,
+    help,
     size = "md",
     mode = "month",
     formatOptions,
@@ -492,7 +493,13 @@ function MonthPicker(props) {
     locale
   ) : placeholder ?? "";
   const id = useId();
-  const messages = useFieldMessages({ hint, error, describedBy: rest["aria-describedby"] });
+  const messages = useFieldMessages({
+    hint,
+    help,
+    name: label ?? rest["aria-label"],
+    error,
+    describedBy: rest["aria-describedby"]
+  });
   const [ownAria, wrapperRest] = splitTriggerAria(rest);
   const aria = { ...ownAria, "aria-describedby": messages.describedBy };
   const labelId = `${id}-label`;