@eifi1/ui-kit 0.33.1 → 0.34.0

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

@@ -1,13 +1,13 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.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 —
  * they come from `Intl` in the `locale` prop, so they are already in the user's
  * language. What is left is the two icon-only year arrows, whose `aria-label` is the
  * only name they have, the panel's name, and a month cell's name.
  */
-interface MonthPickerLabels {
+export interface MonthPickerLabels {
     previousYear: string;
     nextYear: string;
     /** The popover's accessible name (`role="dialog"`). */
@@ -33,16 +33,13 @@ interface MonthPickerLabels {
      *  Visible text. */
     thisYear: string;
 }
-/** The English starting point every override is merged onto. Exported (unlike the
- *  calendar's) because it is asked for by name: a host building its own translation
- *  table can spread it rather than re-typing four keys to change one. */
-declare const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels;
+export { DEFAULT_MONTH_PICKER_LABELS };
 /**
  * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries
  * 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.
  */
-interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /**
      * The selected month as a `"YYYY-MM"` key, or `""` for none.
      *
@@ -119,7 +116,7 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
      */
     currentMonth?: string;
     /** User-facing strings; see {@link MonthPickerLabels}. */
-    labels?: Partial<MonthPickerLabels>;
+    labels?: LabelOverride<MonthPickerLabels>;
     /** Extra classes for the field's root. */
     className?: string;
     /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger
@@ -141,7 +138,12 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | false;
     /** `variant="stepper"`: draw the Today button. Default `true`. */
     showToday?: boolean;
+    /**
+     * The TRIGGER — the field's button, or the stepper's heading button — as a React 19
+     * ref prop (0.34, API-3, refactor audit 2026-10). The picker took none, so
+     * react-hook-form's focus-on-error reached it only through /rhf's id lookup. Not the
+     * wrapper, which takes the rest of the props.
+     */
+    ref?: Ref<HTMLButtonElement>;
 }
-declare function MonthPicker(props: MonthPickerProps): react.JSX.Element;
-
-export { DEFAULT_MONTH_PICKER_LABELS, MonthPicker, type MonthPickerLabels, type MonthPickerProps };
+export declare function MonthPicker(props: MonthPickerProps): import("react").JSX.Element;

package/dist/components/month-picker.js

@@ -5,25 +5,16 @@ import { Calendar, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { monthKey, pad } from "../lib/dates.js";
-import { Button, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from "./ui.js";
+import { Button } from "./button.js";
+import { FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./field-base.js";
+import { IconButton } from "./icon-button.js";
 import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
 import { Popover } from "./popover.js";
 import { splitTriggerAria } from "./trigger-aria.js";
 import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
-import { FieldBox, FieldLabelLine, hasContent, LABEL_ABOVE_BOX, useFieldMessages } from "./field-parts.js";
-const DEFAULT_MONTH_PICKER_LABELS = {
-  previousYear: "Previous year",
-  nextYear: "Next year",
-  panel: "Choose a month",
-  month: (monthYear) => monthYear,
-  previousMonth: "Previous month",
-  nextMonth: "Next month",
-  today: "Today",
-  yearPanel: "Choose a year",
-  earlierYears: "Earlier years",
-  laterYears: "Later years",
-  thisYear: "This year"
-};
+import { hasContent } from "../lib/presence.js";
+import { FieldBox, FieldLabelLine, LABEL_ABOVE_BOX, mergeRefs, useFieldMessages } from "./field-parts.js";
+import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker-labels.js";
 function useMonthPickerLabels(partial) {
   return useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS, partial);
 }
@@ -66,20 +57,25 @@ function useFocusBackOnClose(open, triggerRef) {
     if (!active || active === document.body) triggerRef.current?.focus();
   }, [open, triggerRef]);
 }
+function useTriggerRef(triggerRef, fieldRef) {
+  return useMemo(() => mergeRefs(triggerRef, fieldRef), [triggerRef, fieldRef]);
+}
 function MonthHeadingTrigger({
   open,
   toggle,
   triggerRef,
+  fieldRef,
   text,
   panelId,
   disabled,
   aria
 }) {
   useFocusBackOnClose(open, triggerRef);
+  const setTrigger = useTriggerRef(triggerRef, fieldRef);
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      ref: triggerRef,
+      ref: setTrigger,
       type: "button",
       disabled,
       onClick: toggle,
@@ -91,14 +87,14 @@ function MonthHeadingTrigger({
       "aria-labelledby": aria["aria-labelledby"],
       "aria-describedby": aria["aria-describedby"],
       className: cn(
-        "-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",
-        "hover:bg-[var(--bg-hover)]",
+        "-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-primary transition-colors",
+        "hover:bg-hover",
         FOCUS_RING,
         disabled && "cursor-not-allowed opacity-50"
       ),
       children: [
         /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "truncate", children: text || "\xA0" }),
-        /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--text-muted)]" })
+        /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 shrink-0 text-muted" })
       ]
     }
   );
