@eifi1/ui-kit 0.21.0 → 0.23.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/month-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { Calendar, ChevronDown, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep, type Direction } from \"../lib/direction\";\nimport { monthKey, pad } from \"../lib/dates\";\nimport { Button, FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from \"./ui\";\nimport { Popover } from \"./popover\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * Every string the month picker can speak. The month and year names are NOT here —\n * they come from `Intl` in the `locale` prop, so they are already in the user's\n * language. What is left is the two icon-only year arrows, whose `aria-label` is the\n * only name they have, the panel's name, and a month cell's name.\n */\nexport interface MonthPickerLabels {\n  previousYear: string;\n  nextYear: string;\n  /** The popover's accessible name (`role=\"dialog\"`). */\n  panel: string;\n  /**\n   * Accessible name of one month cell, given that month and its year formatted in\n   * `locale` (\"August 2026\"). The cell's visible text is the short month alone, and\n   * \"Aug\" read out on its own does not say which year the grid is on.\n   */\n  month: (monthYear: string) => string;\n  /** `variant=\"stepper\"`: the icon-only arrows that step the value by one month. */\n  previousMonth: string;\n  nextMonth: string;\n  /** `variant=\"stepper\"`: the button that jumps to the current month. Visible text. */\n  today: string;\n}\n\n/** The English starting point every override is merged onto. Exported (unlike the\n *  calendar's) because it is asked for by name: a host building its own translation\n *  table can spread it rather than re-typing four keys to change one. */\nexport const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels = {\n  previousYear: \"Previous year\",\n  nextYear: \"Next year\",\n  panel: \"Choose a month\",\n  month: (monthYear) => monthYear,\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  today: \"Today\",\n};\n\n/** Merge caller overrides onto the English defaults. */\nfunction useMonthPickerLabels(partial?: Partial<MonthPickerLabels>): MonthPickerLabels {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  return useKitLabels(\"monthPicker\", DEFAULT_MONTH_PICKER_LABELS, partial);\n}\n\n/**\n * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries\n * a `FormEvent`, and this one answers with a month key. Everything else reaches the\n * field's root, so a test id or a `data-tour` anchor can find it.\n */\nexport interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The selected month as a `\"YYYY-MM\"` key, or `\"\"` for none.\n   *\n   * A string rather than `{ year, month }` or a `Date`, for the reason every date in\n   * this kit is one: it is what `monthKey()` in `lib/dates` produces, it sorts\n   * chronologically so the bounds are plain `<` / `>`, and it crosses a URL or an API\n   * without a serialiser. A `{ year, month }` caller converts with\n   * `` `${year}-${pad(month)}` `` (month 1–12) and back with `key.split(\"-\").map(Number)`.\n   */\n  value: string;\n  /** Called with the picked month as `\"YYYY-MM\"`. */\n  onChange: (month: string) => void;\n  /** Drives the month and year names (`Intl.DateTimeFormat`). Defaults to the\n   *  `<UiKitProvider>` locale, then the runtime's. */\n  locale?: string;\n  /**\n   * Inclusive bounds, as `\"YYYY-MM\"`. A full ISO date (`\"YYYY-MM-DD\"`) is accepted and\n   * read as its month, so a host holding \"the first day we have data for\" can pass it\n   * straight in. Months outside are shown but refuse selection; a year arrow is\n   * disabled once the whole year beyond it is out of bounds.\n   */\n  min?: string;\n  max?: string;\n  /** Embedded top-boundary label, matching the other field-shaped controls. */\n  label?: ReactNode;\n  /** Trigger text when `value` is `\"\"`. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** Intl options for the trigger's text (default: long month + numeric year). */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /**\n   * The month to ring as \"now\", as `\"YYYY-MM\"`. Defaults to the local calendar's\n   * current month; pass one to pin it (a test, a host with its own notion of today).\n   */\n  currentMonth?: string;\n  /** User-facing strings; see {@link MonthPickerLabels}. */\n  labels?: Partial<MonthPickerLabels>;\n  /** Extra classes for the field's root. */\n  className?: string;\n  /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger\n   *  sitting between two icon buttons in a toolbar. */\n  triggerClassName?: string;\n  /**\n   * `\"field\"` (default): the field-shaped trigger, for a form.\n   *\n   * `\"stepper\"`: the header of a month PAGE — the month as a heading that opens the\n   * grid, then Today and ‹ › stepping the value by one month. What a calendar page\n   * assembled by hand around the field (overriding its trigger to look like a\n   * heading). `label`, `placeholder`, `invalid` and `triggerClassName` are the field's\n   * and are not drawn here; with no `value` the arrows step from the current month.\n   */\n  variant?: \"field\" | \"stepper\";\n  /** `variant=\"stepper\"`: the heading level the month is set in (`<h2>` by default), or\n   *  `false` for no heading element — the page already has one for the month. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | false;\n  /** `variant=\"stepper\"`: draw the Today button. Default `true`. */\n  showToday?: boolean;\n}\n\n// ── Month keys ────────────────────────────────────────────────────────────\n\ninterface YearMonth {\n  year: number;\n  /** 1–12, as in the key. */\n  month: number;\n}\n\nconst KEY = /^(\\d{4})-(\\d{2})/;\n\nfunction parseMonth(key: string | undefined): YearMonth | null {\n  const m = key ? KEY.exec(key) : null;\n  if (!m) return null;\n  const month = Number(m[2]);\n  return month >= 1 && month <= 12 ? { year: Number(m[1]), month } : null;\n}\n\nfunction toKey({ year, month }: YearMonth): string {\n  return `${year}-${pad(month)}`;\n}\n\n/** Move a month key by whole months, carrying into the year. */\nfunction shiftMonth(ym: YearMonth, delta: number): YearMonth {\n  const index = ym.year * 12 + (ym.month - 1) + delta;\n  return { year: Math.floor(index / 12), month: (index % 12) + 1 };\n}\n\n/** A bound, normalised to its month key — so `\"2024-03-15\"` compares as `\"2024-03\"`. */\nfunction boundKey(bound: string | undefined): string | null {\n  const ym = parseMonth(bound);\n  return ym ? toKey(ym) : null;\n}\n\n/** Local-calendar Date for the 1st of a month, for `Intl` to format. */\nfunction firstOf({ year, month }: YearMonth): Date {\n  return new Date(year, month - 1, 1);\n}\n\nconst DEFAULT_TRIGGER_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\nconst MONTH_NAME_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\n\n// ── Trigger ───────────────────────────────────────────────────────────────\n\n/** Hand focus back to the trigger when the panel closes with focus still inside it. */\nfunction useFocusBackOnClose(open: boolean, triggerRef: RefObject<HTMLButtonElement | null>) {\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    const justClosed = wasOpen.current && !open;\n    wasOpen.current = open;\n    if (!justClosed) return;\n    // Only when focus went down with the panel. An outside click has already put it\n    // somewhere real, and dragging it back here would be worse than leaving it.\n    const active = document.activeElement;\n    if (!active || active === document.body) triggerRef.current?.focus();\n  }, [open, triggerRef]);\n}\n\n/**\n * The stepper's trigger: the month as a heading-sized button that opens the grid.\n *\n * Its own text is its name (\"September 2026\"), so it needs no label of its own, and\n * it is `aria-live` for the reason `MiniCalendar`'s caption is: pressing ‹ or › leaves\n * focus on the arrow, and the heading is the only thing that says where the arrow\n * went. A plain button with `aria-haspopup`, not the field's `combobox` — it does not\n * look or behave like a field, and a heading reading \"combobox\" is a surprise.\n */\nfunction MonthHeadingTrigger({\n  open,\n  toggle,\n  triggerRef,\n  text,\n  panelId,\n  disabled,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  text: string;\n  panelId: string;\n  disabled?: boolean;\n  aria: TriggerAria;\n}) {\n  useFocusBackOnClose(open, triggerRef);\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-label={aria[\"aria-label\"]}\n      aria-labelledby={aria[\"aria-labelledby\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        \"-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-[var(--text-primary)] transition-colors\",\n        \"hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n      )}\n    >\n      <span aria-live=\"polite\" className=\"truncate\">\n        {text || \"\\u00a0\"}\n      </span>\n      <ChevronDown aria-hidden className=\"size-4 shrink-0 text-[var(--text-muted)]\" />\n    </button>\n  );\n}\n\n/**\n * The field-shaped button that opens the grid. The same shape as `DatePicker`'s\n * trigger, for the same reasons written down there: `role=\"combobox\"` so it may carry\n * `aria-expanded` / `aria-invalid`, a name made of the label AND the value, and focus\n * handed back here when the panel closes with focus still inside it.\n */\nfunction MonthFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  panelId,\n  padded,\n  disabled,\n  invalid,\n  className,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  triggerText: string;\n  hasValue: boolean;\n  labelledBy: string;\n  /** The caller's naming attributes — see `trigger-aria.ts`. */\n  aria: TriggerAria;\n  valueId: string;\n  panelId: string;\n  padded: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  className?: string;\n}) {\n  useFocusBackOnClose(open, triggerRef);\n\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-invalid={invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined}\n      aria-labelledby={aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy}\n      aria-label={aria[\"aria-label\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        padded && FIELD_FLOATING_PAD,\n        disabled && \"cursor-not-allowed opacity-50\",\n        invalid && FIELD_INVALID,\n        className,\n      )}\n    >\n      {/* The U+00A0 fallback keeps the line box when there is no text — see\n          DatePicker. The value arrives capitalised (see `upperFirst`); this span does\n          NOT use `capitalize`, which upper-cases every WORD — \"Choose A Month\",\n          \"Septiembre De 2026\". */}\n      <span\n        id={valueId}\n        className={cn(\"truncate\", !hasValue && \"text-[var(--text-placeholder)]\")}\n      >\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n// ── Grid ──────────────────────────────────────────────────────────────────\n\nconst COLUMNS = 3;\n\n/**\n * The panel: a year caption between ‹ › arrows, over a 4×3 grid of months.\n *\n * Mounted only while the popover is open, so every opening starts from the current\n * value's year — a value moved from outside (a prev/next-month button beside the\n * field) is where the grid lands, with no effect needed to snap it back.\n *\n * A grid in the APG sense, like `MiniCalendar`: one tab stop (the roving tabindex),\n * the arrows walk the months — left/right by one, up/down by a row of three — and\n * walking off either end of the year MOVES the year rather than stopping. PageUp /\n * PageDown step a whole year. Out-of-bounds months are `aria-disabled`, not\n * `disabled`, so the roving tab stop never falls into a hole.\n */\nfunction MonthGrid({\n  value,\n  onPick,\n  locale,\n  minKey,\n  maxKey,\n  currentKey,\n  labels,\n}: {\n  value: YearMonth | null;\n  onPick: (key: string) => void;\n  locale: string | undefined;\n  minKey: string | null;\n  maxKey: string | null;\n  currentKey: string;\n  labels: MonthPickerLabels;\n}) {\n  const outOfBounds = (key: string) =>\n    Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n\n  // The month holding the tab order, and with it the year on screen — one piece of\n  // state, as in MiniCalendar, so the two cannot disagree. Opens on the value, or on\n  // the current month, pulled inside the bounds.\n  const [active, setActive] = useState<YearMonth>(() => {\n    const start = value ? toKey(value) : currentKey;\n    if (minKey && start < minKey) return parseMonth(minKey)!;\n    if (maxKey && start > maxKey) return parseMonth(maxKey)!;\n    return parseMonth(start)!;\n  });\n  const year = active.year;\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const captionId = `${useId()}-year`;\n\n  // Short names for the cells, long \"Month YYYY\" for their accessible names.\n  const shortNames = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { month: \"short\" });\n    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));\n  }, [locale]);\n  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);\n  const yearCaption = new Intl.DateTimeFormat(locale, { year: \"numeric\" }).format(\n    firstOf({ year, month: 1 }),\n  );\n\n  // A month whose cell must take focus after the next commit. Arrowing across a year\n  // boundary re-labels the same twelve buttons, so the one to focus is a DIFFERENT\n  // button from the one the key landed on.\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const key = pendingFocus.current;\n    if (!key) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-month=\"${key}\"]`)?.focus();\n  });\n\n  // Opened because the user asked to pick a month: land them on it. Runs before the\n  // popover's focus trap (a child's effect fires first), which then keeps this focus.\n  useEffect(() => {\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, []);\n\n  const moveTo = (next: YearMonth, focus: boolean) => {\n    if (focus) pendingFocus.current = toKey(next);\n    setActive(next);\n  };\n\n  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Left and right are VISUAL directions: in a right-to-left page the grid runs the\n    // other way, so \"right\" is the previous month there. The panel is portalled, but\n    // it carries the field's `dir` (see MonthPicker), so the nearest `dir` is right.\n    const step = horizontalStep(e.key, e.currentTarget);\n    const col = (active.month - 1) % COLUMNS;\n    let delta: number;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        delta = step;\n        break;\n      case \"ArrowUp\":\n        delta = -COLUMNS;\n        break;\n      case \"ArrowDown\":\n        delta = COLUMNS;\n        break;\n      case \"Home\":\n        delta = -col;\n        break;\n      case \"End\":\n        delta = COLUMNS - 1 - col;\n        break;\n      case \"PageUp\":\n        delta = -12;\n        break;\n      case \"PageDown\":\n        delta = 12;\n        break;\n      default:\n        return;\n    }\n    // Before any no-op check: these keys also scroll the panel, and a month that\n    // cannot move still must not move the page.\n    e.preventDefault();\n    if (delta !== 0) moveTo(shiftMonth(active, delta), true);\n  };\n\n  // An arrow is dead once EVERY month of the year it leads to is out of bounds.\n  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);\n  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);\n  const selectedKey = value ? toKey(value) : null;\n\n  const arrow =\n    \"flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent\";\n\n  return (\n    <div className=\"select-none\">\n      <div className=\"mb-1 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          aria-label={labels.previousYear}\n          disabled={prevBlocked}\n          // Focus stays on the arrow being pressed — only the grid moves.\n          onClick={() => moveTo(shiftMonth(active, -12), false)}\n          className={arrow}\n        >\n          {/* Mirrored in RTL, where \"previous\" points the other way. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n        {/* Names the grid, and `aria-live` so stepping a year says which one you are\n            on — the user pressing the arrow is not inside the grid to hear it change. */}\n        <div\n          id={captionId}\n          aria-live=\"polite\"\n          className=\"text-sm font-semibold tabular-nums text-[var(--text-primary)]\"\n        >\n          {yearCaption}\n        </div>\n        <button\n          type=\"button\"\n          aria-label={labels.nextYear}\n          disabled={nextBlocked}\n          onClick={() => moveTo(shiftMonth(active, 12), false)}\n          className={arrow}\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n      </div>\n      <div ref={gridRef} role=\"grid\" aria-labelledby={captionId} className=\"grid gap-1\">\n        {Array.from({ length: 12 / COLUMNS }, (_, row) => (\n          <div key={row} role=\"row\" className=\"grid grid-cols-3 gap-1\">\n            {Array.from({ length: COLUMNS }, (_, c) => {\n              const ym = { year, month: row * COLUMNS + c + 1 };\n              const key = toKey(ym);\n              const disabled = outOfBounds(key);\n              const selected = key === selectedKey;\n              const current = key === currentKey;\n              return (\n                <button\n                  key={c}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-month={key}\n                  tabIndex={ym.month === active.month ? 0 : -1}\n                  aria-label={labels.month(longName.format(firstOf(ym)))}\n                  aria-selected={selected}\n                  aria-disabled={disabled || undefined}\n                  aria-current={current ? \"date\" : undefined}\n                  onClick={() => {\n                    // The guard `disabled` would have been; see the component note.\n                    if (disabled) return;\n                    setActive(ym);\n                    onPick(key);\n                  }}\n                  onKeyDown={onCellKeyDown}\n                  className={cn(\n                    \"rounded px-2 py-1.5 text-sm capitalize transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    // A --brand ring on a --brand fill exists only in the DOM.\n                    selected && !disabled\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      : selected\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {shortNames[ym.month - 1]}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── Field ─────────────────────────────────────────────────────────────────\n\n/**\n * Month picker: a field showing the selected month (\"August 2026\"), opening a 12-month\n * grid with year arrows. For a value that IS a month — a budget period, a calendar\n * view, a statement — where a day picker would ask for a day nobody means.\n *\n * One component for the two app-local pickers it replaces: keksdose's budget-header\n * popover (grid + year steppers + a floor) and kastlan's calendar header (a month list\n * and a year list in two popovers). The grid does both jobs — the year arrows and\n * PageUp/PageDown cover what the year list did, without a fixed ±5-year window.\n */\n/** Upper-case the first letter only, in `locale`. Several locales (fr, es, it, pt, …)\n *  write month names in lower case, which at the start of a field reads as a typo —\n *  but only the FIRST letter is the field's business: \"septiembre de 2026\" becomes\n *  \"Septiembre de 2026\", not \"Septiembre De 2026\". */\nfunction upperFirst(text: string, locale: string | undefined): string {\n  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);\n}\n\nexport function MonthPicker({\n  value,\n  onChange,\n  locale: localeProp,\n  min,\n  max,\n  label,\n  placeholder,\n  disabled,\n  invalid,\n  formatOptions,\n  currentMonth,\n  labels: labelsProp,\n  className,\n  triggerClassName,\n  variant = \"field\",\n  headingLevel = 2,\n  showToday = true,\n  ...rest\n}: MonthPickerProps) {\n  const labels = useMonthPickerLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const selected = parseMonth(value);\n  const minKey = boundKey(min);\n  const maxKey = boundKey(max);\n  const currentKey = boundKey(currentMonth) ?? monthKey(new Date());\n\n  const triggerText = selected\n    ? upperFirst(\n        new Intl.DateTimeFormat(locale, formatOptions ?? DEFAULT_TRIGGER_FORMAT).format(\n          firstOf(selected),\n        ),\n        locale,\n      )\n    : (placeholder ?? \"\");\n\n  const id = useId();\n  const [aria, wrapperRest] = splitTriggerAria(rest);\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can double as a name; a ReactNode may hold its own controls.\n  const named = typeof label === \"string\";\n  // The panel is portalled to <body>, out of the subtree whose `dir` it inherited — an\n  // RTL form got an LTR grid. Read when opening (`toggle` is the popover's only way\n  // open) and put back on the panel. Also what the arrow keys above read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n\n  const grid = (close: () => void) => (\n    <MonthGrid\n      value={selected}\n      locale={locale}\n      minKey={minKey}\n      maxKey={maxKey}\n      currentKey={currentKey}\n      labels={labels}\n      onPick={(key) => {\n        onChange(key);\n        close();\n      }}\n    />\n  );\n\n  if (variant === \"stepper\") {\n    // The arrows step from the value, or from \"now\" when there is none; each is dead\n    // once the month it leads to is out of bounds, and Today once \"now\" is.\n    const base = selected ?? parseMonth(currentKey)!;\n    const prevKey = toKey(shiftMonth(base, -1));\n    const nextKey = toKey(shiftMonth(base, 1));\n    const outside = (key: string) => Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n    const Heading = headingLevel ? (`h${headingLevel}` as const) : null;\n    const trigger = (\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: labels.panel }}\n        dir={dir}\n        trigger={({ open, toggle, ref }) => (\n          <MonthHeadingTrigger\n            open={open}\n            toggle={() => {\n              setDir(dirOf(rootRef.current));\n              toggle();\n            }}\n            triggerRef={ref}\n            text={triggerText}\n            panelId={panelId}\n            disabled={disabled}\n            aria={aria}\n          />\n        )}\n      >\n        {grid}\n      </Popover>\n    );\n    return (\n      <div {...wrapperRest} ref={rootRef} className={cn(\"flex min-w-0 items-center gap-2\", className)}>\n        {Heading ? <Heading className=\"m-0 min-w-0 text-lg font-semibold\">{trigger}</Heading> : trigger}\n        <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n          {showToday && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              disabled={disabled || outside(currentKey)}\n              onClick={() => {\n                if (currentKey !== value) onChange(currentKey);\n              }}\n            >\n              {labels.today}\n            </Button>\n          )}\n          <IconButton\n            aria-label={labels.previousMonth}\n            disabled={disabled || outside(prevKey)}\n            onClick={() => onChange(prevKey)}\n          >\n            {/* Mirrored in RTL, where \"previous\" points the other way. */}\n            <ChevronLeft className=\"rtl:-scale-x-100\" />\n          </IconButton>\n          <IconButton\n            aria-label={labels.nextMonth}\n            disabled={disabled || outside(nextKey)}\n            onClick={() => onChange(nextKey)}\n          >\n            <ChevronRight className=\"rtl:-scale-x-100\" />\n          </IconButton>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,\n          and inside this `relative` root either way. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: labels.panel }}\n        dir={dir}\n        trigger={({ open, toggle, ref }) => (\n          <MonthFieldTrigger\n            open={open}\n            toggle={() => {\n              setDir(dirOf(rootRef.current));\n              toggle();\n            }}\n            triggerRef={ref}\n            triggerText={triggerText}\n            hasValue={selected != null}\n            // As DatePicker: a caller's reference first; an `id` without a label of our\n            // own references the trigger itself, so an external <label htmlFor> names it.\n            labelledBy={[\n              aria[\"aria-labelledby\"],\n              named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n              valueId,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            aria={aria}\n            valueId={valueId}\n            panelId={panelId}\n            padded={label !== undefined}\n            disabled={disabled}\n            invalid={invalid}\n            className={triggerClassName}\n          />\n        )}\n      >\n        {grid}\n      </Popover>\n      <Calendar\n        aria-hidden\n        className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}
+{"version":3,"sources":["../../src/components/month-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { Calendar, ChevronDown, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, horizontalStep, type Direction } from \"../lib/direction\";\nimport { monthKey, pad } from \"../lib/dates\";\nimport { Button, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from \"./ui\";\nimport { Popover } from \"./popover\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { useKitDateFormatter, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { FieldBox, FieldLabelLine, hasContent, useFieldMessages } from \"./field-parts\";\n\n/**\n * Every string the month picker can speak. The month and year names are NOT here —\n * they come from `Intl` in the `locale` prop, so they are already in the user's\n * language. What is left is the two icon-only year arrows, whose `aria-label` is the\n * only name they have, the panel's name, and a month cell's name.\n */\nexport interface MonthPickerLabels {\n  previousYear: string;\n  nextYear: string;\n  /** The popover's accessible name (`role=\"dialog\"`). */\n  panel: string;\n  /**\n   * Accessible name of one month cell, given that month and its year formatted in\n   * `locale` (\"August 2026\"). The cell's visible text is the short month alone, and\n   * \"Aug\" read out on its own does not say which year the grid is on.\n   */\n  month: (monthYear: string) => string;\n  /** `variant=\"stepper\"`: the icon-only arrows that step the value by one month. */\n  previousMonth: string;\n  nextMonth: string;\n  /** `variant=\"stepper\"`: the button that jumps to the current month. Visible text. */\n  today: string;\n  /** `mode=\"year\"`: the popover's accessible name. */\n  yearPanel: string;\n  /** `mode=\"year\"`: the icon-only arrows that page the year grid back and forward by a\n   *  page of twelve years. */\n  earlierYears: string;\n  laterYears: string;\n  /** `mode=\"year\"`, `variant=\"stepper\"`: the button that jumps to the current year.\n   *  Visible text. */\n  thisYear: string;\n}\n\n/** The English starting point every override is merged onto. Exported (unlike the\n *  calendar's) because it is asked for by name: a host building its own translation\n *  table can spread it rather than re-typing four keys to change one. */\nexport const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels = {\n  previousYear: \"Previous year\",\n  nextYear: \"Next year\",\n  panel: \"Choose a month\",\n  month: (monthYear) => monthYear,\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  today: \"Today\",\n  yearPanel: \"Choose a year\",\n  earlierYears: \"Earlier years\",\n  laterYears: \"Later years\",\n  thisYear: \"This year\",\n};\n\n/** Merge caller overrides onto the English defaults. */\nfunction useMonthPickerLabels(partial?: Partial<MonthPickerLabels>): MonthPickerLabels {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  return useKitLabels(\"monthPicker\", DEFAULT_MONTH_PICKER_LABELS, partial);\n}\n\n/**\n * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries\n * a `FormEvent`, and this one answers with a month key. Everything else reaches the\n * field's root, so a test id or a `data-tour` anchor can find it.\n */\nexport interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The selected month as a `\"YYYY-MM\"` key, or `\"\"` for none.\n   *\n   * A string rather than `{ year, month }` or a `Date`, for the reason every date in\n   * this kit is one: it is what `monthKey()` in `lib/dates` produces, it sorts\n   * chronologically so the bounds are plain `<` / `>`, and it crosses a URL or an API\n   * without a serialiser. A `{ year, month }` caller converts with\n   * `` `${year}-${pad(month)}` `` (month 1–12) and back with `key.split(\"-\").map(Number)`.\n   */\n  value: string;\n  /** Called with the picked month as `\"YYYY-MM\"`. */\n  onChange: (month: string) => void;\n  /** Drives the month and year names (`Intl.DateTimeFormat`). Defaults to the\n   *  `<UiKitProvider>` locale, then the runtime's. */\n  locale?: string;\n  /**\n   * Inclusive bounds, as `\"YYYY-MM\"`. A full ISO date (`\"YYYY-MM-DD\"`) is accepted and\n   * read as its month, so a host holding \"the first day we have data for\" can pass it\n   * straight in. Months outside are shown but refuse selection; a year arrow is\n   * disabled once the whole year beyond it is out of bounds.\n   */\n  min?: string;\n  max?: string;\n  /** Embedded top-boundary label, matching the other field-shaped controls. */\n  label?: ReactNode;\n  /** Trigger text when `value` is `\"\"`. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the month, in the caller's words — {@link Input}'s `error`\n   * (keksdose K4): under the field, attached to the trigger with `aria-describedby`\n   * (merged, after any caption), and implies `invalid`. Passing the key keeps the\n   * field's box while there is no message, so the trigger is never remounted.\n   */\n  error?: ReactNode;\n  /** Standing advice, as on a {@link Select}: text is a caption under the field; a\n   *  {@link FieldHint} rides the label line. */\n  hint?: ReactNode;\n  /**\n   * `\"md\"` (default): the form field. `\"sm\"`: the toolbar trigger — 36px tall (an\n   * `IconButton`'s height) and as wide as the month it shows, for a picker that sits\n   * between two icon buttons in a page header (keksdose K13: the budget header wrote\n   * `triggerClassName=\"h-9 w-auto … py-0\"` by hand, live #260 — 34px between two 36px\n   * buttons, *\"the kind of 2px that reads as sloppy\"*). Unlabelled pickers only, as on\n   * {@link Select}: a floating label needs the tall box to float in. The width follows\n   * the month's name; add a `min-w-*` in `triggerClassName` if the buttons beside it\n   * must not move as it changes.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * `\"month\"` (default): the value is a month, `\"YYYY-MM\"`.\n   *\n   * `\"year\"`: the value is a YEAR, `\"YYYY\"`, and the panel is a grid of years — kastlan's\n   * budget fiscal year (a `Select` of 2020 to three years ahead) and keksdose's tax tab\n   * (\"this year and four before\", tax-tab.tsx:33). `min` / `max` are read as their year\n   * (`\"2022\"`, or any longer key). A bounded span of twelve years or fewer is shown\n   * whole, with no paging; otherwise the grid pages twelve years at a time (PageUp /\n   * PageDown, or the arrows), starting from `min` when there is one. The stepper\n   * variant steps a year, and its Today button reads \"This year\".\n   *\n   * A string rather than a number, for the reason the month key is one: it is the\n   * same type across both modes, it crosses a URL as is, and it sorts. A numeric\n   * caller converts with `String(year)` and `Number(key)`.\n   */\n  mode?: \"month\" | \"year\";\n  /** Intl options for the trigger's text (default: long month + numeric year, or the\n   *  numeric year in `mode=\"year\"`). Win over the provider's `formatDate`. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /**\n   * The month to ring as \"now\", as `\"YYYY-MM\"`. Defaults to the local calendar's\n   * current month; pass one to pin it (a test, a host with its own notion of today).\n   */\n  currentMonth?: string;\n  /** User-facing strings; see {@link MonthPickerLabels}. */\n  labels?: Partial<MonthPickerLabels>;\n  /** Extra classes for the field's root. */\n  className?: string;\n  /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger\n   *  sitting between two icon buttons in a toolbar. */\n  triggerClassName?: string;\n  /**\n   * `\"field\"` (default): the field-shaped trigger, for a form.\n   *\n   * `\"stepper\"`: the header of a month PAGE — the month as a heading that opens the\n   * grid, then Today and ‹ › stepping the value by one month. What a calendar page\n   * assembled by hand around the field (overriding its trigger to look like a\n   * heading). `label`, `placeholder`, `invalid`, `hint`, `error`, `size` and\n   * `triggerClassName` are the field's and are not drawn here; with no `value` the\n   * arrows step from the current month (or year).\n   */\n  variant?: \"field\" | \"stepper\";\n  /** `variant=\"stepper\"`: the heading level the month is set in (`<h2>` by default), or\n   *  `false` for no heading element — the page already has one for the month. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | false;\n  /** `variant=\"stepper\"`: draw the Today button. Default `true`. */\n  showToday?: boolean;\n}\n\n// ── Month keys ────────────────────────────────────────────────────────────\n\ninterface YearMonth {\n  year: number;\n  /** 1–12, as in the key. */\n  month: number;\n}\n\nconst KEY = /^(\\d{4})-(\\d{2})/;\n\nfunction parseMonth(key: string | undefined): YearMonth | null {\n  const m = key ? KEY.exec(key) : null;\n  if (!m) return null;\n  const month = Number(m[2]);\n  return month >= 1 && month <= 12 ? { year: Number(m[1]), month } : null;\n}\n\nfunction toKey({ year, month }: YearMonth): string {\n  return `${year}-${pad(month)}`;\n}\n\n/** Move a month key by whole months, carrying into the year. */\nfunction shiftMonth(ym: YearMonth, delta: number): YearMonth {\n  const index = ym.year * 12 + (ym.month - 1) + delta;\n  return { year: Math.floor(index / 12), month: (index % 12) + 1 };\n}\n\n/** A bound, normalised to its month key — so `\"2024-03-15\"` compares as `\"2024-03\"`. */\nfunction boundKey(bound: string | undefined): string | null {\n  const ym = parseMonth(bound);\n  return ym ? toKey(ym) : null;\n}\n\n/** Local-calendar Date for the 1st of a month, for `Intl` to format. */\nfunction firstOf({ year, month }: YearMonth): Date {\n  return new Date(year, month - 1, 1);\n}\n\nconst DEFAULT_TRIGGER_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\nconst MONTH_NAME_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\nconst YEAR_FORMAT: Intl.DateTimeFormatOptions = { year: \"numeric\" };\n\n// ── Year keys ─────────────────────────────────────────────────────────────\n\nconst YEAR = /^(\\d{4})/;\n\n/** The year of `\"YYYY\"`, `\"YYYY-MM\"` or `\"YYYY-MM-DD\"`, or null. */\nfunction parseYear(key: string | undefined): number | null {\n  const m = key ? YEAR.exec(key) : null;\n  return m ? Number(m[1]) : null;\n}\n\n// ── Trigger ───────────────────────────────────────────────────────────────\n\n/** Hand focus back to the trigger when the panel closes with focus still inside it. */\nfunction useFocusBackOnClose(open: boolean, triggerRef: RefObject<HTMLButtonElement | null>) {\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    const justClosed = wasOpen.current && !open;\n    wasOpen.current = open;\n    if (!justClosed) return;\n    // Only when focus went down with the panel. An outside click has already put it\n    // somewhere real, and dragging it back here would be worse than leaving it.\n    const active = document.activeElement;\n    if (!active || active === document.body) triggerRef.current?.focus();\n  }, [open, triggerRef]);\n}\n\n/**\n * The stepper's trigger: the month as a heading-sized button that opens the grid.\n *\n * Its own text is its name (\"September 2026\"), so it needs no label of its own, and\n * it is `aria-live` for the reason `MiniCalendar`'s caption is: pressing ‹ or › leaves\n * focus on the arrow, and the heading is the only thing that says where the arrow\n * went. A plain button with `aria-haspopup`, not the field's `combobox` — it does not\n * look or behave like a field, and a heading reading \"combobox\" is a surprise.\n */\nfunction MonthHeadingTrigger({\n  open,\n  toggle,\n  triggerRef,\n  text,\n  panelId,\n  disabled,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  text: string;\n  panelId: string;\n  disabled?: boolean;\n  aria: TriggerAria;\n}) {\n  useFocusBackOnClose(open, triggerRef);\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-label={aria[\"aria-label\"]}\n      aria-labelledby={aria[\"aria-labelledby\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        \"-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-[var(--text-primary)] transition-colors\",\n        \"hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        disabled && \"cursor-not-allowed opacity-50\",\n      )}\n    >\n      <span aria-live=\"polite\" className=\"truncate\">\n        {text || \"\\u00a0\"}\n      </span>\n      <ChevronDown aria-hidden className=\"size-4 shrink-0 text-[var(--text-muted)]\" />\n    </button>\n  );\n}\n\n/**\n * The field-shaped button that opens the grid. The same shape as `DatePicker`'s\n * trigger, for the same reasons written down there: `role=\"combobox\"` so it may carry\n * `aria-expanded` / `aria-invalid`, a name made of the label AND the value, and focus\n * handed back here when the panel closes with focus still inside it.\n */\nfunction MonthFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  panelId,\n  padded,\n  small,\n  disabled,\n  invalid,\n  className,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  triggerText: string;\n  hasValue: boolean;\n  labelledBy: string;\n  /** The caller's naming attributes — see `trigger-aria.ts`. */\n  aria: TriggerAria;\n  valueId: string;\n  panelId: string;\n  padded: boolean;\n  /** `size=\"sm\"`: the 36px, content-wide toolbar trigger. */\n  small: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  className?: string;\n}) {\n  useFocusBackOnClose(open, triggerRef);\n\n  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-invalid={invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined}\n      aria-required={aria[\"aria-required\"]}\n      aria-labelledby={aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy}\n      aria-label={aria[\"aria-label\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        padded && FIELD_FLOATING_PAD,\n        // keksdose K13 (live #260): an IconButton's 36px, and only as wide as the\n        // month — `py-0` with a fixed height so the box is 36px whatever the type's\n        // line height. `pe-9` stays: the calendar glyph still sits at the end.\n        small && \"h-9 w-auto py-0\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        invalid && FIELD_INVALID,\n        className,\n      )}\n    >\n      {/* The U+00A0 fallback keeps the line box when there is no text — see\n          DatePicker. The value arrives capitalised (see `upperFirst`); this span does\n          NOT use `capitalize`, which upper-cases every WORD — \"Choose A Month\",\n          \"Septiembre De 2026\". */}\n      <span\n        id={valueId}\n        className={cn(\"truncate\", !hasValue && \"text-[var(--text-placeholder)]\")}\n      >\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n// ── Grid ──────────────────────────────────────────────────────────────────\n\nconst COLUMNS = 3;\n\n/**\n * The panel: a year caption between ‹ › arrows, over a 4×3 grid of months.\n *\n * Mounted only while the popover is open, so every opening starts from the current\n * value's year — a value moved from outside (a prev/next-month button beside the\n * field) is where the grid lands, with no effect needed to snap it back.\n *\n * A grid in the APG sense, like `MiniCalendar`: one tab stop (the roving tabindex),\n * the arrows walk the months — left/right by one, up/down by a row of three — and\n * walking off either end of the year MOVES the year rather than stopping. PageUp /\n * PageDown step a whole year. Out-of-bounds months are `aria-disabled`, not\n * `disabled`, so the roving tab stop never falls into a hole.\n */\nfunction MonthGrid({\n  value,\n  onPick,\n  locale,\n  minKey,\n  maxKey,\n  currentKey,\n  labels,\n}: {\n  value: YearMonth | null;\n  onPick: (key: string) => void;\n  locale: string | undefined;\n  minKey: string | null;\n  maxKey: string | null;\n  currentKey: string;\n  labels: MonthPickerLabels;\n}) {\n  const outOfBounds = (key: string) =>\n    Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n\n  // The month holding the tab order, and with it the year on screen — one piece of\n  // state, as in MiniCalendar, so the two cannot disagree. Opens on the value, or on\n  // the current month, pulled inside the bounds.\n  const [active, setActive] = useState<YearMonth>(() => {\n    const start = value ? toKey(value) : currentKey;\n    if (minKey && start < minKey) return parseMonth(minKey)!;\n    if (maxKey && start > maxKey) return parseMonth(maxKey)!;\n    return parseMonth(start)!;\n  });\n  const year = active.year;\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const captionId = `${useId()}-year`;\n\n  // Short names for the cells, long \"Month YYYY\" for their accessible names.\n  const shortNames = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { month: \"short\" });\n    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));\n  }, [locale]);\n  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);\n  const yearCaption = new Intl.DateTimeFormat(locale, { year: \"numeric\" }).format(\n    firstOf({ year, month: 1 }),\n  );\n\n  // A month whose cell must take focus after the next commit. Arrowing across a year\n  // boundary re-labels the same twelve buttons, so the one to focus is a DIFFERENT\n  // button from the one the key landed on.\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const key = pendingFocus.current;\n    if (!key) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-month=\"${key}\"]`)?.focus();\n  });\n\n  // Opened because the user asked to pick a month: land them on it. Runs before the\n  // popover's focus trap (a child's effect fires first), which then keeps this focus.\n  useEffect(() => {\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, []);\n\n  const moveTo = (next: YearMonth, focus: boolean) => {\n    if (focus) pendingFocus.current = toKey(next);\n    setActive(next);\n  };\n\n  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Left and right are VISUAL directions: in a right-to-left page the grid runs the\n    // other way, so \"right\" is the previous month there. The panel is portalled, but\n    // it carries the field's `dir` (see MonthPicker), so the nearest `dir` is right.\n    const step = horizontalStep(e.key, e.currentTarget);\n    const col = (active.month - 1) % COLUMNS;\n    let delta: number;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        delta = step;\n        break;\n      case \"ArrowUp\":\n        delta = -COLUMNS;\n        break;\n      case \"ArrowDown\":\n        delta = COLUMNS;\n        break;\n      case \"Home\":\n        delta = -col;\n        break;\n      case \"End\":\n        delta = COLUMNS - 1 - col;\n        break;\n      case \"PageUp\":\n        delta = -12;\n        break;\n      case \"PageDown\":\n        delta = 12;\n        break;\n      default:\n        return;\n    }\n    // Before any no-op check: these keys also scroll the panel, and a month that\n    // cannot move still must not move the page.\n    e.preventDefault();\n    if (delta !== 0) moveTo(shiftMonth(active, delta), true);\n  };\n\n  // An arrow is dead once EVERY month of the year it leads to is out of bounds.\n  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);\n  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);\n  const selectedKey = value ? toKey(value) : null;\n\n  const arrow =\n    \"flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent\";\n\n  return (\n    <div className=\"select-none\">\n      <div className=\"mb-1 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          aria-label={labels.previousYear}\n          disabled={prevBlocked}\n          // Focus stays on the arrow being pressed — only the grid moves.\n          onClick={() => moveTo(shiftMonth(active, -12), false)}\n          className={arrow}\n        >\n          {/* Mirrored in RTL, where \"previous\" points the other way. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n        {/* Names the grid, and `aria-live` so stepping a year says which one you are\n            on — the user pressing the arrow is not inside the grid to hear it change. */}\n        <div\n          id={captionId}\n          aria-live=\"polite\"\n          className=\"text-sm font-semibold tabular-nums text-[var(--text-primary)]\"\n        >\n          {yearCaption}\n        </div>\n        <button\n          type=\"button\"\n          aria-label={labels.nextYear}\n          disabled={nextBlocked}\n          onClick={() => moveTo(shiftMonth(active, 12), false)}\n          className={arrow}\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n      </div>\n      <div ref={gridRef} role=\"grid\" aria-labelledby={captionId} className=\"grid gap-1\">\n        {Array.from({ length: 12 / COLUMNS }, (_, row) => (\n          <div key={row} role=\"row\" className=\"grid grid-cols-3 gap-1\">\n            {Array.from({ length: COLUMNS }, (_, c) => {\n              const ym = { year, month: row * COLUMNS + c + 1 };\n              const key = toKey(ym);\n              const disabled = outOfBounds(key);\n              const selected = key === selectedKey;\n              const current = key === currentKey;\n              return (\n                <button\n                  key={c}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-month={key}\n                  tabIndex={ym.month === active.month ? 0 : -1}\n                  aria-label={labels.month(longName.format(firstOf(ym)))}\n                  aria-selected={selected}\n                  aria-disabled={disabled || undefined}\n                  aria-current={current ? \"date\" : undefined}\n                  onClick={() => {\n                    // The guard `disabled` would have been; see the component note.\n                    if (disabled) return;\n                    setActive(ym);\n                    onPick(key);\n                  }}\n                  onKeyDown={onCellKeyDown}\n                  className={cn(\n                    \"rounded px-2 py-1.5 text-sm capitalize transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    // A --brand ring on a --brand fill exists only in the DOM.\n                    selected && !disabled\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      : selected\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {shortNames[ym.month - 1]}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/** Years on one page of the year grid: the month grid's 4×3. */\nconst YEAR_PAGE = 12;\n\n/**\n * `mode=\"year\"`'s panel: a page of years between ‹ › arrows — {@link MonthGrid}'s shape\n * and keyboard, one level up (kastlan 7, keksdose tax-tab.tsx:33).\n *\n * Which years a page holds:\n *  - Bounded on both sides by twelve years or fewer: exactly those years, and no\n *    arrows — keksdose's \"this year and four before\" is five cells, not a page of\n *    twelve with seven greyed out.\n *  - Otherwise twelve at a time, starting from `min` when there is one (so the first\n *    page opens on it), else ending at `max`, else on multiples of twelve.\n *\n * The arrow keys walk the years (up/down by a row of three), PageUp / PageDown a page,\n * Home / End the row; walking off a page turns it. Focus stops at the bounds rather\n * than walking into years that refuse selection: a page has no \"next year\" past the\n * last selectable one worth landing on.\n */\nfunction YearGrid({\n  value,\n  onPick,\n  locale,\n  minYear,\n  maxYear,\n  currentYear,\n  labels,\n}: {\n  value: number | null;\n  onPick: (key: string) => void;\n  locale: string | undefined;\n  minYear: number | null;\n  maxYear: number | null;\n  currentYear: number;\n  labels: MonthPickerLabels;\n}) {\n  const clamp = (y: number) => Math.min(maxYear ?? y, Math.max(minYear ?? y, y));\n  // A bounded span that fits one page is shown whole.\n  const whole =\n    minYear !== null && maxYear !== null && maxYear >= minYear && maxYear - minYear < YEAR_PAGE\n      ? { first: minYear, count: maxYear - minYear + 1 }\n      : null;\n  // The year holding the tab order, and with it the page on screen — one piece of\n  // state, as in MonthGrid. Opens on the value, or on this year, inside the bounds.\n  const [active, setActive] = useState(() => clamp(value ?? currentYear));\n  const anchor = minYear ?? (maxYear !== null ? maxYear - (YEAR_PAGE - 1) : 0);\n  const first = whole ? whole.first : anchor + Math.floor((active - anchor) / YEAR_PAGE) * YEAR_PAGE;\n  const count = whole ? whole.count : YEAR_PAGE;\n  const years = Array.from({ length: count }, (_, i) => first + i);\n  const outOfBounds = (y: number) => (minYear !== null && y < minYear) || (maxYear !== null && y > maxYear);\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const captionId = `${useId()}-years`;\n  const yearFormat = useMemo(() => new Intl.DateTimeFormat(locale, YEAR_FORMAT), [locale]);\n  // \"2016–2027\" in the locale's own range punctuation and digits.\n  const caption = yearFormat.formatRange(new Date(first, 0, 1), new Date(first + count - 1, 0, 1));\n\n  const pendingFocus = useRef<number | null>(null);\n  useEffect(() => {\n    const year = pendingFocus.current;\n    if (year === null) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-year=\"${year}\"]`)?.focus();\n  });\n  // Opened to pick a year: land on it (before the popover's trap, which keeps it).\n  useEffect(() => {\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, []);\n\n  const moveTo = (next: number, focus: boolean) => {\n    const year = clamp(next);\n    if (focus) pendingFocus.current = year;\n    setActive(year);\n  };\n\n  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const step = horizontalStep(e.key, e.currentTarget);\n    const col = (active - first) % COLUMNS;\n    let delta: number;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        delta = step;\n        break;\n      case \"ArrowUp\":\n        delta = -COLUMNS;\n        break;\n      case \"ArrowDown\":\n        delta = COLUMNS;\n        break;\n      case \"Home\":\n        delta = -col;\n        break;\n      case \"End\":\n        delta = Math.min(COLUMNS - 1 - col, first + count - 1 - active);\n        break;\n      case \"PageUp\":\n        delta = -YEAR_PAGE;\n        break;\n      case \"PageDown\":\n        delta = YEAR_PAGE;\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    if (delta !== 0) moveTo(active + delta, true);\n  };\n\n  const prevBlocked = minYear !== null && first - 1 < minYear;\n  const nextBlocked = maxYear !== null && first + count > maxYear;\n  const arrow =\n    \"flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent\";\n\n  return (\n    <div className=\"select-none\">\n      <div className={cn(\"mb-1 flex items-center\", whole ? \"h-7 justify-center\" : \"justify-between\")}>\n        {!whole && (\n          <button\n            type=\"button\"\n            aria-label={labels.earlierYears}\n            disabled={prevBlocked}\n            onClick={() => moveTo(active - YEAR_PAGE, false)}\n            className={arrow}\n          >\n            <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n        )}\n        <div id={captionId} aria-live=\"polite\" className=\"text-sm font-semibold tabular-nums text-[var(--text-primary)]\">\n          {caption}\n        </div>\n        {!whole && (\n          <button\n            type=\"button\"\n            aria-label={labels.laterYears}\n            disabled={nextBlocked}\n            onClick={() => moveTo(active + YEAR_PAGE, false)}\n            className={arrow}\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n          </button>\n        )}\n      </div>\n      <div ref={gridRef} role=\"grid\" aria-labelledby={captionId} className=\"grid gap-1\">\n        {Array.from({ length: Math.ceil(count / COLUMNS) }, (_, row) => (\n          <div key={row} role=\"row\" className=\"grid grid-cols-3 gap-1\">\n            {years.slice(row * COLUMNS, row * COLUMNS + COLUMNS).map((year) => {\n              const disabled = outOfBounds(year);\n              const selected = year === value;\n              const current = year === currentYear;\n              return (\n                <button\n                  key={year}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-year={year}\n                  tabIndex={year === active ? 0 : -1}\n                  aria-selected={selected}\n                  aria-disabled={disabled || undefined}\n                  aria-current={current ? \"date\" : undefined}\n                  onClick={() => {\n                    if (disabled) return;\n                    setActive(year);\n                    onPick(String(year));\n                  }}\n                  onKeyDown={onCellKeyDown}\n                  className={cn(\n                    \"rounded px-2 py-1.5 text-sm tabular-nums transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    selected && !disabled\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      : selected\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {yearFormat.format(new Date(year, 0, 1))}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── Field ─────────────────────────────────────────────────────────────────\n\n/**\n * Month picker: a field showing the selected month (\"August 2026\"), opening a 12-month\n * grid with year arrows. For a value that IS a month — a budget period, a calendar\n * view, a statement — where a day picker would ask for a day nobody means.\n *\n * One component for the two app-local pickers it replaces: keksdose's budget-header\n * popover (grid + year steppers + a floor) and kastlan's calendar header (a month list\n * and a year list in two popovers). The grid does both jobs — the year arrows and\n * PageUp/PageDown cover what the year list did, without a fixed ±5-year window.\n */\n/** Upper-case the first letter only, in `locale`. Several locales (fr, es, it, pt, …)\n *  write month names in lower case, which at the start of a field reads as a typo —\n *  but only the FIRST letter is the field's business: \"septiembre de 2026\" becomes\n *  \"Septiembre de 2026\", not \"Septiembre De 2026\". */\nfunction upperFirst(text: string, locale: string | undefined): string {\n  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);\n}\n\nexport function MonthPicker(props: MonthPickerProps) {\n  const {\n    value,\n    onChange,\n    locale: localeProp,\n    min,\n    max,\n    label,\n    placeholder,\n    disabled,\n    invalid,\n    error,\n    hint,\n    size = \"md\",\n    mode = \"month\",\n    formatOptions,\n    currentMonth,\n    labels: labelsProp,\n    className,\n    triggerClassName,\n    variant = \"field\",\n    headingLevel = 2,\n    showToday = true,\n    ...rest\n  } = props;\n  const labels = useMonthPickerLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const years = mode === \"year\";\n  const selected = years ? null : parseMonth(value);\n  const selectedYear = years ? parseYear(value) : null;\n  const minKey = boundKey(min);\n  const maxKey = boundKey(max);\n  const minYear = parseYear(min);\n  const maxYear = parseYear(max);\n  const currentKey = boundKey(currentMonth) ?? monthKey(new Date());\n  const currentYear = parseYear(currentKey)!;\n  // The key the trigger shows, in the mode's own shape: \"YYYY-MM\" or \"YYYY\".\n  const shownKey = years ? (selectedYear !== null ? String(selectedYear) : null) : selected ? toKey(selected) : null;\n\n  // The kit's order: `formatOptions` (this field's own Intl look), then the provider's\n  // `formatDate` (keksdose K12 — the app's one way of writing a month), then the default.\n  const triggerText = shownKey\n    ? (formatOptions === undefined &&\n        fromProvider?.(shownKey, { unit: years ? \"year\" : \"month\", source: \"monthPicker\", locale, weekday: false })) ||\n      upperFirst(\n        new Intl.DateTimeFormat(locale, formatOptions ?? (years ? YEAR_FORMAT : DEFAULT_TRIGGER_FORMAT)).format(\n          years ? new Date(selectedYear!, 0, 1) : firstOf(selected!),\n        ),\n        locale,\n      )\n    : (placeholder ?? \"\");\n\n  const id = useId();\n  // keksdose K4: the caption and the error, on the trigger after the caller's own\n  // description. Painted for `invalid` and a message — not for a bare `aria-invalid`,\n  // which this field has never painted for.\n  const messages = useFieldMessages({ hint, error, describedBy: rest[\"aria-describedby\"] });\n  const [ownAria, wrapperRest] = splitTriggerAria(rest);\n  // The field's trigger is described by the caption and the error too; the stepper\n  // draws neither, so its heading keeps the caller's own description.\n  const aria: TriggerAria = { ...ownAria, \"aria-describedby\": messages.describedBy };\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can double as a name; a ReactNode may hold its own controls.\n  const named = typeof label === \"string\";\n  // `sm` is the toolbar trigger, for an unlabelled picker only (see `size`).\n  const small = size === \"sm\" && label === undefined;\n  // The panel is portalled to <body>, out of the subtree whose `dir` it inherited — an\n  // RTL form got an LTR grid. Read when opening (`toggle` is the popover's only way\n  // open) and put back on the panel. Also what the arrow keys above read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const panelLabel = years ? labels.yearPanel : labels.panel;\n\n  const grid = (close: () => void) =>\n    years ? (\n      <YearGrid\n        value={selectedYear}\n        locale={locale}\n        minYear={minYear}\n        maxYear={maxYear}\n        currentYear={currentYear}\n        labels={labels}\n        onPick={(key) => {\n          onChange(key);\n          close();\n        }}\n      />\n    ) : (\n      <MonthGrid\n        value={selected}\n        locale={locale}\n        minKey={minKey}\n        maxKey={maxKey}\n        currentKey={currentKey}\n        labels={labels}\n        onPick={(key) => {\n          onChange(key);\n          close();\n        }}\n      />\n    );\n\n  if (variant === \"stepper\") {\n    // The arrows step from the value, or from \"now\" when there is none; each is dead\n    // once the month (or year) it leads to is out of bounds, and Today once \"now\" is.\n    let prevKey: string;\n    let nextKey: string;\n    let nowKey: string;\n    let outside: (key: string) => boolean;\n    if (years) {\n      const base = selectedYear ?? currentYear;\n      prevKey = String(base - 1);\n      nextKey = String(base + 1);\n      nowKey = String(currentYear);\n      outside = (key) => {\n        const y = Number(key);\n        return (minYear !== null && y < minYear) || (maxYear !== null && y > maxYear);\n      };\n    } else {\n      const base = selected ?? parseMonth(currentKey)!;\n      prevKey = toKey(shiftMonth(base, -1));\n      nextKey = toKey(shiftMonth(base, 1));\n      nowKey = currentKey;\n      outside = (key) => Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n    }\n    const Heading = headingLevel ? (`h${headingLevel}` as const) : null;\n    const trigger = (\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: panelLabel }}\n        dir={dir}\n        trigger={({ open, toggle, ref }) => (\n          <MonthHeadingTrigger\n            open={open}\n            toggle={() => {\n              setDir(dirOf(rootRef.current));\n              toggle();\n            }}\n            triggerRef={ref}\n            text={triggerText}\n            panelId={panelId}\n            disabled={disabled}\n            aria={ownAria}\n          />\n        )}\n      >\n        {grid}\n      </Popover>\n    );\n    return (\n      <div {...wrapperRest} ref={rootRef} className={cn(\"flex min-w-0 items-center gap-2\", className)}>\n        {Heading ? <Heading className=\"m-0 min-w-0 text-lg font-semibold\">{trigger}</Heading> : trigger}\n        <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n          {showToday && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              disabled={disabled || outside(nowKey)}\n              onClick={() => {\n                if (nowKey !== shownKey) onChange(nowKey);\n              }}\n            >\n              {years ? labels.thisYear : labels.today}\n            </Button>\n          )}\n          <IconButton\n            aria-label={years ? labels.previousYear : labels.previousMonth}\n            disabled={disabled || outside(prevKey)}\n            onClick={() => onChange(prevKey)}\n          >\n            {/* Mirrored in RTL, where \"previous\" points the other way. */}\n            <ChevronLeft className=\"rtl:-scale-x-100\" />\n          </IconButton>\n          <IconButton\n            aria-label={years ? labels.nextYear : labels.nextMonth}\n            disabled={disabled || outside(nextKey)}\n            onClick={() => onChange(nextKey)}\n          >\n            <ChevronRight className=\"rtl:-scale-x-100\" />\n          </IconButton>\n        </div>\n      </div>\n    );\n  }\n\n  const field = (\n    // `w-fit` for the toolbar size: the calendar glyph is placed against this box, and a\n    // full-width box would park it at the far end of the row, away from its trigger.\n    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", small && \"w-fit max-w-full\", className)}>\n      {label !== undefined && <FieldLabelLine label={label} hint={messages.labelHint} />}\n      {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,\n          and inside this `relative` root either way. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: panelLabel }}\n        dir={dir}\n        trigger={({ open, toggle, ref }) => (\n          <MonthFieldTrigger\n            open={open}\n            toggle={() => {\n              setDir(dirOf(rootRef.current));\n              toggle();\n            }}\n            triggerRef={ref}\n            triggerText={triggerText}\n            hasValue={shownKey !== null}\n            // As DatePicker: a caller's reference first; an `id` without a label of our\n            // own references the trigger itself, so an external <label htmlFor> names it.\n            labelledBy={[\n              aria[\"aria-labelledby\"],\n              named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n              valueId,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            aria={aria}\n            valueId={valueId}\n            panelId={panelId}\n            padded={label !== undefined}\n            small={small}\n            disabled={disabled}\n            invalid={invalid || hasContent(error)}\n            className={triggerClassName}\n          />\n        )}\n      >\n        {grid}\n      </Popover>\n      <Calendar\n        aria-hidden\n        className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n    </div>\n  );\n  // An unlabelled picker has no label line: a FieldHint goes at its end, outside the\n  // box, as on an unlabelled Select.\n  const endHint = label === undefined ? messages.labelHint : undefined;\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {endHint === undefined ? (\n        field\n      ) : (\n        <div className=\"flex items-center gap-1.5\">\n          <div className={cn(\"min-w-0\", !small && \"flex-1\")}>{field}</div>\n          <span className=\"flex shrink-0 items-center\">{endHint}</span>\n        </div>\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":["_"]}

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

@@ -23,6 +23,9 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
     /** Trigger summary when 1+ selected (default: the labels as a locale-formatted
      *  list, or `combobox.selectedCount` when a label can't be resolved). */
     itemLabel?: (count: number) => string;
+    /** Offer a clear "×" while anything is chosen; it emits `[]`. A pointer shortcut out
+     *  of the tab order — the keyboard's way is Delete or Backspace on the CLOSED trigger,
+     *  or unticking rows in the open list. Not offered while `disabled` or locked. */
     clearable?: boolean;
     clearLabel?: string;
     /** The phone sheet's close button. Its own prop rather than a reuse of
@@ -31,15 +34,37 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
      *  so it is the one control here that MUST be in the reader's language. */
     closeLabel?: string;
     disabled?: boolean;
+    /** Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`:
+     *  focusable and `aria-disabled`, no list, no clear, no `onChange`, the reason in the
+     *  kit {@link Tooltip}. Wins over `disabled`. */
+    disabledReason?: ReactNode;
+    /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a
+     *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */
+    commit?: boolean;
     /** When set, a "create" row appears for a non-empty query with no exact match.
      *  The panel stays open (adding the new entity to `value` is the caller's job). */
     onCreate?: (query: string) => void;
     createLabel?: (query: string) => string;
+    /** Offer the create row with nothing typed too, worded as this. See
+     *  {@link EntityCombobox}'s `createEmptyLabel`. */
+    createEmptyLabel?: string;
+    /** The create row is a write while toggling is not: locked on its own under a locked
+     *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */
+    createCommit?: boolean;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
     /** What is wrong with the value, as {@link Input}'s `error`: rendered under the
      *  field, on the trigger's `aria-describedby`, and implies `invalid`. */
     error?: ReactNode;
+    /**
+     * Standing advice — the rest of the Combobox family's `hint` since 0.22, which this
+     * one was left without (keksdose K4): plain TEXT is a caption under the field on the
+     * trigger's `aria-describedby`, before any error; a {@link FieldHint} "?" rides the
+     * label line, or with no label sits at the trigger's end edge, outside the box.
+     * Passed at all — even `undefined` — the field keeps one box, so a hint coming and
+     * going never rebuilds the trigger under the cursor (the 0.22 rule).
+     */
+    hint?: ReactNode;
     /** Narrow `options` client-side by the query. Default `true`; `false` shows them
      *  as given (a server-ranked list). */
     filter?: boolean;
@@ -56,6 +81,6 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
  * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and
  * toggle without closing the panel; the trigger summarises the selection.
  */
-declare function MultiEntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, itemLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, error, filter, minChars, debounceMs, loadErrorLabel, "aria-label": ariaLabel, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rest }: MultiEntityComboboxProps<V>): react.JSX.Element;
+declare function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>): react.JSX.Element;
 
 export { MultiEntityCombobox, type MultiEntityComboboxProps };

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

