@eifi1/ui-kit 0.6.0 → 0.7.0

package/dist/components/measured-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/measured-grid.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ClipboardPaste, Eraser, Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n// The cell pair reads ONE cell, where a comma has no columns to separate and so is\n// always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may\n// be either and the line decides. See the three named rules at the top of table-text.\nimport { cellNumber, isCellNumber, parseRows, splitRow } from \"../lib/table-text\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useWindowedRows } from \"../hooks/use-windowed-rows\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Button, FIELD_INVALID, Textarea } from \"./ui\";\n\n/**\n * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a\n * block out of a spreadsheet — and the hook that holds it as a draft.\n *\n * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a\n * setpoint dialog type rig measurements into it. Nothing in it knows what a column\n * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is\n * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.\n *\n * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types\n * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo\n * beyond the browser's per-input one), or typed columns — every cell is a string that\n * should read as a number.\n */\n\n/**\n * Every string the grid can speak — the `measuredGrid` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:\n * the grammar around a count moves with it in most languages.\n */\nexport interface MeasuredGridLabels {\n  /** Accessible name of the cells/text toggle. */\n  view: string;\n  cellsView: string;\n  textView: string;\n  addRow: string;\n  /** The row's remove button, given its 1-based number. */\n  removeRow: (row: number) => string;\n  /** Empties the whole table. */\n  clear: string;\n  /** The footer's standing note that a block can be pasted into any cell. */\n  pasteHint: string;\n  /**\n   * Accessible name of one cell's input, given its column's label and 1-based row.\n   * A screen reader in a grid announces the headers on its own when the caret crosses\n   * one; this is what it reads when the caret lands on an input with no crossing — and\n   * what a voice-control user says to reach it.\n   */\n  cell: (column: string, row: number) => string;\n  /** The row-number column's header, which shows only \"#\". */\n  rowNumber: string;\n  /** The remove-button column's header, which shows nothing. */\n  rowActions: string;\n  /** The grid's description: how its keyboard works. Read once, on entry. */\n  keyboardHint: string;\n  /** The text view could not read this 1-based line of what was typed or pasted. */\n  lineError: (line: number) => string;\n  /** How many filled rows (measured points) the table holds. */\n  points: (count: number) => string;\n  /** How many cells are typed but are not numbers. */\n  problems: (count: number) => string;\n}\n\n/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`\n *  (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {\n  view: \"Table view\",\n  cellsView: \"Cells\",\n  textView: \"Text\",\n  addRow: \"Add row\",\n  removeRow: (row) => `Remove row ${row}`,\n  clear: \"Clear table\",\n  pasteHint: \"Paste a block from a spreadsheet into any cell\",\n  cell: (column, row) => `${column}, row ${row}`,\n  rowNumber: \"Row\",\n  rowActions: \"Row actions\",\n  keyboardHint:\n    \"Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.\",\n  lineError: (line) => `Line ${line} could not be read`,\n  points: (count) => (count === 1 ? \"1 point\" : `${count} points`),\n  problems: (count) => (count === 1 ? \"1 cell is not a number\" : `${count} cells are not numbers`),\n};\n\n/** One column of a measured table: what it holds and what it is measured in. The unit\n *  is separate from the name because the header shows it small and underneath, and\n *  because a column with no unit (a count, an index) should not render empty brackets. */\nexport interface MeasuredGridColumn {\n  label: string;\n  unit?: string;\n}\n\n/** The two ways to look at the same table. */\nexport type MeasuredGridView = \"cells\" | \"text\";\n\n/** A cell that has not been typed into yet. Distinguished from `\"0\"` on purpose: an\n *  empty cell is a hole in the measurement, and a table with a hole is not one to save. */\nconst BLANK = \"\";\n\n/** Height of one grid row, in pixels. Fixed, which is what lets the windowing be\n *  arithmetic rather than measurement. */\nconst DEFAULT_ROW_HEIGHT = 28;\n\nconst ALL_VIEWS: readonly MeasuredGridView[] = [\"cells\", \"text\"];\n\n/** The locale's decimal mark, as far as a cell can hold it: \",\" or \".\". A mark outside\n *  those two (Arabic's \"٫\") is not one `cellNumber` reads, so those locales keep the\n *  dot. The same answer `NumberField` gives, for the same reason. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n  try {\n    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n    return part?.value === \",\" ? \",\" : \".\";\n  } catch {\n    // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.\n    return \".\";\n  }\n}\n\n/** A number-shaped cell written with the locale's mark. The lexer hands back points;\n *  a German user typed commas and should read commas back. Anything that is not a\n *  number is left exactly as it was, so the mistake stays visible where it was made. */\nconst withMark = (cell: string, mark: \",\" | \".\") =>\n  mark === \",\" && isCellNumber(cell) ? cell.replace(\".\", \",\") : cell;\n\n/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */\nconst formatCell = (value: number, digits: number, mark: \",\" | \".\") =>\n  withMark(String(Number(value.toFixed(digits))), mark);\n\nconst hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== \"\");\n\nexport interface UseMeasuredRowsOptions {\n  /** Decimals a computed number is rounded to on its way into a cell. Default 4. */\n  digits?: number;\n  /** BCP 47 tag whose decimal mark the cells are written with, else the\n   *  `<UiKitProvider locale>`, else the runtime's. */\n  locale?: string;\n}\n\nexport interface MeasuredRows {\n  /** The draft, as text — what the grid shows and edits. */\n  cells: string[][];\n  setCells: (next: string[][]) => void;\n  /** The filled rows as numbers — EMPTY until the table is `ready`. */\n  rows: number[][];\n  /** Replace the whole table with computed numbers (a generated shape, say). */\n  setRows: (next: number[][]) => void;\n  /** At least two filled rows, and every cell in them is a number. */\n  ready: boolean;\n  /** How many cells are typed but are not numbers — what the grid marks invalid. */\n  problems: number;\n  /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */\n  props: { cells: string[][]; onCells: (next: string[][]) => void };\n}\n\n/**\n * The draft a measured table is edited as.\n *\n * **Strings, not numbers.** A cell is text while it is being typed — `\"-\"`, `\"1.\"` and\n * `\"1e\"` are all states a number passes through on its way to being one, and a grid\n * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.\n * So the draft is text, and the numbers are what falls out when every cell is one.\n *\n * **\"Whole\" is a question this answers**, because every editor asks it before it\n * offers to save: `ready` wants at least two filled rows with a number in every cell.\n * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a\n * row at all (it is what walking off the bottom of the grid leaves behind).\n *\n * `initial` is read once, like `useState`'s.\n */\nexport function useMeasuredRows(\n  initial: number[][] | (() => number[][]),\n  options: UseMeasuredRowsOptions = {},\n): MeasuredRows {\n  const { digits = 4 } = options;\n  const mark = decimalMark(useKitLocale(options.locale));\n  const [cells, setCells] = useState<string[][]>(() =>\n    (typeof initial === \"function\" ? initial() : initial).map((row) =>\n      row.map((value) => formatCell(value, digits, mark)),\n    ),\n  );\n\n  const { rows, ready, problems } = useMemo(() => {\n    const filled = cells.filter(hasContent);\n    const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));\n    return {\n      rows: whole ? filled.map((row) => row.map(cellNumber)) : [],\n      ready: whole,\n      problems: filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length,\n    };\n  }, [cells]);\n\n  const setRows = useCallback(\n    (next: number[][]) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),\n    [digits, mark],\n  );\n  const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);\n\n  return { cells, setCells, rows, setRows, ready, problems, props };\n}\n\nexport interface MeasuredGridProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onChange\"> {\n  /** What the table is — shown above it, and the grid's accessible name. */\n  label: string;\n  /** A note under the table (which columns a layout expects, say). Also the grid's\n   *  description. */\n  hint?: ReactNode;\n  columns: MeasuredGridColumn[];\n  /** The draft — typically `useMeasuredRows().props`. */\n  cells: string[][];\n  onCells: (next: string[][]) => void;\n  /** Read-only: the cells can still be walked and read, nothing can be changed. */\n  disabled?: boolean;\n  /** Which views the toggle offers, the first being where it opens. Default both;\n   *  one view hides the toggle. */\n  views?: ReadonlyArray<MeasuredGridView>;\n  /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */\n  rowHeight?: number;\n  /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,\n   *  and for the row numbers; else the `<UiKitProvider locale>`. */\n  locale?: string;\n  labels?: Partial<MeasuredGridLabels>;\n}\n\n/**\n * A measured table as a grid of cells, one number each, with a text view beside it.\n *\n * The grid is the primary form because a linkage typed off a drawing arrives as\n * numbers somebody reads out loud, and a textarea made that an exercise in counting\n * tab characters. The paste still works: a block pasted into any cell fills from that\n * cell outwards, growing the table to fit. The text view is kept for what a grid is\n * worst at — reading a thousand-row export back in one piece.\n *\n * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`\n * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the\n * keyboard inside it, as a spreadsheet has it:\n *\n *   - **Arrows** move between cells. Left/Right flip under `dir=\"rtl\"`.\n *   - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last\n *     cell of the table. **PageUp/PageDown** move a screenful.\n *   - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —\n *     typing down a column is how measured data is entered, and stopping at the last\n *     row to reach for a button is what makes people paste instead. Shift+Enter moves up.\n *   - **Typing** replaces the cell: arriving by keyboard selects its text, so the first\n *     key overwrites it. That is the edit mode data entry wants, entered without a key.\n *     **F2** edits in place instead (caret at the end). Either way the cell is then\n *     *editing*: Left/Right move the caret, and cross to the next cell only at the edge\n *     of the text; Home/End stay in the text. **Escape** puts back what the cell held\n *     when the caret arrived, and leaves editing.\n *\n * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is\n * spent on \"next row\" here on purpose — it is the one key a person typing a column of\n * numbers presses between every one of them, and every spreadsheet spends it the same\n * way — and typing-to-replace makes an explicit \"start editing\" key unnecessary for\n * the common case. F2 remains for the uncommon one.\n */\nexport function MeasuredGrid({\n  label,\n  hint,\n  columns,\n  cells,\n  onCells,\n  disabled,\n  views = ALL_VIEWS,\n  rowHeight = DEFAULT_ROW_HEIGHT,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  ...rest\n}: MeasuredGridProps) {\n  const labels = useKitLabels(\"measuredGrid\", DEFAULT_MEASURED_GRID_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const id = useId();\n  const labelId = `${id}-label`;\n  const hintId = `${id}-hint`;\n  const keysId = `${id}-keys`;\n  const offered = views.length ? views : ALL_VIEWS;\n  const [chosen, setChosen] = useState<MeasuredGridView>(offered[0]);\n  const view = offered.includes(chosen) ? chosen : offered[0];\n\n  return (\n    // `relative` so the keyboard description below can be `sr-only` without escaping\n    // to the initial containing block (see sr-only-containment.test).\n    <div {...rest} className={cn(\"relative\", className)}>\n      <div className=\"mb-1 flex flex-wrap items-center justify-between gap-2\">\n        <span id={labelId} className=\"text-[11px] font-medium text-[var(--text-muted)]\">\n          {label}\n        </span>\n        {offered.length > 1 && (\n          <ToggleGroup\n            className=\"w-auto\"\n            aria-label={labels.view}\n            value={view}\n            onChange={setChosen}\n            options={offered.map((value) => ({\n              value,\n              label: value === \"cells\" ? labels.cellsView : labels.textView,\n            }))}\n          />\n        )}\n      </div>\n      {view === \"cells\" ? (\n        <CellGrid\n          columns={columns}\n          cells={cells}\n          onCells={onCells}\n          disabled={disabled}\n          rowHeight={rowHeight}\n          locale={locale}\n          mark={mark}\n          labels={labels}\n          labelledBy={labelId}\n          describedBy={hint ? `${keysId} ${hintId}` : keysId}\n        />\n      ) : (\n        <TextView\n          columns={columns}\n          cells={cells}\n          onCells={onCells}\n          disabled={disabled}\n          mark={mark}\n          labels={labels}\n          labelledBy={labelId}\n          describedBy={hint ? hintId : undefined}\n        />\n      )}\n      {hint && (\n        <p id={hintId} className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {view === \"cells\" && (\n        <span id={keysId} className=\"sr-only\">\n          {labels.keyboardHint}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** Where the caret is. Held in state rather than read off `document`, because a\n *  windowed grid unmounts the cell being walked towards: the move is decided first and\n *  focused after the row it lands on has been rendered. */\ninterface Caret {\n  row: number;\n  column: number;\n}\n\ninterface ViewProps {\n  columns: MeasuredGridColumn[];\n  cells: string[][];\n  onCells: (next: string[][]) => void;\n  disabled?: boolean;\n  mark: \",\" | \".\";\n  labels: MeasuredGridLabels;\n  labelledBy: string;\n  describedBy?: string;\n}\n\nfunction CellGrid({\n  columns,\n  cells,\n  onCells,\n  disabled,\n  rowHeight,\n  locale,\n  mark,\n  labels,\n  labelledBy,\n  describedBy,\n}: ViewProps & { rowHeight: number; locale: string | undefined }) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const headRef = useRef<HTMLDivElement>(null);\n  const width = columns.length;\n  const blankRow = () => columns.map(() => BLANK);\n  // At least one row to type into: a grid with nothing in it has nowhere to put the\n  // first number, and \"add a row\" is not the first thing to ask of someone who has\n  // just opened an empty table. It is not written back until something is typed.\n  const grid = cells.length ? cells : [blankRow()];\n  const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);\n  const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n\n  // The remove buttons are the last column of the grid, reachable by the arrows like\n  // any cell — except where they are disabled (a read-only grid, or the placeholder\n  // row of an empty one), because a disabled button cannot hold the tab stop.\n  const removable = !disabled && cells.length > 0;\n  const lastColumn = removable ? width : width - 1;\n\n  const [caret, setCaret] = useState<Caret>({ row: 0, column: 0 });\n  // Clamped on read, not corrected in an effect: rows removed or columns changed from\n  // outside must never leave the tab stop on a cell that is not there.\n  const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };\n  /** Whether the caret cell is being edited in place (see the component note). */\n  const [editing, setEditing] = useState(false);\n  /** A cell that has to take focus once it exists — one commit away when the move\n   *  crossed the edge of the window. `select` is arrival by keyboard. */\n  const pending = useRef<(Caret & { select: boolean }) | null>(null);\n  /** What the caret cell held when the caret arrived: what Escape puts back. */\n  const origin = useRef(BLANK);\n  /** The next focus was a pointer's: place the caret where it was clicked, edit. */\n  const pointer = useRef(false);\n\n  useEffect(() => {\n    const target = pending.current;\n    if (!target) return;\n    const element = scrollRef.current?.querySelector<HTMLElement>(\n      `[data-cell=\"${target.row}:${target.column}\"]`,\n    );\n    if (!element) return;\n    pending.current = null;\n    // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,\n    // which the browser's own scroll-into-view does not know is there.\n    element.focus({ preventScroll: true });\n    if (target.select && element instanceof HTMLInputElement) element.select();\n  });\n\n  const pad = (row: readonly string[] | undefined) =>\n    Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);\n\n  const setCell = (row: number, column: number, value: string) => {\n    const next = grid.map(pad);\n    next[row][column] = value;\n    onCells(next);\n  };\n\n  /** Scroll `row` into the band below the sticky header. */\n  const reveal = (row: number) => {\n    const element = scrollRef.current;\n    if (!element) return;\n    const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);\n    if (room <= 0) return;\n    const top = row * rowHeight;\n    if (top < element.scrollTop) element.scrollTop = top;\n    else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;\n  };\n\n  const focusCell = (row: number, column: number) => {\n    reveal(row);\n    pending.current = { row, column, select: true };\n    setCaret({ row, column });\n    setEditing(false);\n  };\n\n  const go = (row: number, column: number) => {\n    const target = {\n      row: Math.max(0, Math.min(row, grid.length - 1)),\n      column: Math.max(0, Math.min(column, lastColumn)),\n    };\n    if (target.row === at.row && target.column === at.column) return;\n    focusCell(target.row, target.column);\n  };\n\n  /** Down a column — and off the bottom, a new row, unless the last one is still\n   *  empty: holding ArrowDown should not leave a trail of blank rows behind it. */\n  const down = (row: number, column: number) => {\n    if (row + 1 < grid.length) return go(row + 1, column);\n    if (disabled || !hasContent(grid[row])) return;\n    onCells([...grid.map(pad), blankRow()]);\n    focusCell(row + 1, Math.min(column, width - 1));\n  };\n\n  const page = () => {\n    const element = scrollRef.current;\n    const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;\n    // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.\n    return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;\n  };\n\n  /**\n   * On each cell rather than once on the grid, for the reason `MiniCalendar` gives:\n   * the cell is where focus is, and a container listening for keys it cannot receive\n   * is the shape `jsx-a11y/interactive-supports-focus` objects to.\n   */\n  const onCellKeyDown = (event: KeyboardEvent<HTMLElement>, row: number, column: number) => {\n    const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;\n    const inText = Boolean(input) && editing;\n    const modified = event.ctrlKey || event.metaKey;\n    switch (event.key) {\n      case \"ArrowUp\":\n        event.preventDefault();\n        return go(row - 1, column);\n      case \"ArrowDown\":\n        event.preventDefault();\n        return down(row, column);\n      case \"Enter\":\n        // On the remove button Enter is the button's own.\n        if (!input) return;\n        event.preventDefault();\n        return event.shiftKey ? go(row - 1, column) : down(row, column);\n      case \"ArrowLeft\":\n      case \"ArrowRight\": {\n        // Along the reading direction: ArrowLeft is \"next column\" in RTL.\n        const forward = horizontalStep(event.key, event.currentTarget) === 1;\n        if (inText && input) {\n          const edge = forward ? input.value.length : 0;\n          // Inside the text the caret moves; only at its edge does it leave the cell.\n          if (input.selectionStart !== edge || input.selectionEnd !== edge) return;\n        }\n        event.preventDefault();\n        return go(row, column + (forward ? 1 : -1));\n      }\n      case \"Home\":\n      case \"End\": {\n        if (inText && !modified) return;\n        event.preventDefault();\n        const home = event.key === \"Home\";\n        if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);\n        return go(row, home ? 0 : width - 1);\n      }\n      case \"PageUp\":\n        event.preventDefault();\n        return go(row - page(), column);\n      case \"PageDown\":\n        event.preventDefault();\n        return go(row + page(), column);\n      case \"F2\":\n        if (!input || disabled) return;\n        event.preventDefault();\n        setEditing(true);\n        input.setSelectionRange(input.value.length, input.value.length);\n        return;\n      case \"Escape\":\n        // Not editing: nothing of ours to undo, so the key belongs to whatever the\n        // grid sits in — the dialog it is in closes, as it should.\n        if (!input || !editing) return;\n        event.preventDefault();\n        event.stopPropagation();\n        if (input.value !== origin.current) setCell(row, column, origin.current);\n        pending.current = { row, column, select: true };\n        setEditing(false);\n        return;\n    }\n  };\n\n  /**\n   * A pasted block, written in from the cell it was pasted into.\n   *\n   * Rows past the end grow the table; columns past the last are dropped, because a\n   * paste wider than the measurement is a paste with a trailing timestamp column and\n   * not an error worth refusing. One header line is skipped — pasted data almost\n   * always has one. Each line is read on its own evidence (`splitRow`, the per-line\n   * comma rule), so one line cannot change what another means.\n   */\n  const paste = (row: number, column: number, text: string) => {\n    const lines = text.split(/\\r?\\n/).filter((line) => line.trim() !== \"\");\n    if (!lines.length) return;\n    const block = lines.map(splitRow);\n    if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();\n\n    const height = Math.max(grid.length, row + block.length);\n    const next = Array.from({ length: height }, (_, index) => pad(grid[index]));\n    block.forEach((line, downwards) => {\n      line.forEach((cell, across) => {\n        const target = column + across;\n        if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);\n      });\n    });\n    onCells(next);\n    pending.current = { row, column, select: true };\n    setEditing(false);\n  };\n\n  const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;\n  // The caret's row is mounted even when it has been scrolled out of the window: it\n  // holds the grid's only tab stop, and a tab stop that is not in the DOM is a grid\n  // Tab walks straight past.\n  const mounted: number[] = [];\n  for (let index = first; index < last; index += 1) mounted.push(index);\n  if (at.row < first || at.row >= last) mounted.push(at.row);\n\n  const filled = cells.filter(hasContent);\n  const problems = filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length;\n\n  return (\n    <div className=\"rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\">\n      <div ref={scrollRef} className=\"max-h-72 overflow-auto\">\n        <div\n          role=\"grid\"\n          aria-labelledby={labelledBy}\n          aria-describedby={describedBy}\n          // The true size, not the mounted one: a screen reader otherwise reports the\n          // thirty rows in the window as the whole table.\n          aria-rowcount={grid.length + 1}\n          aria-colcount={width + 2}\n          aria-readonly={disabled || undefined}\n          className=\"text-xs\"\n          style={{ minWidth: `calc(4.5rem + ${width} * 5.5rem)` }}\n        >\n          {/* The header stays put vertically and scrolls sideways with the body, so a\n              fifteen-column linkage can be read without losing which column is which. */}\n          <div ref={headRef} role=\"rowgroup\" className=\"sticky top-0 z-10 bg-[var(--bg-surface-2)]\">\n            <div\n              role=\"row\"\n              aria-rowindex={1}\n              className=\"grid border-b border-[var(--border)]\"\n              style={{ gridTemplateColumns: template }}\n            >\n              <div\n                role=\"columnheader\"\n                aria-label={labels.rowNumber}\n                className=\"flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]\"\n              >\n                #\n              </div>\n              {columns.map((column, index) => (\n                <div\n                  key={index}\n                  role=\"columnheader\"\n                  className=\"min-w-0 border-s border-[var(--border)] px-2 py-1 text-end\"\n                >\n                  <span className=\"block truncate font-medium text-[var(--text-primary)]\">\n                    {column.label}\n                  </span>\n                  {column.unit && (\n                    <span className=\"block truncate text-[10px] text-[var(--text-muted)]\">\n                      {column.unit}\n                    </span>\n                  )}\n                </div>\n              ))}\n              <div\n                role=\"columnheader\"\n                aria-label={labels.rowActions}\n                className=\"border-s border-[var(--border)]\"\n              />\n            </div>\n          </div>\n          {/* Only the rows in the window are mounted — a swept linkage is thousands of\n              them across fifteen inputs — each placed at its own offset, so mounting\n              one more (the caret's) costs nothing in the arithmetic. */}\n          <div role=\"rowgroup\" className=\"relative\" style={{ height: totalHeight }}>\n            {mounted.map((index) => {\n              const row = grid[index];\n              return (\n                <div\n                  key={index}\n                  role=\"row\"\n                  aria-rowindex={index + 2}\n                  className=\"absolute inset-x-0 grid hover:bg-[var(--bg-hover)]\"\n                  style={{ top: index * rowHeight, height: rowHeight, gridTemplateColumns: template }}\n                >\n                  <div\n                    role=\"rowheader\"\n                    className=\"flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]\"\n                  >\n                    {rowNumber.format(index + 1)}\n                  </div>\n                  {columns.map((column, columnIndex) => {\n                    const value = row[columnIndex] ?? BLANK;\n                    const bad = value.trim() !== \"\" && !isCellNumber(value);\n                    const isCaret = at.row === index && at.column === columnIndex;\n                    return (\n                      <div key={columnIndex} role=\"gridcell\" className=\"min-w-0 border-s border-[var(--border)]\">\n                        <input\n                          data-cell={`${index}:${columnIndex}`}\n                          value={value}\n                          // `readOnly`, not `disabled`: a disabled input cannot take\n                          // focus, and a read-only table should still be walkable.\n                          readOnly={disabled}\n                          tabIndex={isCaret ? 0 : -1}\n                          inputMode=\"decimal\"\n                          spellCheck={false}\n                          autoComplete=\"off\"\n                          aria-label={labels.cell(column.label, index + 1)}\n                          // Said, not only painted: the ring is what a sighted user\n                          // sees, `aria-invalid` is what a screen reader reads.\n                          aria-invalid={bad || undefined}\n                          className={cn(\n                            \"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none\",\n                            // Arriving selects the text (typing replaces it); editing\n                            // in place is the plain surface with a caret in it.\n                            \"focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]\",\n                            isCaret && editing && \"focus:bg-[var(--bg-surface)]\",\n                            disabled && \"text-[var(--text-muted)]\",\n                            bad && cn(FIELD_INVALID, \"ring-inset\"),\n                          )}\n                          onMouseDown={(event) => {\n                            // A click places a caret, which is editing. On the cell\n                            // already focused there is no focus event to say so.\n                            if (document.activeElement === event.currentTarget) setEditing(!disabled);\n                            else pointer.current = true;\n                          }}\n                          onFocus={(event) => {\n                            origin.current = event.currentTarget.value;\n                            if (!isCaret) setCaret({ row: index, column: columnIndex });\n                            const byPointer = pointer.current;\n                            pointer.current = false;\n                            setEditing(byPointer && !disabled);\n                            if (!byPointer) event.currentTarget.select();\n                          }}\n                          onBlur={() => setEditing(false)}\n                          onChange={(event) => {\n                            setCell(index, columnIndex, event.target.value);\n                            setEditing(true);\n                          }}\n                          onPaste={(event) => {\n                            if (disabled) return;\n                            const text = event.clipboardData.getData(\"text/plain\");\n                            // One cell's worth of text is an ordinary paste, and the\n                            // browser does it better than this would; only a block is\n                            // the grid's business.\n                            if (!/[\\t\\n;]/.test(text)) return;\n                            event.preventDefault();\n                            paste(index, columnIndex, text);\n                          }}\n                          onKeyDown={(event) => onCellKeyDown(event, index, columnIndex)}\n                        />\n                      </div>\n                    );\n                  })}\n                  <div\n                    role=\"gridcell\"\n                    className=\"flex items-center justify-center border-s border-[var(--border)]\"\n                  >\n                    <button\n                      type=\"button\"\n                      data-cell={`${index}:${width}`}\n                      disabled={!removable}\n                      tabIndex={at.row === index && at.column === width ? 0 : -1}\n                      aria-label={labels.removeRow(index + 1)}\n                      className=\"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]\"\n                      onKeyDown={(event) => onCellKeyDown(event, index, width)}\n                      onFocus={() => {\n                        if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });\n                      }}\n                      onClick={() => {\n                        const next = grid.filter((_, other) => other !== index);\n                        onCells(next);\n                        // Focus stays in the column, on the row that moved up into\n                        // this one; an emptied table sends it to the first cell.\n                        if (next.length) focusCell(Math.min(index, next.length - 1), width);\n                        else focusCell(0, 0);\n                      }}\n                    >\n                      <Trash2 aria-hidden className=\"size-3.5\" />\n                    </button>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5\">\n        <Button\n          variant=\"ghost\"\n          className=\"px-2 py-1 text-xs\"\n          disabled={disabled}\n          onClick={() => {\n            onCells([...grid.map(pad), blankRow()]);\n            focusCell(grid.length, 0);\n          }}\n        >\n          <Plus aria-hidden className=\"size-3.5\" /> {labels.addRow}\n        </Button>\n        <Button\n          variant=\"ghost\"\n          className=\"px-2 py-1 text-xs text-[var(--text-muted)]\"\n          disabled={disabled || !cells.length}\n          onClick={() => {\n            onCells([]);\n            // The button is about to disable itself; focus must not go down with it.\n            focusCell(0, 0);\n          }}\n        >\n          <Eraser aria-hidden className=\"size-3.5\" /> {labels.clear}\n        </Button>\n        <span className=\"text-[11px] tabular-nums text-[var(--text-muted)]\">\n          {labels.points(filled.length)}\n        </span>\n        {problems > 0 && (\n          <span className=\"text-[11px] text-[var(--danger)]\">{labels.problems(problems)}</span>\n        )}\n        <span className=\"ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]\">\n          <ClipboardPaste aria-hidden className=\"size-3.5\" /> {labels.pasteHint}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nconst textOf = (cells: string[][]) => cells.map((row) => row.join(\"\\t\")).join(\"\\n\");\n\n/**\n * The same table as text.\n *\n * Kept because the grid is worst at exactly what a textarea is best at: reading a long\n * export back in one piece. It commits on blur — through `parseRows`, the paste door —\n * and a line it cannot read is NAMED rather than dropped: half a sweep saved as a\n * measurement is worse than a refusal.\n */\nfunction TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }: ViewProps) {\n  const text = textOf(cells);\n  const [draft, setDraft] = useState(text);\n  const [errorLine, setErrorLine] = useState<number | null>(null);\n  // Follow the table when it changes from outside (a generated shape, a cleared form).\n  // Compared as text, so a caller that rebuilds the same cells every render does not\n  // wipe what is being typed.\n  const [seen, setSeen] = useState(text);\n  if (seen !== text) {\n    setSeen(text);\n    setDraft(text);\n    setErrorLine(null);\n  }\n\n  const commit = () => {\n    // Untouched: nothing to read back, and re-reading would rewrite every cell in the\n    // lexer's spelling of it.\n    if (draft === text) return;\n    if (!draft.trim()) {\n      setErrorLine(null);\n      onCells([]);\n      return;\n    }\n    const parsed = parseRows(draft, columns.length);\n    if (\"error\" in parsed) {\n      setErrorLine(parsed.error);\n      return;\n    }\n    setErrorLine(null);\n    onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));\n  };\n\n  const lines = draft.split(\"\\n\").filter((line) => line.trim()).length;\n\n  return (\n    <div>\n      <Textarea\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        rows={10}\n        value={draft}\n        readOnly={disabled}\n        spellCheck={false}\n        className=\"font-mono text-xs\"\n        error={errorLine !== null ? labels.lineError(errorLine) : undefined}\n        onChange={(event) => setDraft(event.target.value)}\n        onBlur={commit}\n      />\n      <p className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n        {columns.map((column) => column.label).join(\" · \")}\n        {\" — \"}\n        {labels.points(lines)}\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/mini-calendar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
@@ -127,12 +128,10 @@ function MiniCalendar({
   };
   const onDayKeyDown = (e) => {
     const next = new Date(activeDate);
-    switch (e.key) {
-      case "ArrowLeft":
-        next.setDate(next.getDate() - 1);
-        break;
-      case "ArrowRight":
-        next.setDate(next.getDate() + 1);
+    const step = horizontalStep(e.key, e.currentTarget);
+    switch (step ? "horizontal" : e.key) {
+      case "horizontal":
+        next.setDate(next.getDate() + step);
         break;
       case "ArrowUp":
         next.setDate(next.getDate() - 7);
@@ -208,7 +207,7 @@ function MiniCalendar({
             onClick: () => moveMonth(-1),
             "aria-label": labels.previousMonth,
             className: "rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
-            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -227,7 +226,7 @@ function MiniCalendar({
             onClick: () => moveMonth(1),
             "aria-label": labels.nextMonth,
             className: "rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]",
-            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
           }
         )
       ] }),

package/dist/components/mini-calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`\n *  (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  day: (date) => date,\n  chooseStart: \"Choose a start date\",\n  chooseEnd: \"Choose an end date\",\n  startSelected: (date) => `${date} selected as the start. Choose an end date.`,\n  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,\n};\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  from: string;\n  to: string;\n  /**\n   * BCP 47 tag for the month caption, the weekday heads, the day numbers and the\n   * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar\n   * NESTED in another kit component (the data table's date filter) has no call site\n   * of its own to pass one at, so it reads the provider's. Without either, `Intl`\n   * uses the runtime's default.\n   */\n  locale?: string;\n  /**\n   * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).\n   * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,\n   * Saturday in much of the Arab world — which is what the user's own wall calendar\n   * does. It was hard-wired to Monday before, which is wrong for most of the people\n   * who use a Sunday-first calendar and invisible to the people who wrote this one.\n   *\n   * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's\n   * week info, else Monday.\n   */\n  weekStartsOn?: WeekDay;\n  onSelect: (from: string, to: string) => void;\n  /** `\"range\"` (default) = two-click from→to; `\"single\"` = one click selects a\n   *  single day (emitted as `onSelect(iso, iso)`). */\n  mode?: \"single\" | \"range\";\n  /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */\n  min?: string;\n  max?: string;\n  /** User-facing strings; see {@link MiniCalendarLabels}. */\n  labels?: Partial<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * The first day of the week in `locale`, as a `Date#getDay` index.\n *\n * `Intl.Locale#getWeekInfo()` is the standard spelling; V8 shipped it first as the\n * `weekInfo` accessor, and Firefox has neither yet — hence both reads and a Monday\n * fallback, which is ISO 8601 and what this grid did unconditionally before. Its\n * `firstDay` counts 1 = Monday … 7 = Sunday, so `% 7` maps it onto `getDay`.\n */\nfunction localeWeekStart(locale: string | undefined): WeekDay {\n  try {\n    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;\n    const loc = new Intl.Locale(tag) as Intl.Locale & {\n      getWeekInfo?: () => { firstDay: number };\n      weekInfo?: { firstDay: number };\n    };\n    const firstDay = (loc.getWeekInfo?.() ?? loc.weekInfo)?.firstDay;\n    if (typeof firstDay === \"number\") return (firstDay % 7) as WeekDay;\n  } catch {\n    // A malformed tag throws from `Intl.Locale`; the calendar still has to render.\n  }\n  return 1;\n}\n\n/** Where `d` sits in a week that starts on `weekStart` (the first column = 0). */\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Move `d` by whole months, keeping the day of the month where the target has one.\n *  `setMonth` alone ROLLS OVER — 31 January + 1 month is 3 March — which would skip\n *  February entirely for anyone paging through the year with PageDown. */\nfunction stepMonths(d: Date, months: number): Date {\n  const day = d.getDate();\n  const out = new Date(d.getFullYear(), d.getMonth() + months, 1);\n  const lastOfTarget = new Date(out.getFullYear(), out.getMonth() + 1, 0).getDate();\n  out.setDate(Math.min(day, lastOfTarget));\n  return out;\n}\n\n/**\n * Month-grid range picker used by the data-table date filter. Click once to set\n * the start (and clear the end), click again to set the end; clicking with a\n * full range already selected starts over. The week starts where the locale's does\n * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.\n * In `single` mode each click selects one day. Days outside `min`/`max` (when\n * given) are disabled.\n *\n * **It is a grid, in the APG sense** (audit §a11y, \"MiniCalendar is unusable with a\n * keyboard or screen reader\"). Before this it was 42 buttons in a `grid-cols-7` div:\n * every one of them in the tab order, none of them saying which date it was, and no\n * way to reach next month without a mouse. Now the month is a `role=\"grid\"` of rows\n * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows\n * walk the calendar the way the pattern says — day, week, month — crossing into the\n * neighbouring month by MOVING the grid rather than stopping at its edge.\n *\n * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG\n * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded\n * month would have holes that the roving tabindex falls into. They stay reachable and\n * readable, and the click handler is what refuses them.\n */\nexport function MiniCalendar({\n  from,\n  to,\n  locale: localeProp,\n  weekStartsOn,\n  onSelect,\n  mode = \"range\",\n  min,\n  max,\n  labels: labelsProp,\n  focusOnOpen,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const labels = useKitLabels(\"miniCalendar\", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart = useMemo(\n    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),\n    [weekStartsOn, providerWeekStart, locale],\n  );\n  // Day numbers through `Intl` too: `getDate()` is always ASCII digits, and a locale\n  // that writes its own (Arabic, Persian, Bengali …) would get a grid of foreign\n  // numerals under a caption in its own script.\n  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromDate = parseIsoDate(from);\n  const toDate = parseIsoDate(to);\n  const minDate = min ? parseIsoDate(min) : null;\n  const maxDate = max ? parseIsoDate(max) : null;\n  const isDisabled = (d: Date) => Boolean((minDate && d < minDate) || (maxDate && d > maxDate));\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const monthId = `${id}-month`;\n  const hintId = `${id}-hint`;\n  const { announce, regionProps } = useAnnounce();\n\n  /**\n   * The day that holds the tab order, and with it the visible month — one piece of\n   * state, not two, because they cannot be allowed to disagree: a tabbable cell in a\n   * month that is not on screen is a tab stop that focuses nothing.\n   *\n   * Starts on the selection, or on today when there is none, pulled inside `[min, max]`\n   * so a bounded calendar opens on a day it will actually let you pick.\n   */\n  const [activeIso, setActiveIso] = useState(() => {\n    const start = fromDate ?? toDate ?? new Date();\n    if (minDate && start < minDate) return toLocalIso(minDate);\n    if (maxDate && start > maxDate) return toLocalIso(maxDate);\n    return toLocalIso(start);\n  });\n\n  // Follow the caller's value when it changes from outside (a preset, a cleared\n  // filter, a form reset). Written as a render-phase adjustment rather than an effect\n  // so the grid never paints one frame on the old month.\n  const [lastValue, setLastValue] = useState({ from, to });\n  if (lastValue.from !== from || lastValue.to !== to) {\n    // Follow the end that actually CHANGED, not `from` unconditionally. Picking the\n    // end of a range that spans months used to send the grid back to the start's\n    // month — which with a roving tabindex means the cell the user just activated is\n    // no longer rendered, and their focus goes with it to `<body>`.\n    const changed = lastValue.from !== from ? from : to;\n    setLastValue({ from, to });\n    const next = parseIsoDate(changed) ?? fromDate ?? toDate;\n    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));\n  }\n\n  const activeDate = parseIsoDate(activeIso) ?? new Date();\n  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };\n\n  const firstOfMonth = new Date(view.year, view.month, 1);\n  const lastOfMonth = new Date(view.year, view.month + 1, 0);\n  // Leading blanks up to the first of the month, counted from the week's first day.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) cells.push(null);\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" });\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  /**\n   * A day whose cell has to take focus once it exists. Arrowing off the edge of the\n   * month renders a different month, so the element to focus is not in the DOM at the\n   * time the key is handled — it is one commit away.\n   */\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-iso=\"${iso}\"]`)?.focus();\n  });\n\n  // The roving tab stop is the day to open on, so there is nothing else to work out\n  // here — it is already the selection, or today, pulled inside the bounds.\n  useEffect(() => {\n    if (!focusOnOpen) return;\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, [focusOnOpen]);\n\n  /** Move the roving tabindex, and the month with it when the day lands outside. */\n  const moveTo = (d: Date, focus: boolean) => {\n    const iso = toLocalIso(d);\n    if (iso === activeIso) return;\n    if (focus) pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  /**\n   * On each day rather than once on the grid: the cell is where focus is, and a\n   * container listening for keys it cannot itself receive is the shape\n   * `jsx-a11y/interactive-supports-focus` objects to. One shared function, not a\n   * closure per cell — it reads the active day from state, which is always the\n   * focused one.\n   */\n  const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const next = new Date(activeDate);\n    switch (e.key) {\n      case \"ArrowLeft\":\n        next.setDate(next.getDate() - 1);\n        break;\n      case \"ArrowRight\":\n        next.setDate(next.getDate() + 1);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - 7);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + 7);\n        break;\n      case \"Home\":\n        next.setDate(next.getDate() - weekdayIndex(next, weekStart));\n        break;\n      case \"End\":\n        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));\n        break;\n      // Shift+Page is the year step, as in the APG example. It is the only way to\n      // reach a birth year without holding PageUp for four hundred keystrokes.\n      case \"PageUp\":\n        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());\n        break;\n      default:\n        return;\n    }\n    // Before the no-op check: every key above also scrolls the panel this calendar\n    // usually sits in, and a day that cannot move still must not move the page.\n    e.preventDefault();\n    moveTo(next, true);\n  };\n\n  const moveMonth = (delta: number) => {\n    // Focus stays on the arrow button the user is pressing — only the grid moves.\n    moveTo(stepMonths(activeDate, delta), false);\n  };\n\n  const handleClick = (d: Date) => {\n    // The guard that `disabled` used to be. Out-of-range days are focusable on\n    // purpose (see the component note), so refusing the click is this function's job.\n    if (isDisabled(d)) return;\n    const iso = toLocalIso(d);\n    // Keep the tab order on the day that was just activated even if the caller\n    // ignores the selection — a controlled component may reject it, and the roving\n    // tabindex is this component's own state, not an echo of the value.\n    moveTo(d, false);\n    if (mode === \"single\") {\n      onSelect(iso, iso);\n      return;\n    }\n    const f = parseIsoDate(from);\n    const tt = parseIsoDate(to);\n    if (!f || (f && tt)) {\n      // start a new selection\n      onSelect(iso, \"\");\n      announce(labels.startSelected(formatDay(d)));\n      return;\n    }\n    // f set, tt empty\n    if (d < f) {\n      onSelect(iso, toLocalIso(f));\n      announce(labels.rangeSelected(formatDay(d), formatDay(f)));\n    } else {\n      onSelect(toLocalIso(f), iso);\n      announce(labels.rangeSelected(formatDay(f), formatDay(d)));\n    }\n  };\n\n  const today = new Date();\n  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));\n  const daysInMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();\n  const inRange = (d: Date) => {\n    if (!fromDate || !toDate) return false;\n    return d >= fromDate && d <= toDate;\n  };\n\n  // What the next click does. A range is two clicks and nothing on screen says which\n  // one you are on — sighted users read it off the highlighted start.\n  const awaitingEnd = Boolean(fromDate) && !toDate;\n  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;\n\n  return (\n    // The caller's classes come last, so tailwind-merge lets them win the way\n    // `className` does everywhere else in the kit; `...rest` first, as in the rest of\n    // this wave, so nothing from outside can take the grid's own wiring away.\n    <div {...rest} className={cn(\"select-none\", className)}>\n      <div className=\"flex items-center justify-between pb-1\">\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(-1)}\n          aria-label={labels.previousMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <ChevronLeft className=\"size-4\" />\n        </button>\n        {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n        <div\n          id={monthId}\n          aria-live=\"polite\"\n          className=\"text-xs font-medium capitalize text-[var(--text-secondary)]\"\n        >\n          {monthLabel}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(1)}\n          aria-label={labels.nextMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <ChevronRight className=\"size-4\" />\n        </button>\n      </div>\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className=\"grid gap-y-0.5\"\n      >\n        <div\n          role=\"row\"\n          className=\"grid grid-cols-7 text-center text-[10px] font-medium uppercase text-[var(--text-placeholder)]\"\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className=\"py-0.5\">\n              {w.narrow}\n            </div>\n          ))}\n        </div>\n        {weeks.map((week, wi) => (\n          // No column gap: the days of a range join into ONE band. With a gap each day\n          // was its own tinted box, and a selected fortnight read as fourteen chips.\n          <div key={wi} role=\"row\" className=\"grid grid-cols-7\">\n            {week.map((d, di) => {\n              // The padding cells still have to BE cells, or the rows are ragged and\n              // a screen reader's \"column 3\" stops meaning Wednesday.\n              if (!d) return <div key={di} role=\"gridcell\" className=\"h-8\" />;\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              // The band behind the day: full width between the ends, half width at an\n              // end (so the round endpoint sits ON the band's tip), rounded where a row\n              // or the month breaks it. Only when both ends exist and differ — a lone\n              // start is a dot, not a band of one.\n              const banded =\n                hasBand && !disabled && (isStart || isEnd || isInRange);\n              const lastOfMonth = d.getDate() === daysInMonth(d);\n              const band = banded\n                ? cn(\n                    \"pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div key={di} role=\"none\" className=\"relative flex h-8 items-center justify-center\">\n                {band && <span aria-hidden className={band} />}\n                <button\n                  key={di}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-iso={iso}\n                  // The roving tabindex: ONE tab stop for the whole month. Every day\n                  // being tabbable meant 31 stops between a date field and the next\n                  // control, which is the same reason the pattern exists.\n                  tabIndex={isActive ? 0 : -1}\n                  aria-label={labels.day(formatDay(d))}\n                  aria-selected={Boolean(isStart || isEnd || isInRange)}\n                  aria-disabled={disabled || undefined}\n                  aria-current={isToday ? \"date\" : undefined}\n                  onClick={() => handleClick(d)}\n                  onKeyDown={onDayKeyDown}\n                  className={cn(\n                    \"relative size-8 rounded-full text-xs tabular-nums transition-colors\",\n                    // A grid you can walk with the keyboard needs to show where the\n                    // keyboard IS. Inset because the cells sit half a pixel apart and\n                    // an outset ring would be drawn over by its neighbours; the\n                    // colour flips on the selected days for the reason the numpad's\n                    // \"Done\" key does — a --brand ring on a --brand fill is a ring\n                    // that exists only in the DOM.\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    isStart || isEnd\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      // The two selected states are the BRAND, not a fixed sky: the endpoints\n                      // are the solid fill and the days between them its soft tint. Hardcoding\n                      // them left an app that changed `--brand` with a calendar in the old\n                      // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                      // flip light/dark themselves, so there is no `dark:` partner to carry —\n                      // one would override the token and bring the hardcoded hue back.\n                      : isStart || isEnd\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : isInRange\n                          ? \"font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]\"\n                          : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {dayNumber.format(d.getDate())}\n                </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      {/* `sr-only-fixed`, not `sr-only`: this renders inside whatever panel a consumer\n          opens it in, and there is no wrapper we can require to be `relative` — see\n          the note on the class in tokens.css. */}\n      {mode === \"range\" && (\n        <span id={hintId} className=\"sr-only-fixed\">\n          {rangeHint}\n        </span>\n      )}\n      <span {...regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["lastOfMonth"]}
+{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`\n *  (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  day: (date) => date,\n  chooseStart: \"Choose a start date\",\n  chooseEnd: \"Choose an end date\",\n  startSelected: (date) => `${date} selected as the start. Choose an end date.`,\n  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,\n};\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  from: string;\n  to: string;\n  /**\n   * BCP 47 tag for the month caption, the weekday heads, the day numbers and the\n   * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar\n   * NESTED in another kit component (the data table's date filter) has no call site\n   * of its own to pass one at, so it reads the provider's. Without either, `Intl`\n   * uses the runtime's default.\n   */\n  locale?: string;\n  /**\n   * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).\n   * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,\n   * Saturday in much of the Arab world — which is what the user's own wall calendar\n   * does. It was hard-wired to Monday before, which is wrong for most of the people\n   * who use a Sunday-first calendar and invisible to the people who wrote this one.\n   *\n   * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's\n   * week info, else Monday.\n   */\n  weekStartsOn?: WeekDay;\n  onSelect: (from: string, to: string) => void;\n  /** `\"range\"` (default) = two-click from→to; `\"single\"` = one click selects a\n   *  single day (emitted as `onSelect(iso, iso)`). */\n  mode?: \"single\" | \"range\";\n  /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */\n  min?: string;\n  max?: string;\n  /** User-facing strings; see {@link MiniCalendarLabels}. */\n  labels?: Partial<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * The first day of the week in `locale`, as a `Date#getDay` index.\n *\n * `Intl.Locale#getWeekInfo()` is the standard spelling; V8 shipped it first as the\n * `weekInfo` accessor, and Firefox has neither yet — hence both reads and a Monday\n * fallback, which is ISO 8601 and what this grid did unconditionally before. Its\n * `firstDay` counts 1 = Monday … 7 = Sunday, so `% 7` maps it onto `getDay`.\n */\nfunction localeWeekStart(locale: string | undefined): WeekDay {\n  try {\n    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;\n    const loc = new Intl.Locale(tag) as Intl.Locale & {\n      getWeekInfo?: () => { firstDay: number };\n      weekInfo?: { firstDay: number };\n    };\n    const firstDay = (loc.getWeekInfo?.() ?? loc.weekInfo)?.firstDay;\n    if (typeof firstDay === \"number\") return (firstDay % 7) as WeekDay;\n  } catch {\n    // A malformed tag throws from `Intl.Locale`; the calendar still has to render.\n  }\n  return 1;\n}\n\n/** Where `d` sits in a week that starts on `weekStart` (the first column = 0). */\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Move `d` by whole months, keeping the day of the month where the target has one.\n *  `setMonth` alone ROLLS OVER — 31 January + 1 month is 3 March — which would skip\n *  February entirely for anyone paging through the year with PageDown. */\nfunction stepMonths(d: Date, months: number): Date {\n  const day = d.getDate();\n  const out = new Date(d.getFullYear(), d.getMonth() + months, 1);\n  const lastOfTarget = new Date(out.getFullYear(), out.getMonth() + 1, 0).getDate();\n  out.setDate(Math.min(day, lastOfTarget));\n  return out;\n}\n\n/**\n * Month-grid range picker used by the data-table date filter. Click once to set\n * the start (and clear the end), click again to set the end; clicking with a\n * full range already selected starts over. The week starts where the locale's does\n * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.\n * In `single` mode each click selects one day. Days outside `min`/`max` (when\n * given) are disabled.\n *\n * **It is a grid, in the APG sense** (audit §a11y, \"MiniCalendar is unusable with a\n * keyboard or screen reader\"). Before this it was 42 buttons in a `grid-cols-7` div:\n * every one of them in the tab order, none of them saying which date it was, and no\n * way to reach next month without a mouse. Now the month is a `role=\"grid\"` of rows\n * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows\n * walk the calendar the way the pattern says — day, week, month — crossing into the\n * neighbouring month by MOVING the grid rather than stopping at its edge.\n *\n * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG\n * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded\n * month would have holes that the roving tabindex falls into. They stay reachable and\n * readable, and the click handler is what refuses them.\n */\nexport function MiniCalendar({\n  from,\n  to,\n  locale: localeProp,\n  weekStartsOn,\n  onSelect,\n  mode = \"range\",\n  min,\n  max,\n  labels: labelsProp,\n  focusOnOpen,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const labels = useKitLabels(\"miniCalendar\", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart = useMemo(\n    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),\n    [weekStartsOn, providerWeekStart, locale],\n  );\n  // Day numbers through `Intl` too: `getDate()` is always ASCII digits, and a locale\n  // that writes its own (Arabic, Persian, Bengali …) would get a grid of foreign\n  // numerals under a caption in its own script.\n  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromDate = parseIsoDate(from);\n  const toDate = parseIsoDate(to);\n  const minDate = min ? parseIsoDate(min) : null;\n  const maxDate = max ? parseIsoDate(max) : null;\n  const isDisabled = (d: Date) => Boolean((minDate && d < minDate) || (maxDate && d > maxDate));\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const monthId = `${id}-month`;\n  const hintId = `${id}-hint`;\n  const { announce, regionProps } = useAnnounce();\n\n  /**\n   * The day that holds the tab order, and with it the visible month — one piece of\n   * state, not two, because they cannot be allowed to disagree: a tabbable cell in a\n   * month that is not on screen is a tab stop that focuses nothing.\n   *\n   * Starts on the selection, or on today when there is none, pulled inside `[min, max]`\n   * so a bounded calendar opens on a day it will actually let you pick.\n   */\n  const [activeIso, setActiveIso] = useState(() => {\n    const start = fromDate ?? toDate ?? new Date();\n    if (minDate && start < minDate) return toLocalIso(minDate);\n    if (maxDate && start > maxDate) return toLocalIso(maxDate);\n    return toLocalIso(start);\n  });\n\n  // Follow the caller's value when it changes from outside (a preset, a cleared\n  // filter, a form reset). Written as a render-phase adjustment rather than an effect\n  // so the grid never paints one frame on the old month.\n  const [lastValue, setLastValue] = useState({ from, to });\n  if (lastValue.from !== from || lastValue.to !== to) {\n    // Follow the end that actually CHANGED, not `from` unconditionally. Picking the\n    // end of a range that spans months used to send the grid back to the start's\n    // month — which with a roving tabindex means the cell the user just activated is\n    // no longer rendered, and their focus goes with it to `<body>`.\n    const changed = lastValue.from !== from ? from : to;\n    setLastValue({ from, to });\n    const next = parseIsoDate(changed) ?? fromDate ?? toDate;\n    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));\n  }\n\n  const activeDate = parseIsoDate(activeIso) ?? new Date();\n  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };\n\n  const firstOfMonth = new Date(view.year, view.month, 1);\n  const lastOfMonth = new Date(view.year, view.month + 1, 0);\n  // Leading blanks up to the first of the month, counted from the week's first day.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) cells.push(null);\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" });\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  /**\n   * A day whose cell has to take focus once it exists. Arrowing off the edge of the\n   * month renders a different month, so the element to focus is not in the DOM at the\n   * time the key is handled — it is one commit away.\n   */\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-iso=\"${iso}\"]`)?.focus();\n  });\n\n  // The roving tab stop is the day to open on, so there is nothing else to work out\n  // here — it is already the selection, or today, pulled inside the bounds.\n  useEffect(() => {\n    if (!focusOnOpen) return;\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, [focusOnOpen]);\n\n  /** Move the roving tabindex, and the month with it when the day lands outside. */\n  const moveTo = (d: Date, focus: boolean) => {\n    const iso = toLocalIso(d);\n    if (iso === activeIso) return;\n    if (focus) pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  /**\n   * On each day rather than once on the grid: the cell is where focus is, and a\n   * container listening for keys it cannot itself receive is the shape\n   * `jsx-a11y/interactive-supports-focus` objects to. One shared function, not a\n   * closure per cell — it reads the active day from state, which is always the\n   * focused one.\n   */\n  const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const next = new Date(activeDate);\n    // ←/→ are \"previous/next day\" along the READING direction: the grid's columns run\n    // right-to-left in RTL (it is a CSS grid, so the browser mirrors it), and ArrowLeft\n    // there moves to the day that sits to the left — the next one.\n    const step = horizontalStep(e.key, e.currentTarget);\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - 7);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + 7);\n        break;\n      case \"Home\":\n        next.setDate(next.getDate() - weekdayIndex(next, weekStart));\n        break;\n      case \"End\":\n        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));\n        break;\n      // Shift+Page is the year step, as in the APG example. It is the only way to\n      // reach a birth year without holding PageUp for four hundred keystrokes.\n      case \"PageUp\":\n        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());\n        break;\n      default:\n        return;\n    }\n    // Before the no-op check: every key above also scrolls the panel this calendar\n    // usually sits in, and a day that cannot move still must not move the page.\n    e.preventDefault();\n    moveTo(next, true);\n  };\n\n  const moveMonth = (delta: number) => {\n    // Focus stays on the arrow button the user is pressing — only the grid moves.\n    moveTo(stepMonths(activeDate, delta), false);\n  };\n\n  const handleClick = (d: Date) => {\n    // The guard that `disabled` used to be. Out-of-range days are focusable on\n    // purpose (see the component note), so refusing the click is this function's job.\n    if (isDisabled(d)) return;\n    const iso = toLocalIso(d);\n    // Keep the tab order on the day that was just activated even if the caller\n    // ignores the selection — a controlled component may reject it, and the roving\n    // tabindex is this component's own state, not an echo of the value.\n    moveTo(d, false);\n    if (mode === \"single\") {\n      onSelect(iso, iso);\n      return;\n    }\n    const f = parseIsoDate(from);\n    const tt = parseIsoDate(to);\n    if (!f || (f && tt)) {\n      // start a new selection\n      onSelect(iso, \"\");\n      announce(labels.startSelected(formatDay(d)));\n      return;\n    }\n    // f set, tt empty\n    if (d < f) {\n      onSelect(iso, toLocalIso(f));\n      announce(labels.rangeSelected(formatDay(d), formatDay(f)));\n    } else {\n      onSelect(toLocalIso(f), iso);\n      announce(labels.rangeSelected(formatDay(f), formatDay(d)));\n    }\n  };\n\n  const today = new Date();\n  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));\n  const daysInMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();\n  const inRange = (d: Date) => {\n    if (!fromDate || !toDate) return false;\n    return d >= fromDate && d <= toDate;\n  };\n\n  // What the next click does. A range is two clicks and nothing on screen says which\n  // one you are on — sighted users read it off the highlighted start.\n  const awaitingEnd = Boolean(fromDate) && !toDate;\n  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;\n\n  return (\n    // The caller's classes come last, so tailwind-merge lets them win the way\n    // `className` does everywhere else in the kit; `...rest` first, as in the rest of\n    // this wave, so nothing from outside can take the grid's own wiring away.\n    <div {...rest} className={cn(\"select-none\", className)}>\n      <div className=\"flex items-center justify-between pb-1\">\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(-1)}\n          aria-label={labels.previousMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          {/* Mirrored in RTL: \"previous\" points to the reading START, which is right. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n        {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n        <div\n          id={monthId}\n          aria-live=\"polite\"\n          className=\"text-xs font-medium capitalize text-[var(--text-secondary)]\"\n        >\n          {monthLabel}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(1)}\n          aria-label={labels.nextMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n      </div>\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className=\"grid gap-y-0.5\"\n      >\n        <div\n          role=\"row\"\n          className=\"grid grid-cols-7 text-center text-[10px] font-medium uppercase text-[var(--text-placeholder)]\"\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className=\"py-0.5\">\n              {w.narrow}\n            </div>\n          ))}\n        </div>\n        {weeks.map((week, wi) => (\n          // No column gap: the days of a range join into ONE band. With a gap each day\n          // was its own tinted box, and a selected fortnight read as fourteen chips.\n          <div key={wi} role=\"row\" className=\"grid grid-cols-7\">\n            {week.map((d, di) => {\n              // The padding cells still have to BE cells, or the rows are ragged and\n              // a screen reader's \"column 3\" stops meaning Wednesday.\n              if (!d) return <div key={di} role=\"gridcell\" className=\"h-8\" />;\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              // The band behind the day: full width between the ends, half width at an\n              // end (so the round endpoint sits ON the band's tip), rounded where a row\n              // or the month breaks it. Only when both ends exist and differ — a lone\n              // start is a dot, not a band of one.\n              const banded =\n                hasBand && !disabled && (isStart || isEnd || isInRange);\n              const lastOfMonth = d.getDate() === daysInMonth(d);\n              const band = banded\n                ? cn(\n                    \"pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div key={di} role=\"none\" className=\"relative flex h-8 items-center justify-center\">\n                {band && <span aria-hidden className={band} />}\n                <button\n                  key={di}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-iso={iso}\n                  // The roving tabindex: ONE tab stop for the whole month. Every day\n                  // being tabbable meant 31 stops between a date field and the next\n                  // control, which is the same reason the pattern exists.\n                  tabIndex={isActive ? 0 : -1}\n                  aria-label={labels.day(formatDay(d))}\n                  aria-selected={Boolean(isStart || isEnd || isInRange)}\n                  aria-disabled={disabled || undefined}\n                  aria-current={isToday ? \"date\" : undefined}\n                  onClick={() => handleClick(d)}\n                  onKeyDown={onDayKeyDown}\n                  className={cn(\n                    \"relative size-8 rounded-full text-xs tabular-nums transition-colors\",\n                    // A grid you can walk with the keyboard needs to show where the\n                    // keyboard IS. Inset because the cells sit half a pixel apart and\n                    // an outset ring would be drawn over by its neighbours; the\n                    // colour flips on the selected days for the reason the numpad's\n                    // \"Done\" key does — a --brand ring on a --brand fill is a ring\n                    // that exists only in the DOM.\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    isStart || isEnd\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      // The two selected states are the BRAND, not a fixed sky: the endpoints\n                      // are the solid fill and the days between them its soft tint. Hardcoding\n                      // them left an app that changed `--brand` with a calendar in the old\n                      // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                      // flip light/dark themselves, so there is no `dark:` partner to carry —\n                      // one would override the token and bring the hardcoded hue back.\n                      : isStart || isEnd\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : isInRange\n                          ? \"font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]\"\n                          : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {dayNumber.format(d.getDate())}\n                </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      {/* `sr-only-fixed`, not `sr-only`: this renders inside whatever panel a consumer\n          opens it in, and there is no wrapper we can require to be `relative` — see\n          the note on the class in tokens.css. */}\n      {mode === \"range\" && (\n        <span id={hintId} className=\"sr-only-fixed\">\n          {rangeHint}\n        </span>\n      )}\n      <span {...regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["lastOfMonth"]}

