@eifi1/ui-kit 0.52.0 → 0.54.0

package/dist/components/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `apply` drafts, a custom\n// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\n/**\n * The 0.x values of DateRangePicker's `commit`, when it was the panel's mode:\n * `\"immediate\"` is `apply` left out, `\"apply\"` is `apply`. See\n * {@link DateRangePickerProps.apply}.\n *\n * @deprecated 0.52 — DateRangePicker's `apply` (`commit=\"apply\"` → `apply`, `\"immediate\"`\n * → nothing); removed in 0.53. `commit` is the write lock's opt-in on every other kit\n * control, and since 0.52 on this one too (refactor audit 2026-10-30, API-3).\n */\nexport type DateRangeCommit = \"immediate\" | \"apply\";\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …).\n   *  `readonly` since 0.52 (API-7): the picker never changes the list. */\n  presets?: readonly DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /**\n   * When the picker hands its range to `onChange`.\n   *\n   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and\n   *    each calendar click is reported as it happens — the half-made `(from, \"\")`\n   *    included. The right shape for quick ranges on a filter, where one click is one\n   *    answer.\n   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n   *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n   *    exist. Cancel, Escape and an outside click discard the draft, and every open\n   *    starts again from the committed value. keksdose's report range asked for exactly\n   *    this: each commit there re-runs a whole page of charts, so an intermediate state\n   *    must never escape the panel.\n   *\n   * `commit=\"apply\"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write\n   * lock's prop on every other kit control. The old spelling still works for 0.52 and\n   * goes in 0.53 ({@link DateRangeCommit}); `apply` wins where both are given.\n   */\n  apply?: boolean;\n  /**\n   * This picker COMMITS — picking a range saves it (a report's period kept per user, a\n   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked\n   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every\n   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with\n   * its own Save stays editable under the lock — leave this off there.\n   *\n   * The strings `\"immediate\"` and `\"apply\"` are the panel's mode, the 0.x meaning of this\n   * prop: deprecated, read as `apply` for one minor, removed in 0.53 — see\n   * {@link DateRangeCommit}. They cannot be taken for a scope, which is a boolean or an\n   * object.\n   */\n  commit?: CommitScope | DateRangeCommit;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `apply`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored without `apply`, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `apply` can keep its draft in state that\n * is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  drafting,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  /** `apply`: the panel works on a draft. */\n  drafting: boolean;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`\n *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    apply,\n    commit,\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    invalid,\n    hint,\n    help,\n    error,\n    className,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  // `commit` is two props until 0.53: a string is the deprecated mode, anything else\n  // the write lock's scope (API-3).\n  const drafting = apply ?? commit === \"apply\";\n  const lock = useLockReason(typeof commit === \"string\" ? undefined : commit, disabledReason);\n  const locked = lock.locked;\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    // A lock's reason between the caption and the error, as on Select.\n    reasonId: locked && lock.reasonId,\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    if (locked) return;\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      locked={locked}\n      // Locked, the caller's classes are the reason's frame's (below).\n      className={locked ? undefined : className}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          drafting={drafting}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {locked ? (\n        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy\n        // for `aria-describedby`; the outermost box, so it takes the caller's classes.\n        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n          {box}\n        </LockedReason>\n      ) : (\n        box\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `apply` drafts, a custom\n// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …).\n   *  `readonly` since 0.52 (API-7): the picker never changes the list. */\n  presets?: readonly DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /**\n   * When the picker hands its range to `onChange`.\n   *\n   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and\n   *    each calendar click is reported as it happens — the half-made `(from, \"\")`\n   *    included. The right shape for quick ranges on a filter, where one click is one\n   *    answer.\n   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n   *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n   *    exist. Cancel, Escape and an outside click discard the draft, and every open\n   *    starts again from the committed value. keksdose's report range asked for exactly\n   *    this: each commit there re-runs a whole page of charts, so an intermediate state\n   *    must never escape the panel.\n   *\n   * `commit=\"apply\"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write\n   * lock's prop on every other kit control. The old spelling went in 0.53.\n   */\n  apply?: boolean;\n  /**\n   * This picker COMMITS — picking a range saves it (a report's period kept per user, a\n   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked\n   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every\n   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with\n   * its own Save stays editable under the lock — leave this off there.\n   *\n   * The strings `\"immediate\"` and `\"apply\"`, the panel's mode in 0.x, went in 0.53\n   * (deprecated in 0.52): `apply` is the mode.\n   */\n  commit?: CommitScope;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `apply`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored without `apply`, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `apply` can keep its draft in state that\n * is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  drafting,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  /** `apply`: the panel works on a draft. */\n  drafting: boolean;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`\n *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    apply,\n    commit,\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    invalid,\n    hint,\n    help,\n    error,\n    className,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  const drafting = apply ?? false;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    // A lock's reason between the caption and the error, as on Select.\n    reasonId: locked && lock.reasonId,\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    if (locked) return;\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      locked={locked}\n      // Locked, the caller's classes are the reason's frame's (below).\n      className={locked ? undefined : className}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          drafting={drafting}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {locked ? (\n        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy\n        // for `aria-describedby`; the outermost box, so it takes the caller's classes.\n        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n          {box}\n        </LockedReason>\n      ) : (\n        box\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":";AAmNU,SA2IN,UA3IM,KAmGJ,YAnGI;AAhNV,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,oBAA2C;AACpD,SAAS,cAAc;AACvB,SAAS,UAAU,cAAc,kBAAkB,qBAAqB;AAExE,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,qBAA8C;AA+IvD,SAAS,aACP,SACA,MACA,IACA,UACA,YACQ;AACR,QAAM,UAAU,CAAC,MAA6B,EAAE,SAAS,QAAQ,EAAE,OAAO;AAC1E,MAAI,YAAY,MAAM;AACpB,UAAM,OAAO,QAAQ,UAAU,CAAC,MAAM,EAAE,OAAO,YAAY,QAAQ,CAAC,CAAC;AACrE,QAAI,SAAS,MAAM,WAAY,QAAO;AAAA,EACxC,WAAW,YAAY;AACrB,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,UAAU,OAAO;AAClC;AAOA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAW,QAAQ,6BAA6B;AAAA,QAE/C,kBAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,gBAAM,WAAW,MAAM;AACvB,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,gBAAc;AAAA,cACd,eAAa,EAAE;AAAA,cACf,SAAS,MAAM,OAAO,CAAC;AAAA,cACvB,WAAW;AAAA,gBACT;AAAA;AAAA,gBAEA,QAAQ,0BAA0B;AAAA,gBAClC,WAAW,uCAAuC;AAAA,cACpD;AAAA,cAEC,YAAE;AAAA;AAAA,YAZE,EAAE,MAAM;AAAA,UAaf;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA;AAEJ;AAQA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAgBG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,UAAU,YAAY;AAAA,EACxB,CAAC;AAED,QAAM,QAAQ,WAAW,QAAQ,EAAE,MAAM,IAAI,UAAU,YAAY,OAAU;AAC7E,QAAM,SAAS,UACX,aAAa,SAAS,MAAM,MAAM,MAAM,IAAI,WAAW,MAAM,WAAW,UAAU,YAAY,UAAU,IACxG;AACJ,QAAM,WAAW,QAAQ,MAAM,QAAQ,MAAM,EAAE;AAE/C,QAAM,UACJ,YAAY,qBACR,mBAAmB,EAAE,MAAM,MAAM,MAAM,IAAI,MAAM,IAAI,QAAQ,UAAU,MAAM,EAAE,CAAC,IAChF;AAEN,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,MAAM,MAAM;AAAA,MACZ,IAAI,MAAM;AAAA,MACV,UAAU,CAAC,GAAG,MAAM;AAClB,YAAI,UAAU;AACZ,mBAAS,EAAE,MAAM,GAAG,IAAI,GAAG,UAAU,OAAU,CAAC;AAChD;AAAA,QACF;AACA,oBAAY,GAAG,GAAG,MAAS;AAE3B,YAAI,KAAK,EAAG,OAAM;AAAA,MACpB;AAAA;AAAA,EACF;AAOF,QAAM,WACJ,YAAY,qBACV,qBAAC,SAAI,WAAU,uBACZ;AAAA,eAAW,QACV,oBAAC,SAAI,aAAU,UAAS,sBAAmB,IAAG,WAAU,sBACrD,mBACH;AAAA,IAED;AAAA,KACH,IAEA;AAGJ,QAAM,OACJ,WAAW,QAAQ,SAAS,IAC1B,qBAAC,SAAI,WAAW,QAAQ,wBAAwB,cAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,OAAO;AAAA,QACd,QAAQ,CAAC,MAAM;AACb,cAAI,UAAU;AACZ,qBAAS,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,IAAI,UAAU,EAAE,GAAG,CAAC;AACnD;AAAA,UACF;AACA,sBAAY,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;AAC9B,gBAAM;AAAA,QACR;AAAA;AAAA,IACF;AAAA,IAGA,oBAAC,SAAI,WAAU,kBAAkB,oBAAS;AAAA,KAC5C,IAEA;AAGJ,MAAI,CAAC,SAAU,QAAO,MAAM,IAAI;AAChC,SAAO;AAAA,IACL;AAAA,IACA,iCAGE;AAAA,0BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAW,QAAQ,WAAW,QAAW,SAAS,OACrF,iBAAO,QACV;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,QAAQ,WAAW;AAAA,UAG9B,UAAU,CAAC;AAAA,UACX,SAAS,MAAM;AACb,gBAAI,CAAC,SAAU;AACf,wBAAY,MAAM,MAAM,MAAM,IAAI,MAAM,QAAQ;AAChD,kBAAM;AAAA,UACR;AAAA,UAEC,iBAAO;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EACF;AACF;AAKO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,oBAAoB,YAAY,QAAW,MAAS;AACjE,QAAM,SAAS,iBAAiB,mBAAmB,QAAQ,eAAe,WAAW;AACrF,QAAM,WAAW,SAAS;AAC1B,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AACpB,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,MAAM,SAAS,KAAK,YAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,aAAa,KAAK,kBAAkB;AAAA,IACpC,aAAa,KAAK,cAAc;AAAA;AAAA,IAEhC,UAAU,UAAU,KAAK;AAAA,EAC3B,CAAC;AAGD,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AACxE,QAAM,aAAa,WAAW;AAC9B,QAAM,WAAW,aAAa,SAAS;AACvC,QAAM,IAAI,OAAO,OAAO,IAAI,IAAI;AAChC,QAAM,IAAI,KAAK,OAAO,EAAE,IAAI;AAC5B,QAAM,cAAc,OAAQ,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,WAAQ,eAAe;AACjG,QAAM,aAAa,QAAQ,WAAW,QAAQ,SAAS,CAAC;AACxD,QAAM,QAAQ,eAAe;AAC7B,QAAM,cAAc,CAAC,GAAW,GAAW,aAAiC;AAC1E,QAAI,OAAQ;AACZ,iBAAa,QAAQ;AAGrB,QAAI,aAAa,OAAW,UAAS,GAAG,CAAC;AAAA,QACpC,UAAS,GAAG,GAAG,QAAQ;AAAA,EAC9B;AACA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,oBAAkB,SAAS;AAAA,MAC3B;AAAA,MACA,WAAW,SAAS;AAAA,MACpB;AAAA,MACA,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB;AAAA,MACA;AAAA,MAEA,WAAW,SAAS,SAAY;AAAA,MAChC,SAAS,SAAS;AAAA,MAElB,OAAO,aAAa,YAAY;AAAA,MAChC,UAAU,QAAQ,QAAQ,EAAE;AAAA,MAC5B;AAAA,MACA,SAAS,MAAM,YAAY,IAAI,IAAI,MAAS;AAAA,MAC5C;AAAA,MACA;AAAA,MACA,eACE,kBACC,CAAC,cAAc,YACd,cAAc;AAAA,QACZ;AAAA,QACA,YAAY,EAAE,IAAI,QAAQ;AAAA,QAC1B,MAAM,aAAa,eAAe;AAAA,QAClC;AAAA,QACA;AAAA,QACA,QAAQ,UAAU,aAAa,SAAS,MAAM,IAAI,UAAU,UAAU,CAAC;AAAA,QACvE,MAAM;AAAA,MACR,CAAC;AAAA,MAGJ,WAAC,OAAO,UACP;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAe,EAAE,QAAQ,KAAK,KAAK,QAAQ,gBAAgB,UAAU;AAAA,UACrE,QAAQ;AAAA,UACR;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEF,QAAM,MAAM,YAAY,OAAO,UAAU,SAAY,SAAS,YAAY,MAAS;AACnF,SACE,oBAAC,YAAS,OAAO,SAAS,OAAO,SAAS,WAAW,SAAS,UAAU,OACrE;AAAA;AAAA;AAAA,IAGC,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAW,GAAG,SAAS,SAAS,GACvF,eACH;AAAA,MAEA,KAEJ;AAEJ;","names":[]}