@@ -6,6 +6,8 @@ import { cn } from "../lib/cn.js";
 import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
 import {
   ComboboxPanel,
+  endHintRowProps,
+  offersCreate,
   useComboboxCore,
   useComboboxFieldError
 } from "./combobox-core.js";
@@ -15,42 +17,59 @@ import {
   useKitLabels,
   useKitLocale
 } from "../i18n/kit-labels.js";
-function MultiEntityCombobox({
-  value,
-  onChange,
-  options,
-  loadOptions,
-  loading,
-  label,
-  placeholder,
-  searchPlaceholder,
-  emptyLabel,
-  itemLabel,
-  clearable,
-  clearLabel,
-  closeLabel,
-  disabled,
-  onCreate,
-  createLabel,
-  className,
-  invalid,
-  error,
-  filter,
-  minChars,
-  debounceMs,
-  loadErrorLabel,
-  "aria-label": ariaLabel,
-  // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
-  // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,
-  // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named
-  // nothing and the hint and required state described nothing — kastlan's
-  // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.
-  id,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired,
-  ...rest
-}) {
+import {
+  EndHintRow,
+  FieldCaption,
+  LABEL_IN_ROW,
+  LockedReason,
+  StaticLabelRow,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
+import { mergeDescribedBy } from "./choice-parts.js";
+import { useCommitReason } from "./write-lock.js";
+function MultiEntityCombobox(props) {
+  const {
+    value,
+    onChange,
+    options,
+    loadOptions,
+    loading,
+    label,
+    placeholder,
+    searchPlaceholder,
+    emptyLabel,
+    itemLabel,
+    clearable,
+    clearLabel,
+    closeLabel,
+    disabled,
+    disabledReason,
+    commit,
+    onCreate,
+    createLabel,
+    createEmptyLabel,
+    createCommit,
+    className,
+    invalid,
+    error,
+    hint,
+    filter,
+    minChars,
+    debounceMs,
+    loadErrorLabel,
+    "aria-label": ariaLabel,
+    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than
+    // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,
+    // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named
+    // nothing and the hint and required state described nothing — kastlan's
+    // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...rest
+  } = props;
   const core = useComboboxCore({
     options,
     loadOptions,
@@ -59,10 +78,11 @@ function MultiEntityCombobox({
     minChars,
     debounceMs
   });
+  const hintParts = useFieldHint(hint, ariaDescribedBy);
   const field = useComboboxFieldError(
     error,
     invalid || ariaInvalid === true || ariaInvalid === "true",
-    ariaDescribedBy
+    hintParts.describedBy
   );
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,
@@ -72,6 +92,10 @@ function MultiEntityCombobox({
   });
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const { open, results, resolve, setOpen, query, triggerRef } = core;
+  const lock = useLockReason(commit, disabledReason);
+  const inert = lock.locked || Boolean(disabled);
+  if (lock.locked && open) setOpen(false);
+  const createReason = useCommitReason(createCommit, void 0);
   const listboxId = useId();
   const valueSet = useMemo(() => new Set(value), [value]);
   const locale = useKitLocale();
@@ -85,10 +109,17 @@ function MultiEntityCombobox({
     const chosen = value.map(resolve);
     return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o.label)) : labels.selectedCount(value.length);
   })();
+  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: trigger }) : trigger;
   const q = query.trim();
-  const showCreate = Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());
-  const showClear = Boolean(clearable && value.length > 0 && !disabled);
+  const showCreate = offersCreate(
+    onCreate,
+    q,
+    results.map((o) => o.label),
+    createEmptyLabel
+  );
+  const showClear = Boolean(clearable && value.length > 0 && !inert);
   const toggle = (o) => {
+    if (lock.locked) return;
     core.rememberOption(o);
     if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));
     else onChange([...value, o.value]);