package/dist/components/month-picker.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Calendar, 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 { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./ui.js";
 import { Popover } from "./popover.js";
@@ -141,15 +142,12 @@ function MonthGrid({
     setActive(next);
   };
   const onCellKeyDown = (e) => {
-    const rtl = e.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+    const step = horizontalStep(e.key, e.currentTarget);
     const col = (active.month - 1) % COLUMNS;
     let delta;
-    switch (e.key) {
-      case "ArrowLeft":
-        delta = rtl ? 1 : -1;
-        break;
-      case "ArrowRight":
-        delta = rtl ? -1 : 1;
+    switch (step ? "horizontal" : e.key) {
+      case "horizontal":
+        delta = step;
         break;
       case "ArrowUp":
         delta = -COLUMNS;
@@ -289,7 +287,9 @@ function MonthPicker({
   const valueId = `${id}-value`;
   const panelId = `${id}-panel`;
   const named = typeof label === "string";
-  return /* @__PURE__ */ jsxs("div", { ...wrapperRest, className: cn("relative", className), children: [
+  const rootRef = useRef(null);
+  const [dir, setDir] = useState("ltr");
+  return /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("relative", className), children: [
     label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
     named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
     /* @__PURE__ */ jsx(
@@ -298,11 +298,15 @@ function MonthPicker({
         width: 256,
         panelId,
         labels: { panel: labels.panel },
+        dir,
         trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
           MonthFieldTrigger,
           {
             open,
-            toggle,
+            toggle: () => {
+              setDir(dirOf(rootRef.current));
+              toggle();
+            },
             triggerRef: ref,
             triggerText,
             hasValue: selected != null,

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, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { monthKey, pad } from \"../lib/dates\";\nimport { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from \"./ui\";\nimport { Popover } from \"./popover\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * Every string the month picker can speak. The month and year names are NOT here —\n * they come from `Intl` in the `locale` prop, so they are already in the user's\n * language. What is left is the two icon-only year arrows, whose `aria-label` is the\n * only name they have, the panel's name, and a month cell's name.\n */\nexport interface MonthPickerLabels {\n  previousYear: string;\n  nextYear: string;\n  /** The popover's accessible name (`role=\"dialog\"`). */\n  panel: string;\n  /**\n   * Accessible name of one month cell, given that month and its year formatted in\n   * `locale` (\"August 2026\"). The cell's visible text is the short month alone, and\n   * \"Aug\" read out on its own does not say which year the grid is on.\n   */\n  month: (monthYear: string) => string;\n}\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};\n\n/** Merge caller overrides onto the English defaults. */\nfunction useMonthPickerLabels(partial?: Partial<MonthPickerLabels>): MonthPickerLabels {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  return useKitLabels(\"monthPicker\", DEFAULT_MONTH_PICKER_LABELS, partial);\n}\n\n/**\n * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries\n * a `FormEvent`, and this one answers with a month key. Everything else reaches the\n * field's root, so a test id or a `data-tour` anchor can find it.\n */\nexport interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The selected month as a `\"YYYY-MM\"` key, or `\"\"` for none.\n   *\n   * A string rather than `{ year, month }` or a `Date`, for the reason every date in\n   * this kit is one: it is what `monthKey()` in `lib/dates` produces, it sorts\n   * chronologically so the bounds are plain `<` / `>`, and it crosses a URL or an API\n   * without a serialiser. A `{ year, month }` caller converts with\n   * `` `${year}-${pad(month)}` `` (month 1–12) and back with `key.split(\"-\").map(Number)`.\n   */\n  value: string;\n  /** Called with the picked month as `\"YYYY-MM\"`. */\n  onChange: (month: string) => void;\n  /** Drives the month and year names (`Intl.DateTimeFormat`). Defaults to the\n   *  `<UiKitProvider>` locale, then the runtime's. */\n  locale?: string;\n  /**\n   * Inclusive bounds, as `\"YYYY-MM\"`. A full ISO date (`\"YYYY-MM-DD\"`) is accepted and\n   * read as its month, so a host holding \"the first day we have data for\" can pass it\n   * straight in. Months outside are shown but refuse selection; a year arrow is\n   * disabled once the whole year beyond it is out of bounds.\n   */\n  min?: string;\n  max?: string;\n  /** Embedded top-boundary label, matching the other field-shaped controls. */\n  label?: ReactNode;\n  /** Trigger text when `value` is `\"\"`. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** Intl options for the trigger's text (default: long month + numeric year). */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /**\n   * The month to ring as \"now\", as `\"YYYY-MM\"`. Defaults to the local calendar's\n   * current month; pass one to pin it (a test, a host with its own notion of today).\n   */\n  currentMonth?: string;\n  /** User-facing strings; see {@link MonthPickerLabels}. */\n  labels?: Partial<MonthPickerLabels>;\n  /** Extra classes for the field's root. */\n  className?: string;\n  /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger\n   *  sitting between two icon buttons in a toolbar. */\n  triggerClassName?: string;\n}\n\n// ── Month keys ────────────────────────────────────────────────────────────\n\ninterface YearMonth {\n  year: number;\n  /** 1–12, as in the key. */\n  month: number;\n}\n\nconst KEY = /^(\\d{4})-(\\d{2})/;\n\nfunction parseMonth(key: string | undefined): YearMonth | null {\n  const m = key ? KEY.exec(key) : null;\n  if (!m) return null;\n  const month = Number(m[2]);\n  return month >= 1 && month <= 12 ? { year: Number(m[1]), month } : null;\n}\n\nfunction toKey({ year, month }: YearMonth): string {\n  return `${year}-${pad(month)}`;\n}\n\n/** Move a month key by whole months, carrying into the year. */\nfunction shiftMonth(ym: YearMonth, delta: number): YearMonth {\n  const index = ym.year * 12 + (ym.month - 1) + delta;\n  return { year: Math.floor(index / 12), month: (index % 12) + 1 };\n}\n\n/** A bound, normalised to its month key — so `\"2024-03-15\"` compares as `\"2024-03\"`. */\nfunction boundKey(bound: string | undefined): string | null {\n  const ym = parseMonth(bound);\n  return ym ? toKey(ym) : null;\n}\n\n/** Local-calendar Date for the 1st of a month, for `Intl` to format. */\nfunction firstOf({ year, month }: YearMonth): Date {\n  return new Date(year, month - 1, 1);\n}\n\nconst DEFAULT_TRIGGER_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\nconst MONTH_NAME_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\n\n// ── Trigger ───────────────────────────────────────────────────────────────\n\n/**\n * The field-shaped button that opens the grid. The same shape as `DatePicker`'s\n * trigger, for the same reasons written down there: `role=\"combobox\"` so it may carry\n * `aria-expanded` / `aria-invalid`, a name made of the label AND the value, and focus\n * handed back here when the panel closes with focus still inside it.\n */\nfunction MonthFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  panelId,\n  padded,\n  disabled,\n  invalid,\n  className,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  triggerText: string;\n  hasValue: boolean;\n  labelledBy: string;\n  /** The caller's naming attributes — see `trigger-aria.ts`. */\n  aria: TriggerAria;\n  valueId: string;\n  panelId: string;\n  padded: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  className?: string;\n}) {\n  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  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-invalid={invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined}\n      aria-labelledby={aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy}\n      aria-label={aria[\"aria-label\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        padded && FIELD_FLOATING_PAD,\n        disabled && \"cursor-not-allowed opacity-50\",\n        invalid && FIELD_INVALID,\n        className,\n      )}\n    >\n      {/* The U+00A0 fallback keeps the line box when there is no text — see\n          DatePicker. The value arrives capitalised (see `upperFirst`); this span does\n          NOT use `capitalize`, which upper-cases every WORD — \"Choose A Month\",\n          \"Septiembre De 2026\". */}\n      <span\n        id={valueId}\n        className={cn(\"truncate\", !hasValue && \"text-[var(--text-placeholder)]\")}\n      >\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n// ── Grid ──────────────────────────────────────────────────────────────────\n\nconst COLUMNS = 3;\n\n/**\n * The panel: a year caption between ‹ › arrows, over a 4×3 grid of months.\n *\n * Mounted only while the popover is open, so every opening starts from the current\n * value's year — a value moved from outside (a prev/next-month button beside the\n * field) is where the grid lands, with no effect needed to snap it back.\n *\n * A grid in the APG sense, like `MiniCalendar`: one tab stop (the roving tabindex),\n * the arrows walk the months — left/right by one, up/down by a row of three — and\n * walking off either end of the year MOVES the year rather than stopping. PageUp /\n * PageDown step a whole year. Out-of-bounds months are `aria-disabled`, not\n * `disabled`, so the roving tab stop never falls into a hole.\n */\nfunction MonthGrid({\n  value,\n  onPick,\n  locale,\n  minKey,\n  maxKey,\n  currentKey,\n  labels,\n}: {\n  value: YearMonth | null;\n  onPick: (key: string) => void;\n  locale: string | undefined;\n  minKey: string | null;\n  maxKey: string | null;\n  currentKey: string;\n  labels: MonthPickerLabels;\n}) {\n  const outOfBounds = (key: string) =>\n    Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n\n  // The month holding the tab order, and with it the year on screen — one piece of\n  // state, as in MiniCalendar, so the two cannot disagree. Opens on the value, or on\n  // the current month, pulled inside the bounds.\n  const [active, setActive] = useState<YearMonth>(() => {\n    const start = value ? toKey(value) : currentKey;\n    if (minKey && start < minKey) return parseMonth(minKey)!;\n    if (maxKey && start > maxKey) return parseMonth(maxKey)!;\n    return parseMonth(start)!;\n  });\n  const year = active.year;\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const captionId = `${useId()}-year`;\n\n  // Short names for the cells, long \"Month YYYY\" for their accessible names.\n  const shortNames = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { month: \"short\" });\n    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));\n  }, [locale]);\n  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);\n  const yearCaption = new Intl.DateTimeFormat(locale, { year: \"numeric\" }).format(\n    firstOf({ year, month: 1 }),\n  );\n\n  // A month whose cell must take focus after the next commit. Arrowing across a year\n  // boundary re-labels the same twelve buttons, so the one to focus is a DIFFERENT\n  // button from the one the key landed on.\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const key = pendingFocus.current;\n    if (!key) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-month=\"${key}\"]`)?.focus();\n  });\n\n  // Opened because the user asked to pick a month: land them on it. Runs before the\n  // popover's focus trap (a child's effect fires first), which then keeps this focus.\n  useEffect(() => {\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, []);\n\n  const moveTo = (next: YearMonth, focus: boolean) => {\n    if (focus) pendingFocus.current = toKey(next);\n    setActive(next);\n  };\n\n  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Left and right are VISUAL directions: in a right-to-left page the grid runs the\n    // other way, so \"right\" is the previous month there. Read from the nearest `dir`\n    // up the tree, which for this portalled panel is in practice <html>'s.\n    const rtl = e.currentTarget.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n    const col = (active.month - 1) % COLUMNS;\n    let delta: number;\n    switch (e.key) {\n      case \"ArrowLeft\":\n        delta = rtl ? 1 : -1;\n        break;\n      case \"ArrowRight\":\n        delta = rtl ? -1 : 1;\n        break;\n      case \"ArrowUp\":\n        delta = -COLUMNS;\n        break;\n      case \"ArrowDown\":\n        delta = COLUMNS;\n        break;\n      case \"Home\":\n        delta = -col;\n        break;\n      case \"End\":\n        delta = COLUMNS - 1 - col;\n        break;\n      case \"PageUp\":\n        delta = -12;\n        break;\n      case \"PageDown\":\n        delta = 12;\n        break;\n      default:\n        return;\n    }\n    // Before any no-op check: these keys also scroll the panel, and a month that\n    // cannot move still must not move the page.\n    e.preventDefault();\n    if (delta !== 0) moveTo(shiftMonth(active, delta), true);\n  };\n\n  // An arrow is dead once EVERY month of the year it leads to is out of bounds.\n  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);\n  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);\n  const selectedKey = value ? toKey(value) : null;\n\n  const arrow =\n    \"flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent\";\n\n  return (\n    <div className=\"select-none\">\n      <div className=\"mb-1 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          aria-label={labels.previousYear}\n          disabled={prevBlocked}\n          // Focus stays on the arrow being pressed — only the grid moves.\n          onClick={() => moveTo(shiftMonth(active, -12), false)}\n          className={arrow}\n        >\n          {/* Mirrored in RTL, where \"previous\" points the other way. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n        {/* Names the grid, and `aria-live` so stepping a year says which one you are\n            on — the user pressing the arrow is not inside the grid to hear it change. */}\n        <div\n          id={captionId}\n          aria-live=\"polite\"\n          className=\"text-sm font-semibold tabular-nums text-[var(--text-primary)]\"\n        >\n          {yearCaption}\n        </div>\n        <button\n          type=\"button\"\n          aria-label={labels.nextYear}\n          disabled={nextBlocked}\n          onClick={() => moveTo(shiftMonth(active, 12), false)}\n          className={arrow}\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n      </div>\n      <div ref={gridRef} role=\"grid\" aria-labelledby={captionId} className=\"grid gap-1\">\n        {Array.from({ length: 12 / COLUMNS }, (_, row) => (\n          <div key={row} role=\"row\" className=\"grid grid-cols-3 gap-1\">\n            {Array.from({ length: COLUMNS }, (_, c) => {\n              const ym = { year, month: row * COLUMNS + c + 1 };\n              const key = toKey(ym);\n              const disabled = outOfBounds(key);\n              const selected = key === selectedKey;\n              const current = key === currentKey;\n              return (\n                <button\n                  key={c}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-month={key}\n                  tabIndex={ym.month === active.month ? 0 : -1}\n                  aria-label={labels.month(longName.format(firstOf(ym)))}\n                  aria-selected={selected}\n                  aria-disabled={disabled || undefined}\n                  aria-current={current ? \"date\" : undefined}\n                  onClick={() => {\n                    // The guard `disabled` would have been; see the component note.\n                    if (disabled) return;\n                    setActive(ym);\n                    onPick(key);\n                  }}\n                  onKeyDown={onCellKeyDown}\n                  className={cn(\n                    \"rounded px-2 py-1.5 text-sm capitalize transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    // A --brand ring on a --brand fill exists only in the DOM.\n                    selected && !disabled\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      : selected\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {shortNames[ym.month - 1]}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── Field ─────────────────────────────────────────────────────────────────\n\n/**\n * Month picker: a field showing the selected month (\"August 2026\"), opening a 12-month\n * grid with year arrows. For a value that IS a month — a budget period, a calendar\n * view, a statement — where a day picker would ask for a day nobody means.\n *\n * One component for the two app-local pickers it replaces: keksdose's budget-header\n * popover (grid + year steppers + a floor) and kastlan's calendar header (a month list\n * and a year list in two popovers). The grid does both jobs — the year arrows and\n * PageUp/PageDown cover what the year list did, without a fixed ±5-year window.\n */\n/** Upper-case the first letter only, in `locale`. Several locales (fr, es, it, pt, …)\n *  write month names in lower case, which at the start of a field reads as a typo —\n *  but only the FIRST letter is the field's business: \"septiembre de 2026\" becomes\n *  \"Septiembre de 2026\", not \"Septiembre De 2026\". */\nfunction upperFirst(text: string, locale: string | undefined): string {\n  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);\n}\n\nexport function MonthPicker({\n  value,\n  onChange,\n  locale: localeProp,\n  min,\n  max,\n  label,\n  placeholder,\n  disabled,\n  invalid,\n  formatOptions,\n  currentMonth,\n  labels: labelsProp,\n  className,\n  triggerClassName,\n  ...rest\n}: MonthPickerProps) {\n  const labels = useMonthPickerLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const selected = parseMonth(value);\n  const minKey = boundKey(min);\n  const maxKey = boundKey(max);\n  const currentKey = boundKey(currentMonth) ?? monthKey(new Date());\n\n  const triggerText = selected\n    ? upperFirst(\n        new Intl.DateTimeFormat(locale, formatOptions ?? DEFAULT_TRIGGER_FORMAT).format(\n          firstOf(selected),\n        ),\n        locale,\n      )\n    : (placeholder ?? \"\");\n\n  const id = useId();\n  const [aria, wrapperRest] = splitTriggerAria(rest);\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can double as a name; a ReactNode may hold its own controls.\n  const named = typeof label === \"string\";\n\n  return (\n    <div {...wrapperRest} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,\n          and inside this `relative` root either way. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: labels.panel }}\n        trigger={({ open, toggle, ref }) => (\n          <MonthFieldTrigger\n            open={open}\n            toggle={toggle}\n            triggerRef={ref}\n            triggerText={triggerText}\n            hasValue={selected != null}\n            // As DatePicker: a caller's reference first; an `id` without a label of our\n            // own references the trigger itself, so an external <label htmlFor> names it.\n            labelledBy={[\n              aria[\"aria-labelledby\"],\n              named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n              valueId,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            aria={aria}\n            valueId={valueId}\n            panelId={panelId}\n            padded={label !== undefined}\n            disabled={disabled}\n            invalid={invalid}\n            className={triggerClassName}\n          />\n        )}\n      >\n        {(close) => (\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      </Popover>\n      <Calendar\n        aria-hidden\n        className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}
+{"version":3,"sources":["../../src/components/month-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { Calendar, 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 { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from \"./ui\";\nimport { Popover } from \"./popover\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/**\n * Every string the month picker can speak. The month and year names are NOT here —\n * they come from `Intl` in the `locale` prop, so they are already in the user's\n * language. What is left is the two icon-only year arrows, whose `aria-label` is the\n * only name they have, the panel's name, and a month cell's name.\n */\nexport interface MonthPickerLabels {\n  previousYear: string;\n  nextYear: string;\n  /** The popover's accessible name (`role=\"dialog\"`). */\n  panel: string;\n  /**\n   * Accessible name of one month cell, given that month and its year formatted in\n   * `locale` (\"August 2026\"). The cell's visible text is the short month alone, and\n   * \"Aug\" read out on its own does not say which year the grid is on.\n   */\n  month: (monthYear: string) => string;\n}\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};\n\n/** Merge caller overrides onto the English defaults. */\nfunction useMonthPickerLabels(partial?: Partial<MonthPickerLabels>): MonthPickerLabels {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  return useKitLabels(\"monthPicker\", DEFAULT_MONTH_PICKER_LABELS, partial);\n}\n\n/**\n * `onChange` is omitted from the `<div>` attributes: the DOM event of that name carries\n * a `FormEvent`, and this one answers with a month key. Everything else reaches the\n * field's root, so a test id or a `data-tour` anchor can find it.\n */\nexport interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The selected month as a `\"YYYY-MM\"` key, or `\"\"` for none.\n   *\n   * A string rather than `{ year, month }` or a `Date`, for the reason every date in\n   * this kit is one: it is what `monthKey()` in `lib/dates` produces, it sorts\n   * chronologically so the bounds are plain `<` / `>`, and it crosses a URL or an API\n   * without a serialiser. A `{ year, month }` caller converts with\n   * `` `${year}-${pad(month)}` `` (month 1–12) and back with `key.split(\"-\").map(Number)`.\n   */\n  value: string;\n  /** Called with the picked month as `\"YYYY-MM\"`. */\n  onChange: (month: string) => void;\n  /** Drives the month and year names (`Intl.DateTimeFormat`). Defaults to the\n   *  `<UiKitProvider>` locale, then the runtime's. */\n  locale?: string;\n  /**\n   * Inclusive bounds, as `\"YYYY-MM\"`. A full ISO date (`\"YYYY-MM-DD\"`) is accepted and\n   * read as its month, so a host holding \"the first day we have data for\" can pass it\n   * straight in. Months outside are shown but refuse selection; a year arrow is\n   * disabled once the whole year beyond it is out of bounds.\n   */\n  min?: string;\n  max?: string;\n  /** Embedded top-boundary label, matching the other field-shaped controls. */\n  label?: ReactNode;\n  /** Trigger text when `value` is `\"\"`. */\n  placeholder?: string;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** Intl options for the trigger's text (default: long month + numeric year). */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /**\n   * The month to ring as \"now\", as `\"YYYY-MM\"`. Defaults to the local calendar's\n   * current month; pass one to pin it (a test, a host with its own notion of today).\n   */\n  currentMonth?: string;\n  /** User-facing strings; see {@link MonthPickerLabels}. */\n  labels?: Partial<MonthPickerLabels>;\n  /** Extra classes for the field's root. */\n  className?: string;\n  /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger\n   *  sitting between two icon buttons in a toolbar. */\n  triggerClassName?: string;\n}\n\n// ── Month keys ────────────────────────────────────────────────────────────\n\ninterface YearMonth {\n  year: number;\n  /** 1–12, as in the key. */\n  month: number;\n}\n\nconst KEY = /^(\\d{4})-(\\d{2})/;\n\nfunction parseMonth(key: string | undefined): YearMonth | null {\n  const m = key ? KEY.exec(key) : null;\n  if (!m) return null;\n  const month = Number(m[2]);\n  return month >= 1 && month <= 12 ? { year: Number(m[1]), month } : null;\n}\n\nfunction toKey({ year, month }: YearMonth): string {\n  return `${year}-${pad(month)}`;\n}\n\n/** Move a month key by whole months, carrying into the year. */\nfunction shiftMonth(ym: YearMonth, delta: number): YearMonth {\n  const index = ym.year * 12 + (ym.month - 1) + delta;\n  return { year: Math.floor(index / 12), month: (index % 12) + 1 };\n}\n\n/** A bound, normalised to its month key — so `\"2024-03-15\"` compares as `\"2024-03\"`. */\nfunction boundKey(bound: string | undefined): string | null {\n  const ym = parseMonth(bound);\n  return ym ? toKey(ym) : null;\n}\n\n/** Local-calendar Date for the 1st of a month, for `Intl` to format. */\nfunction firstOf({ year, month }: YearMonth): Date {\n  return new Date(year, month - 1, 1);\n}\n\nconst DEFAULT_TRIGGER_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\nconst MONTH_NAME_FORMAT: Intl.DateTimeFormatOptions = { month: \"long\", year: \"numeric\" };\n\n// ── Trigger ───────────────────────────────────────────────────────────────\n\n/**\n * The field-shaped button that opens the grid. The same shape as `DatePicker`'s\n * trigger, for the same reasons written down there: `role=\"combobox\"` so it may carry\n * `aria-expanded` / `aria-invalid`, a name made of the label AND the value, and focus\n * handed back here when the panel closes with focus still inside it.\n */\nfunction MonthFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  panelId,\n  padded,\n  disabled,\n  invalid,\n  className,\n  aria,\n}: {\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  triggerText: string;\n  hasValue: boolean;\n  labelledBy: string;\n  /** The caller's naming attributes — see `trigger-aria.ts`. */\n  aria: TriggerAria;\n  valueId: string;\n  panelId: string;\n  padded: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  className?: string;\n}) {\n  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  return (\n    <button\n      ref={triggerRef}\n      type=\"button\"\n      disabled={disabled}\n      onClick={toggle}\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-controls={panelId}\n      aria-expanded={open}\n      id={aria.id}\n      aria-invalid={invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined}\n      aria-labelledby={aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy}\n      aria-label={aria[\"aria-label\"]}\n      aria-describedby={aria[\"aria-describedby\"]}\n      className={cn(\n        FIELD_TRIGGER,\n        \"pe-9\",\n        padded && FIELD_FLOATING_PAD,\n        disabled && \"cursor-not-allowed opacity-50\",\n        invalid && FIELD_INVALID,\n        className,\n      )}\n    >\n      {/* The U+00A0 fallback keeps the line box when there is no text — see\n          DatePicker. The value arrives capitalised (see `upperFirst`); this span does\n          NOT use `capitalize`, which upper-cases every WORD — \"Choose A Month\",\n          \"Septiembre De 2026\". */}\n      <span\n        id={valueId}\n        className={cn(\"truncate\", !hasValue && \"text-[var(--text-placeholder)]\")}\n      >\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n// ── Grid ──────────────────────────────────────────────────────────────────\n\nconst COLUMNS = 3;\n\n/**\n * The panel: a year caption between ‹ › arrows, over a 4×3 grid of months.\n *\n * Mounted only while the popover is open, so every opening starts from the current\n * value's year — a value moved from outside (a prev/next-month button beside the\n * field) is where the grid lands, with no effect needed to snap it back.\n *\n * A grid in the APG sense, like `MiniCalendar`: one tab stop (the roving tabindex),\n * the arrows walk the months — left/right by one, up/down by a row of three — and\n * walking off either end of the year MOVES the year rather than stopping. PageUp /\n * PageDown step a whole year. Out-of-bounds months are `aria-disabled`, not\n * `disabled`, so the roving tab stop never falls into a hole.\n */\nfunction MonthGrid({\n  value,\n  onPick,\n  locale,\n  minKey,\n  maxKey,\n  currentKey,\n  labels,\n}: {\n  value: YearMonth | null;\n  onPick: (key: string) => void;\n  locale: string | undefined;\n  minKey: string | null;\n  maxKey: string | null;\n  currentKey: string;\n  labels: MonthPickerLabels;\n}) {\n  const outOfBounds = (key: string) =>\n    Boolean((minKey && key < minKey) || (maxKey && key > maxKey));\n\n  // The month holding the tab order, and with it the year on screen — one piece of\n  // state, as in MiniCalendar, so the two cannot disagree. Opens on the value, or on\n  // the current month, pulled inside the bounds.\n  const [active, setActive] = useState<YearMonth>(() => {\n    const start = value ? toKey(value) : currentKey;\n    if (minKey && start < minKey) return parseMonth(minKey)!;\n    if (maxKey && start > maxKey) return parseMonth(maxKey)!;\n    return parseMonth(start)!;\n  });\n  const year = active.year;\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const captionId = `${useId()}-year`;\n\n  // Short names for the cells, long \"Month YYYY\" for their accessible names.\n  const shortNames = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { month: \"short\" });\n    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2000, i, 1)));\n  }, [locale]);\n  const longName = useMemo(() => new Intl.DateTimeFormat(locale, MONTH_NAME_FORMAT), [locale]);\n  const yearCaption = new Intl.DateTimeFormat(locale, { year: \"numeric\" }).format(\n    firstOf({ year, month: 1 }),\n  );\n\n  // A month whose cell must take focus after the next commit. Arrowing across a year\n  // boundary re-labels the same twelve buttons, so the one to focus is a DIFFERENT\n  // button from the one the key landed on.\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const key = pendingFocus.current;\n    if (!key) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-month=\"${key}\"]`)?.focus();\n  });\n\n  // Opened because the user asked to pick a month: land them on it. Runs before the\n  // popover's focus trap (a child's effect fires first), which then keeps this focus.\n  useEffect(() => {\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, []);\n\n  const moveTo = (next: YearMonth, focus: boolean) => {\n    if (focus) pendingFocus.current = toKey(next);\n    setActive(next);\n  };\n\n  const onCellKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Left and right are VISUAL directions: in a right-to-left page the grid runs the\n    // other way, so \"right\" is the previous month there. The panel is portalled, but\n    // it carries the field's `dir` (see MonthPicker), so the nearest `dir` is right.\n    const step = horizontalStep(e.key, e.currentTarget);\n    const col = (active.month - 1) % COLUMNS;\n    let delta: number;\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        delta = step;\n        break;\n      case \"ArrowUp\":\n        delta = -COLUMNS;\n        break;\n      case \"ArrowDown\":\n        delta = COLUMNS;\n        break;\n      case \"Home\":\n        delta = -col;\n        break;\n      case \"End\":\n        delta = COLUMNS - 1 - col;\n        break;\n      case \"PageUp\":\n        delta = -12;\n        break;\n      case \"PageDown\":\n        delta = 12;\n        break;\n      default:\n        return;\n    }\n    // Before any no-op check: these keys also scroll the panel, and a month that\n    // cannot move still must not move the page.\n    e.preventDefault();\n    if (delta !== 0) moveTo(shiftMonth(active, delta), true);\n  };\n\n  // An arrow is dead once EVERY month of the year it leads to is out of bounds.\n  const prevBlocked = Boolean(minKey && toKey({ year: year - 1, month: 12 }) < minKey);\n  const nextBlocked = Boolean(maxKey && toKey({ year: year + 1, month: 1 }) > maxKey);\n  const selectedKey = value ? toKey(value) : null;\n\n  const arrow =\n    \"flex size-7 items-center justify-center rounded text-[var(--text-muted)] hover:bg-[var(--bg-hover)] disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent\";\n\n  return (\n    <div className=\"select-none\">\n      <div className=\"mb-1 flex items-center justify-between\">\n        <button\n          type=\"button\"\n          aria-label={labels.previousYear}\n          disabled={prevBlocked}\n          // Focus stays on the arrow being pressed — only the grid moves.\n          onClick={() => moveTo(shiftMonth(active, -12), false)}\n          className={arrow}\n        >\n          {/* Mirrored in RTL, where \"previous\" points the other way. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n        {/* Names the grid, and `aria-live` so stepping a year says which one you are\n            on — the user pressing the arrow is not inside the grid to hear it change. */}\n        <div\n          id={captionId}\n          aria-live=\"polite\"\n          className=\"text-sm font-semibold tabular-nums text-[var(--text-primary)]\"\n        >\n          {yearCaption}\n        </div>\n        <button\n          type=\"button\"\n          aria-label={labels.nextYear}\n          disabled={nextBlocked}\n          onClick={() => moveTo(shiftMonth(active, 12), false)}\n          className={arrow}\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" />\n        </button>\n      </div>\n      <div ref={gridRef} role=\"grid\" aria-labelledby={captionId} className=\"grid gap-1\">\n        {Array.from({ length: 12 / COLUMNS }, (_, row) => (\n          <div key={row} role=\"row\" className=\"grid grid-cols-3 gap-1\">\n            {Array.from({ length: COLUMNS }, (_, c) => {\n              const ym = { year, month: row * COLUMNS + c + 1 };\n              const key = toKey(ym);\n              const disabled = outOfBounds(key);\n              const selected = key === selectedKey;\n              const current = key === currentKey;\n              return (\n                <button\n                  key={c}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-month={key}\n                  tabIndex={ym.month === active.month ? 0 : -1}\n                  aria-label={labels.month(longName.format(firstOf(ym)))}\n                  aria-selected={selected}\n                  aria-disabled={disabled || undefined}\n                  aria-current={current ? \"date\" : undefined}\n                  onClick={() => {\n                    // The guard `disabled` would have been; see the component note.\n                    if (disabled) return;\n                    setActive(ym);\n                    onPick(key);\n                  }}\n                  onKeyDown={onCellKeyDown}\n                  className={cn(\n                    \"rounded px-2 py-1.5 text-sm capitalize transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    // A --brand ring on a --brand fill exists only in the DOM.\n                    selected && !disabled\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      : selected\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    current && !selected && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {shortNames[ym.month - 1]}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n// ── Field ─────────────────────────────────────────────────────────────────\n\n/**\n * Month picker: a field showing the selected month (\"August 2026\"), opening a 12-month\n * grid with year arrows. For a value that IS a month — a budget period, a calendar\n * view, a statement — where a day picker would ask for a day nobody means.\n *\n * One component for the two app-local pickers it replaces: keksdose's budget-header\n * popover (grid + year steppers + a floor) and kastlan's calendar header (a month list\n * and a year list in two popovers). The grid does both jobs — the year arrows and\n * PageUp/PageDown cover what the year list did, without a fixed ±5-year window.\n */\n/** Upper-case the first letter only, in `locale`. Several locales (fr, es, it, pt, …)\n *  write month names in lower case, which at the start of a field reads as a typo —\n *  but only the FIRST letter is the field's business: \"septiembre de 2026\" becomes\n *  \"Septiembre de 2026\", not \"Septiembre De 2026\". */\nfunction upperFirst(text: string, locale: string | undefined): string {\n  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);\n}\n\nexport function MonthPicker({\n  value,\n  onChange,\n  locale: localeProp,\n  min,\n  max,\n  label,\n  placeholder,\n  disabled,\n  invalid,\n  formatOptions,\n  currentMonth,\n  labels: labelsProp,\n  className,\n  triggerClassName,\n  ...rest\n}: MonthPickerProps) {\n  const labels = useMonthPickerLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const selected = parseMonth(value);\n  const minKey = boundKey(min);\n  const maxKey = boundKey(max);\n  const currentKey = boundKey(currentMonth) ?? monthKey(new Date());\n\n  const triggerText = selected\n    ? upperFirst(\n        new Intl.DateTimeFormat(locale, formatOptions ?? DEFAULT_TRIGGER_FORMAT).format(\n          firstOf(selected),\n        ),\n        locale,\n      )\n    : (placeholder ?? \"\");\n\n  const id = useId();\n  const [aria, wrapperRest] = splitTriggerAria(rest);\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can double as a name; a ReactNode may hold its own controls.\n  const named = typeof label === \"string\";\n  // The panel is portalled to <body>, out of the subtree whose `dir` it inherited — an\n  // RTL form got an LTR grid. Read when opening (`toggle` is the popover's only way\n  // open) and put back on the panel. Also what the arrow keys above read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n\n  return (\n    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      {/* The hidden twin the trigger is named by — see DateField. `sr-only-fixed`,\n          and inside this `relative` root either way. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      <Popover\n        width={256}\n        panelId={panelId}\n        labels={{ panel: labels.panel }}\n        dir={dir}\n        trigger={({ open, toggle, ref }) => (\n          <MonthFieldTrigger\n            open={open}\n            toggle={() => {\n              setDir(dirOf(rootRef.current));\n              toggle();\n            }}\n            triggerRef={ref}\n            triggerText={triggerText}\n            hasValue={selected != null}\n            // As DatePicker: a caller's reference first; an `id` without a label of our\n            // own references the trigger itself, so an external <label htmlFor> names it.\n            labelledBy={[\n              aria[\"aria-labelledby\"],\n              named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n              valueId,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n            aria={aria}\n            valueId={valueId}\n            panelId={panelId}\n            padded={label !== undefined}\n            disabled={disabled}\n            invalid={invalid}\n            className={triggerClassName}\n          />\n        )}\n      >\n        {(close) => (\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      </Popover>\n      <Calendar\n        aria-hidden\n        className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

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

@@ -109,7 +109,7 @@ function MultiEntityCombobox({
           },
           className: cn(
             FIELD_TRIGGER,
-            "pr-9",
+            "pe-9",
             label !== void 0 && FIELD_FLOATING_PAD,
             disabled && "cursor-not-allowed opacity-50",
             field.isInvalid && FIELD_INVALID
@@ -138,7 +138,7 @@ function MultiEntityCombobox({
                   e.stopPropagation();
                   onChange([]);
                 },
-                className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
                 children: /* @__PURE__ */ jsx(X, { className: "size-4" })
               }
             ) : /* @__PURE__ */ jsx(FieldChevron, {})