@@ -107,6 +103,7 @@ function MonthFieldTrigger({
   open,
   toggle,
   triggerRef,
+  fieldRef,
   triggerText,
   hasValue,
   labelledBy,
@@ -120,10 +117,11 @@ function MonthFieldTrigger({
   aria
 }) {
   useFocusBackOnClose(open, triggerRef);
+  const setTrigger = useTriggerRef(triggerRef, fieldRef);
   return /* @__PURE__ */ jsx(
     "button",
     {
-      ref: triggerRef,
+      ref: setTrigger,
       type: "button",
       disabled,
       onClick: toggle,
@@ -153,7 +151,7 @@ function MonthFieldTrigger({
         "span",
         {
           id: valueId,
-          className: cn("truncate", !hasValue && "text-[var(--text-placeholder)]"),
+          className: cn("truncate-until-large", !hasValue && "text-placeholder"),
           children: triggerText || " "
         }
       )
@@ -237,7 +235,7 @@ function MonthGrid({
   const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);
   const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);
   const selectedKey = value ? toKey(value) : null;
-  const arrow = "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";
+  const arrow = "flex size-7 items-center justify-center rounded text-muted hover:bg-hover disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent";
   return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
@@ -256,7 +254,7 @@ function MonthGrid({
         {
           id: captionId,
           "aria-live": "polite",
-          className: "text-sm font-semibold tabular-nums text-[var(--text-primary)]",
+          className: "text-sm font-semibold tabular-nums text-primary",
           children: yearCaption
         }
       ),
@@ -300,9 +298,9 @@ function MonthGrid({
             FOCUS_RING_WIDTH,
             "focus-visible:outline-none focus-visible:ring-inset",
             // A --brand ring on a --brand fill exists only in the DOM.
-            selected && !disabled ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
-            disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : selected ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-            current && !selected && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
+            selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
+            disabled ? "cursor-not-allowed text-placeholder" : selected ? "bg-brand text-brand-contrast hover:bg-brand-hover" : "text-primary hover:bg-hover",
+            current && !selected && !disabled && "ring-1 ring-inset ring-strong"
           ),
           children: shortNames[ym.month - 1]
         },
@@ -382,7 +380,7 @@ function YearGrid({
   };
   const prevBlocked = minYear !== null && first - 1 < minYear;
   const nextBlocked = maxYear !== null && first + count > maxYear;
-  const arrow = "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";
+  const arrow = "flex size-7 items-center justify-center rounded text-muted hover:bg-hover disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent";
   return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("mb-1 flex items-center", whole ? "h-7 justify-center" : "justify-between"), children: [
       !whole && /* @__PURE__ */ jsx(
@@ -396,7 +394,7 @@ function YearGrid({
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100" })
         }
       ),
-      /* @__PURE__ */ jsx("div", { id: captionId, "aria-live": "polite", className: "text-sm font-semibold tabular-nums text-[var(--text-primary)]", children: caption }),
+      /* @__PURE__ */ jsx("div", { id: captionId, "aria-live": "polite", className: "text-sm font-semibold tabular-nums text-primary", children: caption }),
       !whole && /* @__PURE__ */ jsx(
         "button",
         {
@@ -433,9 +431,9 @@ function YearGrid({
             "rounded px-2 py-1.5 text-sm tabular-nums transition-colors",
             FOCUS_RING_WIDTH,
             "focus-visible:outline-none focus-visible:ring-inset",
-            selected && !disabled ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
-            disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : selected ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-            current && !selected && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
+            selected && !disabled ? "focus-visible:ring-brand-contrast" : "focus-visible:ring-brand",
+            disabled ? "cursor-not-allowed text-placeholder" : selected ? "bg-brand text-brand-contrast hover:bg-brand-hover" : "text-primary hover:bg-hover",
+            current && !selected && !disabled && "ring-1 ring-inset ring-strong"
           ),
           children: yearFormat.format(new Date(year, 0, 1))
         },
@@ -470,6 +468,8 @@ function MonthPicker(props) {
     variant = "field",
     headingLevel = 2,
     showToday = true,
+    // The trigger's (API-3); named apart from the Popover trigger's own `ref` below.
+    ref: fieldRef,
     ...rest
   } = props;
   const labels = useMonthPickerLabels(labelsProp);
@@ -570,6 +570,7 @@ function MonthPicker(props) {
               toggle();
             },
             triggerRef: ref,
+            fieldRef,
             text: triggerText,
             panelId,
             disabled,
@@ -652,6 +653,7 @@ function MonthPicker(props) {
                     toggle();
                   },
                   triggerRef: ref,
+                  fieldRef,
                   triggerText,
                   hasValue: shownKey !== null,
                   labelledBy: [
@@ -676,7 +678,7 @@ function MonthPicker(props) {
             Calendar,
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
+              className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder"
             }
           )
         ]

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, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from \"./ui\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\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, LABEL_ABOVE_BOX, 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)]\",\n        FOCUS_RING,\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_RING_WIDTH,\n                    \"focus-visible:outline-none 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_RING_WIDTH,\n                    \"focus-visible:outline-none 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=\"16rem\"\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      // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons\n      // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;\n      // docs/text-size-harmonization.md §4). In one row at 150 % \"Today ‹ ›\" left the\n      // heading 30 px on a 360 px phone, and \"October 2026\" was drawn under \"Today\".\n      // Where they fit, nothing changes.\n      <div {...wrapperRest} ref={rootRef} className={cn(\"flex min-w-0 flex-wrap 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    // At Large a labelled box is a grid: the label above, the calendar glyph measured\n    // against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).\n    <div\n      {...wrapperRest}\n      ref={rootRef}\n      className={cn(\"relative\", small && \"w-fit max-w-full\", label !== undefined && LABEL_ABOVE_BOX, className)}\n    >\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=\"16rem\"\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":["_"]}
+{"version":3,"sources":["../../src/components/month-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, 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 } from \"./button\";\nimport { FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from \"./field-base\";\nimport { IconButton } from \"./icon-button\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\nimport { FieldBox, FieldLabelLine, LABEL_ABOVE_BOX, mergeRefs, useFieldMessages } from \"./field-parts\";\nimport { DEFAULT_MONTH_PICKER_LABELS } from \"./month-picker-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  /** `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// Defined in ./month-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_MONTH_PICKER_LABELS };\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?: LabelOverride<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   * The TRIGGER — the field's button, or the stepper's heading button — as a React 19\n   * ref prop (0.34, API-3, refactor audit 2026-10). The picker took none, so\n   * react-hook-form's focus-on-error reached it only through /rhf's id lookup. Not the\n   * wrapper, which takes the rest of the props.\n   */\n  ref?: Ref<HTMLButtonElement>;\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/** The Popover's handle on the trigger and the picker's own `ref` prop (API-3), as one. */\nfunction useTriggerRef(triggerRef: RefObject<HTMLButtonElement | null>, fieldRef: Ref<HTMLButtonElement> | undefined) {\n  return useMemo(() => mergeRefs(triggerRef, fieldRef), [triggerRef, fieldRef]);\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  fieldRef,\n  text,\n  panelId,\n  disabled,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  fieldRef?: Ref<HTMLButtonElement>;\n  text: string;\n  panelId: string;\n  disabled?: boolean;\n  aria: TriggerAria;\n}) {\n  useFocusBackOnClose(open, triggerRef);\n  const setTrigger = useTriggerRef(triggerRef, fieldRef);\n  return (\n    <button\n      ref={setTrigger}\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-primary transition-colors\",\n        \"hover:bg-hover\",\n        FOCUS_RING,\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-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  fieldRef,\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  fieldRef?: Ref<HTMLButtonElement>;\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  const setTrigger = useTriggerRef(triggerRef, fieldRef);\n\n  return (\n    <button\n      ref={setTrigger}\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\". It wraps from Large up, as DatePicker's value does\n          (`truncate-until-large`, text size §10.17; round 0.34 T1: the sweep read\n          \"Choose a mo…\" at 360 px / Extra large). */}\n      <span\n        id={valueId}\n        className={cn(\"truncate-until-large\", !hasValue && \"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-muted hover: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-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_RING_WIDTH,\n                    \"focus-visible:outline-none focus-visible:ring-inset\",\n                    // A --brand ring on a --brand fill exists only in the DOM.\n                    selected && !disabled\n                      ? \"focus-visible:ring-brand-contrast\"\n                      : \"focus-visible:ring-brand\",\n                    disabled\n                      ? \"cursor-not-allowed text-placeholder\"\n                      : selected\n                        ? \"bg-brand text-brand-contrast hover:bg-brand-hover\"\n                        : \"text-primary hover:bg-hover\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-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-muted hover: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-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_RING_WIDTH,\n                    \"focus-visible:outline-none focus-visible:ring-inset\",\n                    selected && !disabled\n                      ? \"focus-visible:ring-brand-contrast\"\n                      : \"focus-visible:ring-brand\",\n                    disabled\n                      ? \"cursor-not-allowed text-placeholder\"\n                      : selected\n                        ? \"bg-brand text-brand-contrast hover:bg-brand-hover\"\n                        : \"text-primary hover:bg-hover\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-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    // The trigger's (API-3); named apart from the Popover trigger's own `ref` below.\n    ref: fieldRef,\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=\"16rem\"\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            fieldRef={fieldRef}\n            text={triggerText}\n            panelId={panelId}\n            disabled={disabled}\n            aria={ownAria}\n          />\n        )}\n      >\n        {grid}\n      </Popover>\n    );\n    return (\n      // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons\n      // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;\n      // docs/text-size-harmonization.md §4). In one row at 150 % \"Today ‹ ›\" left the\n      // heading 30 px on a 360 px phone, and \"October 2026\" was drawn under \"Today\".\n      // Where they fit, nothing changes.\n      <div {...wrapperRest} ref={rootRef} className={cn(\"flex min-w-0 flex-wrap 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    // At Large a labelled box is a grid: the label above, the calendar glyph measured\n    // against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).\n    <div\n      {...wrapperRest}\n      ref={rootRef}\n      className={cn(\"relative\", small && \"w-fit max-w-full\", label !== undefined && LABEL_ABOVE_BOX, className)}\n    >\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=\"16rem\"\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            fieldRef={fieldRef}\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-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

@@ -1,13 +1,10 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { ComboOption } from './combobox-core.js';
-import { CommitScope } from './write-lock.js';
-import '../hooks/use-anchored-rect.js';
-import '../hooks/use-anchored-panel.js';
-
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type ComboOption } from "./combobox-core.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CommitScope } from "./write-lock.js";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
-interface MultiEntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface MultiEntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /** Selected ids. */
     value: V[];
     onChange: (value: V[]) => void;
@@ -42,6 +39,9 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
     /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a
      *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */
     commit?: CommitScope;
+    /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the
+     *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */
+    disabledReasonDisplay?: DisabledReasonDisplay;
     /** 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;
@@ -86,6 +86,4 @@ 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>(props: MultiEntityComboboxProps<V>): react.JSX.Element;
-
-export { MultiEntityCombobox, type MultiEntityComboboxProps };
+export declare function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>): import("react").JSX.Element;