@@ -99,74 +130,81 @@ function MultiEntityCombobox({
     // has one. Spread FIRST so the trigger's ARIA and the
     // handlers that open the panel cannot be clobbered from outside.
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
-      label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref: triggerRef,
-          id,
-          type: "button",
-          role: "combobox",
-          "aria-expanded": open,
-          "aria-controls": listboxId,
-          "aria-haspopup": "listbox",
-          "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, summary) : void 0),
-          disabled,
-          "aria-invalid": field.isInvalid || void 0,
-          "aria-describedby": field.describedBy,
-          "aria-required": ariaRequired,
-          onClick: () => !disabled && setOpen((o) => !o),
-          onKeyDown: (e) => {
-            if (disabled) return;
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-              e.preventDefault();
-              setOpen(true);
-            }
-          },
-          className: cn(
-            FIELD_TRIGGER,
-            "pe-9",
-            label !== void 0 && FIELD_FLOATING_PAD,
-            disabled && "cursor-not-allowed opacity-50",
-            field.isInvalid && FIELD_INVALID
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "min-w-0 truncate",
-                  // Inherit FIELD_BASE's ink for a value, keep the placeholder tone
-                  // (`--text-placeholder`) — the same rule every field on a form row
-                  // follows (Keksdose dev#477).
-                  !value.length && "text-[var(--text-placeholder)]"
-                ),
-                children: summary
+      label !== void 0 && hintParts.labelHint === void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsx(EndHintRow, { ...endHintRowProps("hint" in props, label !== void 0, hintParts.labelHint), children: withLock(
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            id,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-haspopup": "listbox",
+            "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, summary) : void 0),
+            disabled: lock.locked ? void 0 : disabled,
+            "aria-disabled": lock.locked || void 0,
+            "aria-invalid": field.isInvalid || void 0,
+            "aria-describedby": mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId),
+            "aria-required": ariaRequired,
+            onClick: () => !inert && setOpen((o) => !o),
+            onKeyDown: (e) => {
+              if (inert) return;
+              if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                e.preventDefault();
+                setOpen(true);
+              } else if (showClear && !open && (e.key === "Delete" || e.key === "Backspace")) {
+                e.preventDefault();
+                onChange([]);
               }
+            },
+            className: cn(
+              FIELD_TRIGGER,
+              "pe-9",
+              label !== void 0 && FIELD_FLOATING_PAD,
+              inert && "cursor-not-allowed opacity-50",
+              field.isInvalid && FIELD_INVALID
             ),
-            showClear ? (
-              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
-                  the trigger <button>, so it never holds focus and a key handler here could
-                  never fire. A pointer shortcut; the keyboard path is unticking the options
-                  in the open list. */
+            children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  role: "button",
-                  tabIndex: -1,
-                  "aria-label": labels.clear,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onChange([]);
-                  },
-                  className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                  className: cn(
+                    "min-w-0 truncate",
+                    // Inherit FIELD_BASE's ink for a value, keep the placeholder tone
+                    // (`--text-placeholder`) — the same rule every field on a form row
+                    // follows (Keksdose dev#477).
+                    !value.length && "text-[var(--text-placeholder)]"
+                  ),
+                  children: summary
                 }
-              )
-            ) : /* @__PURE__ */ jsx(FieldChevron, {})
-          ]
-        }
-      ),
+              ),
+              showClear ? (
+                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside
+                    the trigger <button>, so it never holds focus and a key handler here could
+                    never fire. A pointer shortcut; the keyboard paths are Delete on the closed
+                    trigger and unticking the options in the open list. */
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: -1,
+                    "aria-label": labels.clear,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onChange([]);
+                    },
+                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                  }
+                )
+              ) : /* @__PURE__ */ jsx(FieldChevron, {})
+            ]
+          }
+        )
+      ) }),
+      label !== void 0 && hintParts.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(FieldLabel, { className: LABEL_IN_ROW, children: label }) }),
       /* @__PURE__ */ jsx(
         ComboboxPanel,
         {
@@ -182,12 +220,15 @@ function MultiEntityCombobox({
           onChoose: toggle,
           showCreate,
           onCreate: () => {
+            if (lock.locked) return;
             onCreate?.(q);
             core.setQuery("");
           },
-          createContent: labels.create(q)
+          createContent: q ? labels.create(q) : createEmptyLabel,
+          createDisabledReason: createReason
         }
       ),
+      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
       field.errorEl
     ] })
   );