package/dist/components/dialog-frame.d.ts

@@ -15,7 +15,9 @@ export { DEFAULT_DIALOG_FRAME_LABELS };
  * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`
  * (round 0.35 R4): the panel, the `role="dialog"` element the frame's header, body and
  * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that
- * `actions` and `headerActions` receive, since both are the `Modal`'s own close.
+ * `actions` and `headerActions` receive, since both are the `Modal`'s own close. And
+ * `held` (keksdose audit follow-up, 2026-11-01), which holds the same and shows the X
+ * disabled — see {@link ModalProps.held}.
  */
 export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
     /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */

package/dist/components/dialog-frame.js

@@ -52,7 +52,7 @@ function DialogFrame({
                 ] }),
                 headerActions !== void 0 && headerActions !== null && headerActions !== false && /* @__PURE__ */ jsx(FrameHeaderActions, { actions: headerActions, onClose: modal.onClose })
               ] }),
-              closeButton && /* @__PURE__ */ jsx(FrameClose, { label: closeLabel, onClose: modal.onClose })
+              closeButton && /* @__PURE__ */ jsx(FrameClose, { label: closeLabel, onClose: modal.onClose, held: modal.held })
             ]
           }
         ),
@@ -74,7 +74,7 @@ function DialogFrame({
     }
   );
 }
-function FrameClose({ label, onClose }) {
+function FrameClose({ label, onClose, held = false }) {
   const close = useContext(ModalCloseContext) ?? onClose;
   const labels = useKitLabels(
     "dialogFrame",
@@ -86,9 +86,13 @@ function FrameClose({ label, onClose }) {
     {
       type: "button",
       onClick: close,
+      disabled: held,
       "aria-label": labels.close,
       className: cn(
         "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
+        // The kit's disabled look (Button, IconButton), and the resting look pinned under
+        // `disabled:hover:` so a refused X does not light up under the pointer.
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted",
         FOCUS_RING
       ),
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })

package/dist/components/dialog-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_DIALOG_FRAME_LABELS } from \"./dialog-frame-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\n// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DIALOG_FRAME_LABELS };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`\n * (round 0.35 R4): the panel, the `role=\"dialog\"` element the frame's header, body and\n * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that\n * `actions` and `headerActions` receive, since both are the `Modal`'s own close.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={\n        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined\n      }\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-subtle\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-primary\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\n    \"dialogFrame\",\n    DEFAULT_DIALOG_FRAME_LABELS,\n    label === undefined ? undefined : { close: label },\n  );\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className={cn(\n        \"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary\",\n        FOCUS_RING,\n      )}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-subtle\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_DIALOG_FRAME_LABELS } from \"./dialog-frame-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\n// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DIALOG_FRAME_LABELS };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`\n * (round 0.35 R4): the panel, the `role=\"dialog\"` element the frame's header, body and\n * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that\n * `actions` and `headerActions` receive, since both are the `Modal`'s own close. And\n * `held` (keksdose audit follow-up, 2026-11-01), which holds the same and shows the X\n * disabled — see {@link ModalProps.held}.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={\n        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined\n      }\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-subtle\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-primary\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-muted\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} held={modal.held} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). Disabled\n *  while `held`; under `busy` it stays enabled and the `Modal` drops its press (see\n *  {@link ModalProps.held} for why the two differ). */\nfunction FrameClose({ label, onClose, held = false }: { label?: string; onClose: () => void; held?: boolean }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\n    \"dialogFrame\",\n    DEFAULT_DIALOG_FRAME_LABELS,\n    label === undefined ? undefined : { close: label },\n  );\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      disabled={held}\n      aria-label={labels.close}\n      className={cn(\n        \"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary\",\n        // The kit's disabled look (Button, IconButton), and the resting look pinned under\n        // `disabled:hover:` so a refused X does not light up under the pointer.\n        \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted\",\n        FOCUS_RING,\n      )}\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-subtle\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/mini-calendar.js

@@ -9,6 +9,7 @@ import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
 import { horizontalStep } from "../lib/direction.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
+import { dateFormatter } from "../lib/intl-cache.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
 import { DEFAULT_MINI_CALENDAR_LABELS } from "./mini-calendar-labels.js";
 const DAY_NAME_FORMAT = {
@@ -103,8 +104,8 @@ function MiniCalendar({
   }
   const weeks = [];
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
-  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" }), locale);
-  const formatDay = (d) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
+  const monthLabel = upperFirst(dateFormatter(locale, { month: "long", year: "numeric" }).format(firstOfMonth), locale);
+  const formatDay = (d) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);
   const weekdayLabels = useMemo(() => {
     const ref = new Date(2024, 0, 7 + weekStart);
     return Array.from({ length: 7 }, (_, i) => {

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 { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { upperFirst } from \"../lib/text-case\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_MINI_CALENDAR_LABELS } from \"./mini-calendar-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// Defined in ./mini-calendar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_MINI_CALENDAR_LABELS };\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<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** The selection's start as \"YYYY-MM-DD\"; `\"\"` (the default) for none. */\n  from?: string;\n  /** The selection's end; `\"\"` (the default) for none. */\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?: LabelOverride<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  /**\n   * `\"sm\"` (default) is the compact picker: 32px round days, the size the date\n   * pickers and the data-table filter draw. `\"lg\"` is a MONTH VIEW for a page — tall\n   * cells in a ruled grid, the day number in the top corner and {@link renderDay}'s\n   * content under it — the calendar a planner page hand-built before this existed.\n   * Both are the same grid underneath: the same roles, roving tabindex, keys, RTL\n   * mirroring and week start.\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * Custom content for one day: events, an amount, a dot. Called for every day of the\n   * month on show; return `null` for none.\n   *\n   * ⚠️ **It renders INSIDE the day's button** — a dot under the number at `\"sm\"`, a\n   * column under it at `\"lg\"` — so it must not be interactive: no links, no buttons,\n   * no inputs. A control inside a control is invalid HTML, and a screen reader lands\n   * on the day and never reaches what is inside it. Events that are themselves\n   * clickable are shown here as plain text, and the DAY is what is clicked: pass\n   * `mode=\"single\"` and let `onSelect` open a day panel (a drawer, a popover) that\n   * lists that day's events as real links.\n   *\n   * The day's accessible name stays the full date; this content is attached to it as\n   * its DESCRIPTION (`aria-describedby`), so \"Monday, 14 September 2026\" is read\n   * first and \"Rent due · Plumber\" after it. Anything decorative (a coloured dot)\n   * should be `aria-hidden` or carry an `sr-only` word for what it means.\n   */\n  renderDay?: (day: Date, state: MiniCalendarDayState) => ReactNode;\n  /**\n   * The month on show, as \"YYYY-MM\". FOLLOWED rather than controlled, exactly like\n   * `from`/`to`: when it changes the grid moves there, and in between the user pages\n   * freely — every move to another month is reported through {@link onMonthChange}.\n   * For a month page whose own header (a month picker, a Today button) drives the\n   * calendar. Left out, the grid opens on the selection or today.\n   */\n  month?: string;\n  /** Called with \"YYYY-MM\" whenever the USER moves the grid to another month (the\n   *  arrows, PageUp/PageDown, arrowing off the edge). */\n  onMonthChange?: (month: string) => void;\n  /**\n   * Hide the built-in previous/next arrows and month caption, for a page that draws\n   * its own. The caption is kept for assistive technology (visually hidden), because\n   * it is what names the grid.\n   */\n  hideNavigation?: boolean;\n  /**\n   * Fill the leading and trailing cells with the neighbouring months' days, muted —\n   * the wall-calendar look, where the first row does not start on a hole.\n   *\n   * They are real days, not decoration: each is named with its whole date, honours\n   * `min`/`max`, and a click selects it and moves the grid to its month (focus goes\n   * with it). They are NOT stops of the roving tabindex — the keyboard already reaches\n   * them by arrowing off the month's edge, which moves the grid the same way — and\n   * `renderDay` is not called for them, so a day's events are drawn once, in its own\n   * month. Default `false`: the cells stay empty.\n   */\n  showOutsideDays?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\n/** What {@link MiniCalendarProps.renderDay} is told about the day it draws. */\nexport interface MiniCalendarDayState {\n  /** The day as \"YYYY-MM-DD\". */\n  iso: string;\n  /** The day number as drawn, in the calendar's locale. */\n  label: string;\n  today: boolean;\n  /** Outside `min`/`max`. */\n  disabled: boolean;\n  /** Part of the selection — an end or a day between. */\n  selected: boolean;\n  rangeStart: boolean;\n  rangeEnd: boolean;\n  /** Strictly between the two ends of a range. */\n  inRange: boolean;\n  /** The day that holds the tab stop. */\n  active: boolean;\n  size: \"sm\" | \"lg\";\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\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 without rolling over (see {@link addMonthsClamped}). */\nconst stepMonths = addMonthsClamped;\n\n/** A month-view cell: tall enough for two or three event lines, shorter on a phone. */\nconst LG_CELL_HEIGHT = \"min-h-16 md:min-h-24\";\n\n/** The 1st of a \"YYYY-MM\" month, or null when absent or malformed. */\nconst monthStart = (key: string | undefined) => (key ? parseIsoDate(`${key}-01`) : null);\n\n/** `day`'s day of the month in `first`'s month, clamped to that month's length. */\nfunction sameDayIn(first: Date, day: Date): Date {\n  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();\n  return new Date(first.getFullYear(), first.getMonth(), Math.min(day.getDate(), last));\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  size = \"sm\",\n  renderDay,\n  month,\n  onMonthChange,\n  hideNavigation,\n  showOutsideDays = false,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const lg = size === \"lg\";\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    let start = fromDate ?? toDate ?? new Date();\n    // A `month` wins over the selection's month: the page asked for THAT month. The\n    // selection (or today) is kept when it falls inside it, else the 1st.\n    const first = monthStart(month);\n    if (first && monthKey(start) !== month) start = first;\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  // …and the caller's month, the same way. Only a CHANGE moves the grid, so paging\n  // with the arrows is not snapped back by a parent that ignores `onMonthChange`.\n  const [lastMonth, setLastMonth] = useState(month);\n  if (lastMonth !== month) {\n    setLastMonth(month);\n    const first = monthStart(month);\n    const current = parseIsoDate(activeIso) ?? new Date();\n    if (first && monthKey(current) !== month) {\n      // Keep the day of the month, clamped: the 31st in a 30-day month is the 30th.\n      setActiveIso(toLocalIso(sameDayIn(first, current)));\n    }\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  // or the previous month's last days, with `showOutsideDays` (and the next month's\n  // first ones at the end). `new Date(y, m, 0)` is the day before the 1st, so the\n  // offsets below roll into the neighbouring month by themselves.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month, i - startWeekday + 1) : null);\n  }\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  for (let extra = 1; cells.length % 7 !== 0; extra++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month + 1, extra) : null);\n  }\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish\n  // read \"Septiembre De 2026\" and Hungarian \"2026. Szeptember\" (refactor audit\n  // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.\n  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" }), locale);\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        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\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    const key = monthKey(d);\n    if (key !== monthKey(activeDate)) onMonthChange?.(key);\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      {hideNavigation ? (\n        // Still in the tree: the caption is what names the grid.\n        <div id={monthId} className=\"sr-only-fixed\">\n          {monthLabel}\n        </div>\n      ) : (\n        <div className={cn(\"flex items-center justify-between\", lg ? \"pb-2\" : \"pb-1\")}>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(-1)}\n            aria-label={labels.previousMonth}\n            className=\"rounded p-1 text-muted hover: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={lg ? \"text-base font-semibold text-primary\" : \"text-xs font-medium 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-muted hover:bg-hover\"\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n        </div>\n      )}\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className={cn(\n          \"grid\",\n          // The month view is RULED: a 1px gap over a border-coloured ground draws the\n          // lines between the cells, the way a wall calendar does.\n          lg ? \"gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]\" : \"gap-y-0.5\",\n        )}\n      >\n        <div\n          role=\"row\"\n          className={cn(\n            \"grid grid-cols-7 text-center font-medium\",\n            lg ? \"gap-px text-xs text-muted\" : \"text-micro uppercase text-placeholder\",\n          )}\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className={lg ? \"bg-surface py-2\" : \"py-0.5\"}>\n              {lg ? w.short : 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={cn(\"grid grid-cols-7\", lg && \"gap-px\")}>\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) {\n                return <div key={di} role=\"gridcell\" className={lg ? cn(LG_CELL_HEIGHT, \"bg-surface-2\") : \"h-8\"} />;\n              }\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              // A neighbouring month's day (`showOutsideDays`): a muted, selectable\n              // cell outside the tab order — see the prop.\n              if (d.getMonth() !== view.month) {\n                return (\n                  <div\n                    key={di}\n                    role=\"none\"\n                    className={cn(\n                      \"relative flex\",\n                      lg ? cn(\"min-w-0\", LG_CELL_HEIGHT) : \"h-8 items-center justify-center\",\n                    )}\n                  >\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-iso={iso}\n                      data-outside=\"\"\n                      tabIndex={-1}\n                      aria-label={labels.day(formatDay(d))}\n                      aria-selected={!disabled && inRange(d)}\n                      aria-disabled={disabled || undefined}\n                      onClick={() => {\n                        if (disabled) return;\n                        // Focus follows into the month the click moves the grid to:\n                        // this button is gone after the next commit.\n                        pendingFocus.current = iso;\n                        handleClick(d);\n                      }}\n                      onKeyDown={onDayKeyDown}\n                      className={cn(\n                        \"text-xs tabular-nums text-placeholder transition-colors\",\n                        FOCUS_RING,\n                        \"focus-visible:ring-inset\",\n                        disabled ? \"cursor-not-allowed opacity-60\" : \"hover:bg-hover\",\n                        lg\n                          ? cn(\"flex w-full min-w-0 items-start bg-surface-2 p-1.5\", LG_CELL_HEIGHT)\n                          : \"size-8 rounded-full\",\n                      )}\n                    >\n                      {lg ? (\n                        <span className=\"inline-flex size-6 items-center justify-center\">\n                          {dayNumber.format(d.getDate())}\n                        </span>\n                      ) : (\n                        dayNumber.format(d.getDate())\n                      )}\n                    </button>\n                  </div>\n                );\n              }\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              const isSelected = Boolean(isStart || isEnd || isInRange);\n              const label = dayNumber.format(d.getDate());\n              const content = renderDay?.(d, {\n                iso,\n                label,\n                today: isToday,\n                disabled,\n                selected: isSelected,\n                rangeStart: Boolean(isStart),\n                rangeEnd: Boolean(isEnd),\n                inRange: isInRange,\n                active: isActive,\n                size,\n              });\n              const filled = hasContent(content);\n              const contentId = `${id}-day-${iso}`;\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. The month view tints whole cells\n              // instead, so it has no band.\n              const banded = !lg && 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-brand-soft\",\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\n                  key={di}\n                  role=\"none\"\n                  className={cn(\"relative flex\", lg ? \"min-w-0\" : \"h-8 items-center justify-center\")}\n                >\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                    // The custom content is the day's DESCRIPTION: `aria-label` replaces\n                    // the button's text as its name, so without this link a screen\n                    // reader would hear the date and never the events drawn under it.\n                    aria-describedby={filled ? contentId : undefined}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                    aria-current={isToday ? \"date\" : undefined}\n                    onClick={() => handleClick(d)}\n                    onKeyDown={onDayKeyDown}\n                    className={\n                      lg\n                        ? cn(\n                            \"flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors\",\n                            LG_CELL_HEIGHT,\n                            FOCUS_RING,\n                            \"focus-visible:ring-inset\",\n                            disabled\n                              ? \"cursor-not-allowed bg-surface text-placeholder\"\n                              : isSelected\n                                ? \"bg-brand-soft text-primary hover:bg-brand-soft-hover\"\n                                : \"bg-surface text-primary hover:bg-hover\",\n                          )\n                        : 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_RING_WIDTH,\n                            \"focus-visible:outline-none focus-visible:ring-inset\",\n                            isStart || isEnd ? \"focus-visible:ring-brand-contrast\" : \"focus-visible:ring-brand\",\n                            disabled\n                              ? \"cursor-not-allowed 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-brand text-brand-contrast hover:bg-brand-hover\"\n                                : isInRange\n                                  ? \"font-medium text-brand-muted hover:bg-brand-soft-hover\"\n                                  : \"text-primary hover:bg-hover\",\n                            isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-strong\",\n                          )\n                    }\n                  >\n                    {lg ? (\n                      <>\n                        <span\n                          className={cn(\n                            \"inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums\",\n                            isStart || isEnd\n                              ? \"bg-brand font-semibold text-brand-contrast\"\n                              : isToday && !disabled\n                                ? \"font-semibold text-brand ring-1 ring-inset ring-brand\"\n                                : isInRange && \"font-medium text-brand-muted\",\n                          )}\n                        >\n                          {label}\n                        </span>\n                        {filled && (\n                          <span id={contentId} className=\"flex min-w-0 flex-col gap-0.5\">\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        {label}\n                        {/* Under the number, inside the circle: room for a dot or two. */}\n                        {filled && (\n                          <span\n                            id={contentId}\n                            className=\"pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none\"\n                          >\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    )}\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 { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { upperFirst } from \"../lib/text-case\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { dateFormatter } from \"../lib/intl-cache\";\nimport { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_MINI_CALENDAR_LABELS } from \"./mini-calendar-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// Defined in ./mini-calendar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_MINI_CALENDAR_LABELS };\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<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** The selection's start as \"YYYY-MM-DD\"; `\"\"` (the default) for none. */\n  from?: string;\n  /** The selection's end; `\"\"` (the default) for none. */\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?: LabelOverride<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  /**\n   * `\"sm\"` (default) is the compact picker: 32px round days, the size the date\n   * pickers and the data-table filter draw. `\"lg\"` is a MONTH VIEW for a page — tall\n   * cells in a ruled grid, the day number in the top corner and {@link renderDay}'s\n   * content under it — the calendar a planner page hand-built before this existed.\n   * Both are the same grid underneath: the same roles, roving tabindex, keys, RTL\n   * mirroring and week start.\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * Custom content for one day: events, an amount, a dot. Called for every day of the\n   * month on show; return `null` for none.\n   *\n   * ⚠️ **It renders INSIDE the day's button** — a dot under the number at `\"sm\"`, a\n   * column under it at `\"lg\"` — so it must not be interactive: no links, no buttons,\n   * no inputs. A control inside a control is invalid HTML, and a screen reader lands\n   * on the day and never reaches what is inside it. Events that are themselves\n   * clickable are shown here as plain text, and the DAY is what is clicked: pass\n   * `mode=\"single\"` and let `onSelect` open a day panel (a drawer, a popover) that\n   * lists that day's events as real links.\n   *\n   * The day's accessible name stays the full date; this content is attached to it as\n   * its DESCRIPTION (`aria-describedby`), so \"Monday, 14 September 2026\" is read\n   * first and \"Rent due · Plumber\" after it. Anything decorative (a coloured dot)\n   * should be `aria-hidden` or carry an `sr-only` word for what it means.\n   */\n  renderDay?: (day: Date, state: MiniCalendarDayState) => ReactNode;\n  /**\n   * The month on show, as \"YYYY-MM\". FOLLOWED rather than controlled, exactly like\n   * `from`/`to`: when it changes the grid moves there, and in between the user pages\n   * freely — every move to another month is reported through {@link onMonthChange}.\n   * For a month page whose own header (a month picker, a Today button) drives the\n   * calendar. Left out, the grid opens on the selection or today.\n   */\n  month?: string;\n  /** Called with \"YYYY-MM\" whenever the USER moves the grid to another month (the\n   *  arrows, PageUp/PageDown, arrowing off the edge). */\n  onMonthChange?: (month: string) => void;\n  /**\n   * Hide the built-in previous/next arrows and month caption, for a page that draws\n   * its own. The caption is kept for assistive technology (visually hidden), because\n   * it is what names the grid.\n   */\n  hideNavigation?: boolean;\n  /**\n   * Fill the leading and trailing cells with the neighbouring months' days, muted —\n   * the wall-calendar look, where the first row does not start on a hole.\n   *\n   * They are real days, not decoration: each is named with its whole date, honours\n   * `min`/`max`, and a click selects it and moves the grid to its month (focus goes\n   * with it). They are NOT stops of the roving tabindex — the keyboard already reaches\n   * them by arrowing off the month's edge, which moves the grid the same way — and\n   * `renderDay` is not called for them, so a day's events are drawn once, in its own\n   * month. Default `false`: the cells stay empty.\n   */\n  showOutsideDays?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\n/** What {@link MiniCalendarProps.renderDay} is told about the day it draws. */\nexport interface MiniCalendarDayState {\n  /** The day as \"YYYY-MM-DD\". */\n  iso: string;\n  /** The day number as drawn, in the calendar's locale. */\n  label: string;\n  today: boolean;\n  /** Outside `min`/`max`. */\n  disabled: boolean;\n  /** Part of the selection — an end or a day between. */\n  selected: boolean;\n  rangeStart: boolean;\n  rangeEnd: boolean;\n  /** Strictly between the two ends of a range. */\n  inRange: boolean;\n  /** The day that holds the tab stop. */\n  active: boolean;\n  size: \"sm\" | \"lg\";\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\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 without rolling over (see {@link addMonthsClamped}). */\nconst stepMonths = addMonthsClamped;\n\n/** A month-view cell: tall enough for two or three event lines, shorter on a phone. */\nconst LG_CELL_HEIGHT = \"min-h-16 md:min-h-24\";\n\n/** The 1st of a \"YYYY-MM\" month, or null when absent or malformed. */\nconst monthStart = (key: string | undefined) => (key ? parseIsoDate(`${key}-01`) : null);\n\n/** `day`'s day of the month in `first`'s month, clamped to that month's length. */\nfunction sameDayIn(first: Date, day: Date): Date {\n  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();\n  return new Date(first.getFullYear(), first.getMonth(), Math.min(day.getDate(), last));\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  size = \"sm\",\n  renderDay,\n  month,\n  onMonthChange,\n  hideNavigation,\n  showOutsideDays = false,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const lg = size === \"lg\";\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    let start = fromDate ?? toDate ?? new Date();\n    // A `month` wins over the selection's month: the page asked for THAT month. The\n    // selection (or today) is kept when it falls inside it, else the 1st.\n    const first = monthStart(month);\n    if (first && monthKey(start) !== month) start = first;\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  // …and the caller's month, the same way. Only a CHANGE moves the grid, so paging\n  // with the arrows is not snapped back by a parent that ignores `onMonthChange`.\n  const [lastMonth, setLastMonth] = useState(month);\n  if (lastMonth !== month) {\n    setLastMonth(month);\n    const first = monthStart(month);\n    const current = parseIsoDate(activeIso) ?? new Date();\n    if (first && monthKey(current) !== month) {\n      // Keep the day of the month, clamped: the 31st in a 30-day month is the 30th.\n      setActiveIso(toLocalIso(sameDayIn(first, current)));\n    }\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  // or the previous month's last days, with `showOutsideDays` (and the next month's\n  // first ones at the end). `new Date(y, m, 0)` is the day before the 1st, so the\n  // offsets below roll into the neighbouring month by themselves.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month, i - startWeekday + 1) : null);\n  }\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  for (let extra = 1; cells.length % 7 !== 0; extra++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month + 1, extra) : null);\n  }\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish\n  // read \"Septiembre De 2026\" and Hungarian \"2026. Szeptember\" (refactor audit\n  // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.\n  // Both through the kit's formatter cache: every day cell names its date, which was a\n  // formatter per cell and render (keksdose audit follow-up, 2026-11-01).\n  const monthLabel = upperFirst(dateFormatter(locale, { month: \"long\", year: \"numeric\" }).format(firstOfMonth), locale);\n  const formatDay = (d: Date) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);\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        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\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    const key = monthKey(d);\n    if (key !== monthKey(activeDate)) onMonthChange?.(key);\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      {hideNavigation ? (\n        // Still in the tree: the caption is what names the grid.\n        <div id={monthId} className=\"sr-only-fixed\">\n          {monthLabel}\n        </div>\n      ) : (\n        <div className={cn(\"flex items-center justify-between\", lg ? \"pb-2\" : \"pb-1\")}>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(-1)}\n            aria-label={labels.previousMonth}\n            className=\"rounded p-1 text-muted hover: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={lg ? \"text-base font-semibold text-primary\" : \"text-xs font-medium 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-muted hover:bg-hover\"\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n        </div>\n      )}\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className={cn(\n          \"grid\",\n          // The month view is RULED: a 1px gap over a border-coloured ground draws the\n          // lines between the cells, the way a wall calendar does.\n          lg ? \"gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]\" : \"gap-y-0.5\",\n        )}\n      >\n        <div\n          role=\"row\"\n          className={cn(\n            \"grid grid-cols-7 text-center font-medium\",\n            lg ? \"gap-px text-xs text-muted\" : \"text-micro uppercase text-placeholder\",\n          )}\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className={lg ? \"bg-surface py-2\" : \"py-0.5\"}>\n              {lg ? w.short : 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={cn(\"grid grid-cols-7\", lg && \"gap-px\")}>\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) {\n                return <div key={di} role=\"gridcell\" className={lg ? cn(LG_CELL_HEIGHT, \"bg-surface-2\") : \"h-8\"} />;\n              }\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              // A neighbouring month's day (`showOutsideDays`): a muted, selectable\n              // cell outside the tab order — see the prop.\n              if (d.getMonth() !== view.month) {\n                return (\n                  <div\n                    key={di}\n                    role=\"none\"\n                    className={cn(\n                      \"relative flex\",\n                      lg ? cn(\"min-w-0\", LG_CELL_HEIGHT) : \"h-8 items-center justify-center\",\n                    )}\n                  >\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-iso={iso}\n                      data-outside=\"\"\n                      tabIndex={-1}\n                      aria-label={labels.day(formatDay(d))}\n                      aria-selected={!disabled && inRange(d)}\n                      aria-disabled={disabled || undefined}\n                      onClick={() => {\n                        if (disabled) return;\n                        // Focus follows into the month the click moves the grid to:\n                        // this button is gone after the next commit.\n                        pendingFocus.current = iso;\n                        handleClick(d);\n                      }}\n                      onKeyDown={onDayKeyDown}\n                      className={cn(\n                        \"text-xs tabular-nums text-placeholder transition-colors\",\n                        FOCUS_RING,\n                        \"focus-visible:ring-inset\",\n                        disabled ? \"cursor-not-allowed opacity-60\" : \"hover:bg-hover\",\n                        lg\n                          ? cn(\"flex w-full min-w-0 items-start bg-surface-2 p-1.5\", LG_CELL_HEIGHT)\n                          : \"size-8 rounded-full\",\n                      )}\n                    >\n                      {lg ? (\n                        <span className=\"inline-flex size-6 items-center justify-center\">\n                          {dayNumber.format(d.getDate())}\n                        </span>\n                      ) : (\n                        dayNumber.format(d.getDate())\n                      )}\n                    </button>\n                  </div>\n                );\n              }\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              const isSelected = Boolean(isStart || isEnd || isInRange);\n              const label = dayNumber.format(d.getDate());\n              const content = renderDay?.(d, {\n                iso,\n                label,\n                today: isToday,\n                disabled,\n                selected: isSelected,\n                rangeStart: Boolean(isStart),\n                rangeEnd: Boolean(isEnd),\n                inRange: isInRange,\n                active: isActive,\n                size,\n              });\n              const filled = hasContent(content);\n              const contentId = `${id}-day-${iso}`;\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. The month view tints whole cells\n              // instead, so it has no band.\n              const banded = !lg && 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-brand-soft\",\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\n                  key={di}\n                  role=\"none\"\n                  className={cn(\"relative flex\", lg ? \"min-w-0\" : \"h-8 items-center justify-center\")}\n                >\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                    // The custom content is the day's DESCRIPTION: `aria-label` replaces\n                    // the button's text as its name, so without this link a screen\n                    // reader would hear the date and never the events drawn under it.\n                    aria-describedby={filled ? contentId : undefined}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                    aria-current={isToday ? \"date\" : undefined}\n                    onClick={() => handleClick(d)}\n                    onKeyDown={onDayKeyDown}\n                    className={\n                      lg\n                        ? cn(\n                            \"flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors\",\n                            LG_CELL_HEIGHT,\n                            FOCUS_RING,\n                            \"focus-visible:ring-inset\",\n                            disabled\n                              ? \"cursor-not-allowed bg-surface text-placeholder\"\n                              : isSelected\n                                ? \"bg-brand-soft text-primary hover:bg-brand-soft-hover\"\n                                : \"bg-surface text-primary hover:bg-hover\",\n                          )\n                        : 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_RING_WIDTH,\n                            \"focus-visible:outline-none focus-visible:ring-inset\",\n                            isStart || isEnd ? \"focus-visible:ring-brand-contrast\" : \"focus-visible:ring-brand\",\n                            disabled\n                              ? \"cursor-not-allowed 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-brand text-brand-contrast hover:bg-brand-hover\"\n                                : isInRange\n                                  ? \"font-medium text-brand-muted hover:bg-brand-soft-hover\"\n                                  : \"text-primary hover:bg-hover\",\n                            isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-strong\",\n                          )\n                    }\n                  >\n                    {lg ? (\n                      <>\n                        <span\n                          className={cn(\n                            \"inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums\",\n                            isStart || isEnd\n                              ? \"bg-brand font-semibold text-brand-contrast\"\n                              : isToday && !disabled\n                                ? \"font-semibold text-brand ring-1 ring-inset ring-brand\"\n                                : isInRange && \"font-medium text-brand-muted\",\n                          )}\n                        >\n                          {label}\n                        </span>\n                        {filled && (\n                          <span id={contentId} className=\"flex min-w-0 flex-col gap-0.5\">\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        {label}\n                        {/* Under the number, inside the circle: room for a dot or two. */}\n                        {filled && (\n                          <span\n                            id={contentId}\n                            className=\"pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none\"\n                          >\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    )}\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/modal.d.ts

@@ -152,8 +152,35 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
      * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one
      * made from an effect that depends on that close (ReauthDialog's on a resolved submit)
      * runs again once `busy` turns false, because the close changes with it.
+     *
+     * A dialog that must not be dismissed while NOTHING runs — a code shown once — wants
+     * {@link ModalProps.held} instead: the same hold without the request.
      */
     busy?: boolean;
+    /**
+     * Hold the dialog open: every dismissal `busy` refuses is refused — the backdrop,
+     * Escape, Back, the frame's X and an `actions(close)` button — but no request is
+     * claimed: the panel is not `aria-busy`. For a dialog the user must not lose by
+     * accident while nothing is in flight (keksdose audit follow-up, 2026-11-01): keksdose's
+     * one-time recovery code (auth/recovery-code-pane.tsx) refused in its own `onClose`,
+     * which comes after the exit has started and cannot hold Back — the first Back spent
+     * the dialog's history entry, and the second left the page, and the code with it.
+     * Held, a refused Back puts the entry back, so every Back is held, not only the first.
+     * The refusal is silent, as under `busy` — `onClose` is not called — so what the
+     * dialog is waiting for is said up front, not after a refused press.
+     *
+     * The way out is a close the CALLER decides on, which is never held: `open={false}`
+     * (the exit still plays) or unmounting, from the dialog's own "I have saved it" button.
+     * Not the `close` that `actions` and `headerActions` receive — that is the dialog's
+     * own dismissal, and held like the rest.
+     *
+     * `DialogFrame`'s X is DISABLED while held, where under `busy` it stays enabled and its
+     * press is dropped: a request is over in a moment, a hold lasts until the user acts,
+     * and an X that does nothing for that long reads as broken. Disabled rather than
+     * hidden, so the header does not reflow the moment the hold lifts; a caller that wants
+     * it gone passes `closeButton={!held}`. Independent of `busy`: either one holds.
+     */
+    held?: boolean;
     /**
      * The PANEL — the `role="dialog"` element the rest of the props go on, not the
      * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on

package/dist/components/modal.js

@@ -97,6 +97,7 @@ function ModalPanel({
   role = "dialog",
   urlParam: _urlParam,
   busy = false,
+  held = false,
   "aria-busy": ariaBusy,
   ownHistoryEntry = true,
   ref,
@@ -124,12 +125,13 @@ function ModalPanel({
     setDismissed(true);
     onClose();
   });
+  const holding = busy || held;
   const requestClose = useCallback(() => {
-    if (!busy) lower();
-  }, [busy, lower]);
+    if (!holding) lower();
+  }, [holding, lower]);
   const backdropClose = useBackdropClose(active ? requestClose : () => {
   });
-  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
+  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: holding });
   useBodyScrollLock(active);
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;