@eifi1/ui-kit 0.9.0 → 0.11.0

package/dist/components/mini-calendar.js

@@ -1,11 +1,18 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { useAnnounce } from "../hooks/use-announce.js";
-import { parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
+import {
+  addMonthsClamped,
+  localeWeekStart,
+  monthKey,
+  parseIsoDate,
+  sameYmd,
+  toLocalIso
+} from "../lib/dates.js";
 import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
 const DEFAULT_MINI_CALENDAR_LABELS = {
   previousMonth: "Previous month",
@@ -22,27 +29,17 @@ const DAY_NAME_FORMAT = {
   month: "long",
   year: "numeric"
 };
-function localeWeekStart(locale) {
-  try {
-    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;
-    const loc = new Intl.Locale(tag);
-    const firstDay = (loc.getWeekInfo?.() ?? loc.weekInfo)?.firstDay;
-    if (typeof firstDay === "number") return firstDay % 7;
-  } catch {
-  }
-  return 1;
-}
 const weekdayIndex = (d, weekStart) => (d.getDay() - weekStart + 7) % 7;
-function stepMonths(d, months) {
-  const day = d.getDate();
-  const out = new Date(d.getFullYear(), d.getMonth() + months, 1);
-  const lastOfTarget = new Date(out.getFullYear(), out.getMonth() + 1, 0).getDate();
-  out.setDate(Math.min(day, lastOfTarget));
-  return out;
+const stepMonths = addMonthsClamped;
+const LG_CELL_HEIGHT = "min-h-16 md:min-h-24";
+const monthStart = (key) => key ? parseIsoDate(`${key}-01`) : null;
+function sameDayIn(first, day) {
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+  return new Date(first.getFullYear(), first.getMonth(), Math.min(day.getDate(), last));
 }
 function MiniCalendar({
-  from,
-  to,
+  from = "",
+  to = "",
   locale: localeProp,
   weekStartsOn,
   onSelect,
@@ -51,9 +48,15 @@ function MiniCalendar({
   max,
   labels: labelsProp,
   focusOnOpen,
+  size = "sm",
+  renderDay,
+  month,
+  onMonthChange,
+  hideNavigation,
   className,
   ...rest
 }) {
+  const lg = size === "lg";
   const labels = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const providerWeekStart = useKitWeekStart();
@@ -73,7 +76,9 @@ function MiniCalendar({
   const hintId = `${id}-hint`;
   const { announce, regionProps } = useAnnounce();
   const [activeIso, setActiveIso] = useState(() => {
-    const start = fromDate ?? toDate ?? /* @__PURE__ */ new Date();
+    let start = fromDate ?? toDate ?? /* @__PURE__ */ new Date();
+    const first = monthStart(month);
+    if (first && monthKey(start) !== month) start = first;
     if (minDate && start < minDate) return toLocalIso(minDate);
     if (maxDate && start > maxDate) return toLocalIso(maxDate);
     return toLocalIso(start);
@@ -85,6 +90,15 @@ function MiniCalendar({
     const next = parseIsoDate(changed) ?? fromDate ?? toDate;
     if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));
   }
+  const [lastMonth, setLastMonth] = useState(month);
+  if (lastMonth !== month) {
+    setLastMonth(month);
+    const first = monthStart(month);
+    const current = parseIsoDate(activeIso) ?? /* @__PURE__ */ new Date();
+    if (first && monthKey(current) !== month) {
+      setActiveIso(toLocalIso(sameDayIn(first, current)));
+    }
+  }
   const activeDate = parseIsoDate(activeIso) ?? /* @__PURE__ */ new Date();
   const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };
   const firstOfMonth = new Date(view.year, view.month, 1);
@@ -105,6 +119,7 @@ function MiniCalendar({
       d.setDate(ref.getDate() + i);
       return {
         narrow: d.toLocaleDateString(locale, { weekday: "narrow" }),
+        short: d.toLocaleDateString(locale, { weekday: "short" }),
         long: d.toLocaleDateString(locale, { weekday: "long" })
       };
     });
@@ -125,6 +140,8 @@ function MiniCalendar({
     if (iso === activeIso) return;
     if (focus) pendingFocus.current = iso;
     setActiveIso(iso);
+    const key = monthKey(d);
+    if (key !== monthKey(activeDate)) onMonthChange?.(key);
   };
   const onDayKeyDown = (e) => {
     const next = new Date(activeDate);
@@ -199,7 +216,10 @@ function MiniCalendar({
     // `className` does everywhere else in the kit; `...rest` first, as in the rest of
     // this wave, so nothing from outside can take the grid's own wiring away.
     /* @__PURE__ */ jsxs("div", { ...rest, className: cn("select-none", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-1", children: [
+      hideNavigation ? (
+        // Still in the tree: the caption is what names the grid.
+        /* @__PURE__ */ jsx("div", { id: monthId, className: "sr-only-fixed", children: monthLabel })
+      ) : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", lg ? "pb-2" : "pb-1"), children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -215,7 +235,10 @@ function MiniCalendar({
           {
             id: monthId,
             "aria-live": "polite",
-            className: "text-xs font-medium capitalize text-[var(--text-secondary)]",
+            className: cn(
+              "capitalize",
+              lg ? "text-base font-semibold text-[var(--text-primary)]" : "text-xs font-medium text-[var(--text-secondary)]"
+            ),
             children: monthLabel
           }
         ),
@@ -237,21 +260,47 @@ function MiniCalendar({
           role: "grid",
           "aria-labelledby": monthId,
           "aria-describedby": mode === "range" ? hintId : void 0,
-          className: "grid gap-y-0.5",
+          className: cn(
+            "grid",
+            // The month view is RULED: a 1px gap over a border-coloured ground draws the
+            // lines between the cells, the way a wall calendar does.
+            lg ? "gap-px overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--border)]" : "gap-y-0.5"
+          ),
           children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 role: "row",
-                className: "grid grid-cols-7 text-center text-[10px] font-medium uppercase text-[var(--text-placeholder)]",
-                children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": w.long, className: "py-0.5", children: w.narrow }, i))
+                className: cn(
+                  "grid grid-cols-7 text-center font-medium",
+                  lg ? "gap-px text-xs text-[var(--text-muted)]" : "text-[10px] uppercase text-[var(--text-placeholder)]"
+                ),
+                children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "columnheader",
+                    "aria-label": w.long,
+                    className: lg ? "bg-[var(--bg-surface)] py-2" : "py-0.5",
+                    children: lg ? w.short : w.narrow
+                  },
+                  i
+                ))
               }
             ),
             weeks.map((week, wi) => (
               // No column gap: the days of a range join into ONE band. With a gap each day
               // was its own tinted box, and a selected fortnight read as fourteen chips.
-              /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: week.map((d, di) => {
-                if (!d) return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "h-8" }, di);
+              /* @__PURE__ */ jsx("div", { role: "row", className: cn("grid grid-cols-7", lg && "gap-px"), children: week.map((d, di) => {
+                if (!d) {
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "gridcell",
+                      className: lg ? cn(LG_CELL_HEIGHT, "bg-[var(--bg-surface-2)]") : "h-8"
+                    },
+                    di
+                  );
+                }
                 const iso = toLocalIso(d);
                 const disabled = isDisabled(d);
                 const isStart = !disabled && fromDate && sameYmd(d, fromDate);
@@ -259,7 +308,23 @@ function MiniCalendar({
                 const isToday = sameYmd(d, today);
                 const isInRange = !disabled && inRange(d) && !isStart && !isEnd;
                 const isActive = iso === activeIso;
-                const banded = hasBand && !disabled && (isStart || isEnd || isInRange);
+                const isSelected = Boolean(isStart || isEnd || isInRange);
+                const label = dayNumber.format(d.getDate());
+                const content = renderDay?.(d, {
+                  iso,
+                  label,
+                  today: isToday,
+                  disabled,
+                  selected: isSelected,
+                  rangeStart: Boolean(isStart),
+                  rangeEnd: Boolean(isEnd),
+                  inRange: isInRange,
+                  active: isActive,
+                  size
+                });
+                const hasContent = content != null && content !== false && content !== "";
+                const contentId = `${id}-day-${iso}`;
+                const banded = !lg && hasBand && !disabled && (isStart || isEnd || isInRange);
                 const lastOfMonth2 = d.getDate() === daysInMonth(d);
                 const band = banded ? cn(
                   "pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]",
@@ -269,39 +334,78 @@ function MiniCalendar({
                   isStart && (di === 6 || lastOfMonth2) && "hidden",
                   isEnd && (di === 0 || d.getDate() === 1) && "hidden"
                 ) : null;
-                return /* @__PURE__ */ jsxs("div", { role: "none", className: "relative flex h-8 items-center justify-center", children: [
-                  band && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: band }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      role: "gridcell",
-                      "data-iso": iso,
-                      tabIndex: isActive ? 0 : -1,
-                      "aria-label": labels.day(formatDay(d)),
-                      "aria-selected": Boolean(isStart || isEnd || isInRange),
-                      "aria-disabled": disabled || void 0,
-                      "aria-current": isToday ? "date" : void 0,
-                      onClick: () => handleClick(d),
-                      onKeyDown: onDayKeyDown,
-                      className: cn(
-                        "relative size-8 rounded-full text-xs tabular-nums transition-colors",
-                        // A grid you can walk with the keyboard needs to show where the
-                        // keyboard IS. Inset because the cells sit half a pixel apart and
-                        // an outset ring would be drawn over by its neighbours; the
-                        // colour flips on the selected days for the reason the numpad's
-                        // "Done" key does — a --brand ring on a --brand fill is a ring
-                        // that exists only in the DOM.
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
-                        isStart || isEnd ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
-                        disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : isStart || isEnd ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : isInRange ? "font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-                        isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
-                      ),
-                      children: dayNumber.format(d.getDate())
-                    },
-                    di
-                  )
-                ] }, di);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "none",
+                    className: cn(
+                      "relative flex",
+                      lg ? "min-w-0" : "h-8 items-center justify-center"
+                    ),
+                    children: [
+                      band && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: band }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          role: "gridcell",
+                          "data-iso": iso,
+                          tabIndex: isActive ? 0 : -1,
+                          "aria-label": labels.day(formatDay(d)),
+                          "aria-describedby": hasContent ? contentId : void 0,
+                          "aria-selected": isSelected,
+                          "aria-disabled": disabled || void 0,
+                          "aria-current": isToday ? "date" : void 0,
+                          onClick: () => handleClick(d),
+                          onKeyDown: onDayKeyDown,
+                          className: lg ? cn(
+                            "flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors",
+                            LG_CELL_HEIGHT,
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+                            disabled ? "cursor-not-allowed bg-[var(--bg-surface)] text-[var(--text-placeholder)]" : isSelected ? "bg-[var(--brand-bg)] text-[var(--text-primary)] hover:bg-[var(--brand-bg-hover)]" : "bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
+                          ) : cn(
+                            "relative size-8 rounded-full text-xs tabular-nums transition-colors",
+                            // A grid you can walk with the keyboard needs to show where the
+                            // keyboard IS. Inset because the cells sit half a pixel apart and
+                            // an outset ring would be drawn over by its neighbours; the
+                            // colour flips on the selected days for the reason the numpad's
+                            // "Done" key does — a --brand ring on a --brand fill is a ring
+                            // that exists only in the DOM.
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                            isStart || isEnd ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
+                            disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : isStart || isEnd ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : isInRange ? "font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+                            isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
+                          ),
+                          children: lg ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums",
+                                  isStart || isEnd ? "bg-[var(--brand)] font-semibold text-[var(--brand-contrast)]" : isToday && !disabled ? "font-semibold text-[var(--brand)] ring-1 ring-inset ring-[var(--brand)]" : isInRange && "font-medium text-[var(--brand-muted)]"
+                                ),
+                                children: label
+                              }
+                            ),
+                            hasContent && /* @__PURE__ */ jsx("span", { id: contentId, className: "flex min-w-0 flex-col gap-0.5", children: content })
+                          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            label,
+                            hasContent && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                id: contentId,
+                                className: "pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none",
+                                children: content
+                              }
+                            )
+                          ] })
+                        },
+                        di
+                      )
+                    ]
+                  },
+                  di
+                );
               }) }, wi)
             ))
           ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`\n *  (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  day: (date) => date,\n  chooseStart: \"Choose a start date\",\n  chooseEnd: \"Choose an end date\",\n  startSelected: (date) => `${date} selected as the start. Choose an end date.`,\n  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,\n};\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  from: string;\n  to: string;\n  /**\n   * BCP 47 tag for the month caption, the weekday heads, the day numbers and the\n   * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar\n   * NESTED in another kit component (the data table's date filter) has no call site\n   * of its own to pass one at, so it reads the provider's. Without either, `Intl`\n   * uses the runtime's default.\n   */\n  locale?: string;\n  /**\n   * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).\n   * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,\n   * Saturday in much of the Arab world — which is what the user's own wall calendar\n   * does. It was hard-wired to Monday before, which is wrong for most of the people\n   * who use a Sunday-first calendar and invisible to the people who wrote this one.\n   *\n   * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's\n   * week info, else Monday.\n   */\n  weekStartsOn?: WeekDay;\n  onSelect: (from: string, to: string) => void;\n  /** `\"range\"` (default) = two-click from→to; `\"single\"` = one click selects a\n   *  single day (emitted as `onSelect(iso, iso)`). */\n  mode?: \"single\" | \"range\";\n  /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */\n  min?: string;\n  max?: string;\n  /** User-facing strings; see {@link MiniCalendarLabels}. */\n  labels?: Partial<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * The first day of the week in `locale`, as a `Date#getDay` index.\n *\n * `Intl.Locale#getWeekInfo()` is the standard spelling; V8 shipped it first as the\n * `weekInfo` accessor, and Firefox has neither yet — hence both reads and a Monday\n * fallback, which is ISO 8601 and what this grid did unconditionally before. Its\n * `firstDay` counts 1 = Monday … 7 = Sunday, so `% 7` maps it onto `getDay`.\n */\nfunction localeWeekStart(locale: string | undefined): WeekDay {\n  try {\n    const tag = locale ?? new Intl.DateTimeFormat().resolvedOptions().locale;\n    const loc = new Intl.Locale(tag) as Intl.Locale & {\n      getWeekInfo?: () => { firstDay: number };\n      weekInfo?: { firstDay: number };\n    };\n    const firstDay = (loc.getWeekInfo?.() ?? loc.weekInfo)?.firstDay;\n    if (typeof firstDay === \"number\") return (firstDay % 7) as WeekDay;\n  } catch {\n    // A malformed tag throws from `Intl.Locale`; the calendar still has to render.\n  }\n  return 1;\n}\n\n/** Where `d` sits in a week that starts on `weekStart` (the first column = 0). */\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Move `d` by whole months, keeping the day of the month where the target has one.\n *  `setMonth` alone ROLLS OVER — 31 January + 1 month is 3 March — which would skip\n *  February entirely for anyone paging through the year with PageDown. */\nfunction stepMonths(d: Date, months: number): Date {\n  const day = d.getDate();\n  const out = new Date(d.getFullYear(), d.getMonth() + months, 1);\n  const lastOfTarget = new Date(out.getFullYear(), out.getMonth() + 1, 0).getDate();\n  out.setDate(Math.min(day, lastOfTarget));\n  return out;\n}\n\n/**\n * Month-grid range picker used by the data-table date filter. Click once to set\n * the start (and clear the end), click again to set the end; clicking with a\n * full range already selected starts over. The week starts where the locale's does\n * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.\n * In `single` mode each click selects one day. Days outside `min`/`max` (when\n * given) are disabled.\n *\n * **It is a grid, in the APG sense** (audit §a11y, \"MiniCalendar is unusable with a\n * keyboard or screen reader\"). Before this it was 42 buttons in a `grid-cols-7` div:\n * every one of them in the tab order, none of them saying which date it was, and no\n * way to reach next month without a mouse. Now the month is a `role=\"grid\"` of rows\n * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows\n * walk the calendar the way the pattern says — day, week, month — crossing into the\n * neighbouring month by MOVING the grid rather than stopping at its edge.\n *\n * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG\n * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded\n * month would have holes that the roving tabindex falls into. They stay reachable and\n * readable, and the click handler is what refuses them.\n */\nexport function MiniCalendar({\n  from,\n  to,\n  locale: localeProp,\n  weekStartsOn,\n  onSelect,\n  mode = \"range\",\n  min,\n  max,\n  labels: labelsProp,\n  focusOnOpen,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const labels = useKitLabels(\"miniCalendar\", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart = useMemo(\n    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),\n    [weekStartsOn, providerWeekStart, locale],\n  );\n  // Day numbers through `Intl` too: `getDate()` is always ASCII digits, and a locale\n  // that writes its own (Arabic, Persian, Bengali …) would get a grid of foreign\n  // numerals under a caption in its own script.\n  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromDate = parseIsoDate(from);\n  const toDate = parseIsoDate(to);\n  const minDate = min ? parseIsoDate(min) : null;\n  const maxDate = max ? parseIsoDate(max) : null;\n  const isDisabled = (d: Date) => Boolean((minDate && d < minDate) || (maxDate && d > maxDate));\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const monthId = `${id}-month`;\n  const hintId = `${id}-hint`;\n  const { announce, regionProps } = useAnnounce();\n\n  /**\n   * The day that holds the tab order, and with it the visible month — one piece of\n   * state, not two, because they cannot be allowed to disagree: a tabbable cell in a\n   * month that is not on screen is a tab stop that focuses nothing.\n   *\n   * Starts on the selection, or on today when there is none, pulled inside `[min, max]`\n   * so a bounded calendar opens on a day it will actually let you pick.\n   */\n  const [activeIso, setActiveIso] = useState(() => {\n    const start = fromDate ?? toDate ?? new Date();\n    if (minDate && start < minDate) return toLocalIso(minDate);\n    if (maxDate && start > maxDate) return toLocalIso(maxDate);\n    return toLocalIso(start);\n  });\n\n  // Follow the caller's value when it changes from outside (a preset, a cleared\n  // filter, a form reset). Written as a render-phase adjustment rather than an effect\n  // so the grid never paints one frame on the old month.\n  const [lastValue, setLastValue] = useState({ from, to });\n  if (lastValue.from !== from || lastValue.to !== to) {\n    // Follow the end that actually CHANGED, not `from` unconditionally. Picking the\n    // end of a range that spans months used to send the grid back to the start's\n    // month — which with a roving tabindex means the cell the user just activated is\n    // no longer rendered, and their focus goes with it to `<body>`.\n    const changed = lastValue.from !== from ? from : to;\n    setLastValue({ from, to });\n    const next = parseIsoDate(changed) ?? fromDate ?? toDate;\n    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));\n  }\n\n  const activeDate = parseIsoDate(activeIso) ?? new Date();\n  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };\n\n  const firstOfMonth = new Date(view.year, view.month, 1);\n  const lastOfMonth = new Date(view.year, view.month + 1, 0);\n  // Leading blanks up to the first of the month, counted from the week's first day.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) cells.push(null);\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" });\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  /**\n   * A day whose cell has to take focus once it exists. Arrowing off the edge of the\n   * month renders a different month, so the element to focus is not in the DOM at the\n   * time the key is handled — it is one commit away.\n   */\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-iso=\"${iso}\"]`)?.focus();\n  });\n\n  // The roving tab stop is the day to open on, so there is nothing else to work out\n  // here — it is already the selection, or today, pulled inside the bounds.\n  useEffect(() => {\n    if (!focusOnOpen) return;\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, [focusOnOpen]);\n\n  /** Move the roving tabindex, and the month with it when the day lands outside. */\n  const moveTo = (d: Date, focus: boolean) => {\n    const iso = toLocalIso(d);\n    if (iso === activeIso) return;\n    if (focus) pendingFocus.current = iso;\n    setActiveIso(iso);\n  };\n\n  /**\n   * On each day rather than once on the grid: the cell is where focus is, and a\n   * container listening for keys it cannot itself receive is the shape\n   * `jsx-a11y/interactive-supports-focus` objects to. One shared function, not a\n   * closure per cell — it reads the active day from state, which is always the\n   * focused one.\n   */\n  const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const next = new Date(activeDate);\n    // ←/→ are \"previous/next day\" along the READING direction: the grid's columns run\n    // right-to-left in RTL (it is a CSS grid, so the browser mirrors it), and ArrowLeft\n    // there moves to the day that sits to the left — the next one.\n    const step = horizontalStep(e.key, e.currentTarget);\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - 7);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + 7);\n        break;\n      case \"Home\":\n        next.setDate(next.getDate() - weekdayIndex(next, weekStart));\n        break;\n      case \"End\":\n        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));\n        break;\n      // Shift+Page is the year step, as in the APG example. It is the only way to\n      // reach a birth year without holding PageUp for four hundred keystrokes.\n      case \"PageUp\":\n        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());\n        break;\n      default:\n        return;\n    }\n    // Before the no-op check: every key above also scrolls the panel this calendar\n    // usually sits in, and a day that cannot move still must not move the page.\n    e.preventDefault();\n    moveTo(next, true);\n  };\n\n  const moveMonth = (delta: number) => {\n    // Focus stays on the arrow button the user is pressing — only the grid moves.\n    moveTo(stepMonths(activeDate, delta), false);\n  };\n\n  const handleClick = (d: Date) => {\n    // The guard that `disabled` used to be. Out-of-range days are focusable on\n    // purpose (see the component note), so refusing the click is this function's job.\n    if (isDisabled(d)) return;\n    const iso = toLocalIso(d);\n    // Keep the tab order on the day that was just activated even if the caller\n    // ignores the selection — a controlled component may reject it, and the roving\n    // tabindex is this component's own state, not an echo of the value.\n    moveTo(d, false);\n    if (mode === \"single\") {\n      onSelect(iso, iso);\n      return;\n    }\n    const f = parseIsoDate(from);\n    const tt = parseIsoDate(to);\n    if (!f || (f && tt)) {\n      // start a new selection\n      onSelect(iso, \"\");\n      announce(labels.startSelected(formatDay(d)));\n      return;\n    }\n    // f set, tt empty\n    if (d < f) {\n      onSelect(iso, toLocalIso(f));\n      announce(labels.rangeSelected(formatDay(d), formatDay(f)));\n    } else {\n      onSelect(toLocalIso(f), iso);\n      announce(labels.rangeSelected(formatDay(f), formatDay(d)));\n    }\n  };\n\n  const today = new Date();\n  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));\n  const daysInMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();\n  const inRange = (d: Date) => {\n    if (!fromDate || !toDate) return false;\n    return d >= fromDate && d <= toDate;\n  };\n\n  // What the next click does. A range is two clicks and nothing on screen says which\n  // one you are on — sighted users read it off the highlighted start.\n  const awaitingEnd = Boolean(fromDate) && !toDate;\n  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;\n\n  return (\n    // The caller's classes come last, so tailwind-merge lets them win the way\n    // `className` does everywhere else in the kit; `...rest` first, as in the rest of\n    // this wave, so nothing from outside can take the grid's own wiring away.\n    <div {...rest} className={cn(\"select-none\", className)}>\n      <div className=\"flex items-center justify-between pb-1\">\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(-1)}\n          aria-label={labels.previousMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          {/* Mirrored in RTL: \"previous\" points to the reading START, which is right. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n        {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n        <div\n          id={monthId}\n          aria-live=\"polite\"\n          className=\"text-xs font-medium capitalize text-[var(--text-secondary)]\"\n        >\n          {monthLabel}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(1)}\n          aria-label={labels.nextMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n      </div>\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className=\"grid gap-y-0.5\"\n      >\n        <div\n          role=\"row\"\n          className=\"grid grid-cols-7 text-center text-[10px] font-medium uppercase text-[var(--text-placeholder)]\"\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className=\"py-0.5\">\n              {w.narrow}\n            </div>\n          ))}\n        </div>\n        {weeks.map((week, wi) => (\n          // No column gap: the days of a range join into ONE band. With a gap each day\n          // was its own tinted box, and a selected fortnight read as fourteen chips.\n          <div key={wi} role=\"row\" className=\"grid grid-cols-7\">\n            {week.map((d, di) => {\n              // The padding cells still have to BE cells, or the rows are ragged and\n              // a screen reader's \"column 3\" stops meaning Wednesday.\n              if (!d) return <div key={di} role=\"gridcell\" className=\"h-8\" />;\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              // The band behind the day: full width between the ends, half width at an\n              // end (so the round endpoint sits ON the band's tip), rounded where a row\n              // or the month breaks it. Only when both ends exist and differ — a lone\n              // start is a dot, not a band of one.\n              const banded =\n                hasBand && !disabled && (isStart || isEnd || isInRange);\n              const lastOfMonth = d.getDate() === daysInMonth(d);\n              const band = banded\n                ? cn(\n                    \"pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div key={di} role=\"none\" className=\"relative flex h-8 items-center justify-center\">\n                {band && <span aria-hidden className={band} />}\n                <button\n                  key={di}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  data-iso={iso}\n                  // The roving tabindex: ONE tab stop for the whole month. Every day\n                  // being tabbable meant 31 stops between a date field and the next\n                  // control, which is the same reason the pattern exists.\n                  tabIndex={isActive ? 0 : -1}\n                  aria-label={labels.day(formatDay(d))}\n                  aria-selected={Boolean(isStart || isEnd || isInRange)}\n                  aria-disabled={disabled || undefined}\n                  aria-current={isToday ? \"date\" : undefined}\n                  onClick={() => handleClick(d)}\n                  onKeyDown={onDayKeyDown}\n                  className={cn(\n                    \"relative size-8 rounded-full text-xs tabular-nums transition-colors\",\n                    // A grid you can walk with the keyboard needs to show where the\n                    // keyboard IS. Inset because the cells sit half a pixel apart and\n                    // an outset ring would be drawn over by its neighbours; the\n                    // colour flips on the selected days for the reason the numpad's\n                    // \"Done\" key does — a --brand ring on a --brand fill is a ring\n                    // that exists only in the DOM.\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    isStart || isEnd\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      // The two selected states are the BRAND, not a fixed sky: the endpoints\n                      // are the solid fill and the days between them its soft tint. Hardcoding\n                      // them left an app that changed `--brand` with a calendar in the old\n                      // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                      // flip light/dark themselves, so there is no `dark:` partner to carry —\n                      // one would override the token and bring the hardcoded hue back.\n                      : isStart || isEnd\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : isInRange\n                          ? \"font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]\"\n                          : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )}\n                >\n                  {dayNumber.format(d.getDate())}\n                </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      {/* `sr-only-fixed`, not `sr-only`: this renders inside whatever panel a consumer\n          opens it in, and there is no wrapper we can require to be `relative` — see\n          the note on the class in tokens.css. */}\n      {mode === \"range\" && (\n        <span id={hintId} className=\"sr-only-fixed\">\n          {rangeHint}\n        </span>\n      )}\n      <span {...regionProps} />\n    </div>\n  );\n}\n"],"mappings":";AAgaM,SAQI,KARJ;AAhaN,SAAS,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAE5D,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,cAAc,SAAS,kBAAkB;AAClD,SAAS,cAAc,cAAc,uBAAuB;AA6CrD,MAAM,+BAAmD;AAAA,EAC9D,eAAe;AAAA,EACf,WAAW;AAAA,EACX,KAAK,CAAC,SAAS;AAAA,EACf,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe,CAAC,SAAS,GAAG,IAAI;AAAA,EAChC,eAAe,CAAC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE;AAC/C;AAOA,MAAM,kBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAkEA,SAAS,gBAAgB,QAAqC;AAC5D,MAAI;AACF,UAAM,MAAM,UAAU,IAAI,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAClE,UAAM,MAAM,IAAI,KAAK,OAAO,GAAG;AAI/B,UAAM,YAAY,IAAI,cAAc,KAAK,IAAI,WAAW;AACxD,QAAI,OAAO,aAAa,SAAU,QAAQ,WAAW;AAAA,EACvD,QAAQ;AAAA,EAER;AACA,SAAO;AACT;AAGA,MAAM,eAAe,CAAC,GAAS,eAAwB,EAAE,OAAO,IAAI,YAAY,KAAK;AAKrF,SAAS,WAAW,GAAS,QAAsB;AACjD,QAAM,MAAM,EAAE,QAAQ;AACtB,QAAM,MAAM,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,IAAI,QAAQ,CAAC;AAC9D,QAAM,eAAe,IAAI,KAAK,IAAI,YAAY,GAAG,IAAI,SAAS,IAAI,GAAG,CAAC,EAAE,QAAQ;AAChF,MAAI,QAAQ,KAAK,IAAI,KAAK,YAAY,CAAC;AACvC,SAAO;AACT;AAuBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B,UAAU;AACpF,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,oBAAoB,gBAAgB;AAC1C,QAAM,YAAY;AAAA,IAChB,MAAM,gBAAgB,qBAAqB,gBAAgB,MAAM;AAAA,IACjE,CAAC,cAAc,mBAAmB,MAAM;AAAA,EAC1C;AAIA,QAAM,YAAY,QAAQ,MAAM,IAAI,KAAK,aAAa,MAAM,GAAG,CAAC,MAAM,CAAC;AACvE,QAAM,WAAW,aAAa,IAAI;AAClC,QAAM,SAAS,aAAa,EAAE;AAC9B,QAAM,UAAU,MAAM,aAAa,GAAG,IAAI;AAC1C,QAAM,UAAU,MAAM,aAAa,GAAG,IAAI;AAC1C,QAAM,aAAa,CAAC,MAAY,QAAS,WAAW,IAAI,WAAa,WAAW,IAAI,OAAQ;AAE5F,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,SAAS,GAAG,EAAE;AACpB,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAU9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM;AAC/C,UAAM,QAAQ,YAAY,UAAU,oBAAI,KAAK;AAC7C,QAAI,WAAW,QAAQ,QAAS,QAAO,WAAW,OAAO;AACzD,QAAI,WAAW,QAAQ,QAAS,QAAO,WAAW,OAAO;AACzD,WAAO,WAAW,KAAK;AAAA,EACzB,CAAC;AAKD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AACvD,MAAI,UAAU,SAAS,QAAQ,UAAU,OAAO,IAAI;AAKlD,UAAM,UAAU,UAAU,SAAS,OAAO,OAAO;AACjD,iBAAa,EAAE,MAAM,GAAG,CAAC;AACzB,UAAM,OAAO,aAAa,OAAO,KAAK,YAAY;AAClD,QAAI,QAAQ,WAAW,IAAI,MAAM,UAAW,cAAa,WAAW,IAAI,CAAC;AAAA,EAC3E;AAEA,QAAM,aAAa,aAAa,SAAS,KAAK,oBAAI,KAAK;AACvD,QAAM,OAAO,EAAE,MAAM,WAAW,YAAY,GAAG,OAAO,WAAW,SAAS,EAAE;AAE5E,QAAM,eAAe,IAAI,KAAK,KAAK,MAAM,KAAK,OAAO,CAAC;AACtD,QAAM,cAAc,IAAI,KAAK,KAAK,MAAM,KAAK,QAAQ,GAAG,CAAC;AAEzD,QAAM,eAAe,aAAa,cAAc,SAAS;AACzD,QAAM,QAAyB,CAAC;AAChC,WAAS,IAAI,GAAG,IAAI,cAAc,IAAK,OAAM,KAAK,IAAI;AACtD,WAAS,IAAI,GAAG,KAAK,YAAY,QAAQ,GAAG,IAAK,OAAM,KAAK,IAAI,KAAK,KAAK,MAAM,KAAK,OAAO,CAAC,CAAC;AAC9F,SAAO,MAAM,SAAS,MAAM,EAAG,OAAM,KAAK,IAAI;AAC9C,QAAM,QAA2B,CAAC;AAClC,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,EAAG,OAAM,KAAK,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC;AAE1E,QAAM,aAAa,aAAa,mBAAmB,QAAQ,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC;AAC7F,QAAM,YAAY,CAAC,MAAY,EAAE,mBAAmB,QAAQ,eAAe;AAM3E,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,MAAM,IAAI,KAAK,MAAM,GAAG,IAAI,SAAS;AAC3C,WAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM;AACzC,YAAM,IAAI,IAAI,KAAK,GAAG;AACtB,QAAE,QAAQ,IAAI,QAAQ,IAAI,CAAC;AAC3B,aAAO;AAAA,QACL,QAAQ,EAAE,mBAAmB,QAAQ,EAAE,SAAS,SAAS,CAAC;AAAA,QAC1D,MAAM,EAAE,mBAAmB,QAAQ,EAAE,SAAS,OAAO,CAAC;AAAA,MACxD;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,SAAS,CAAC;AAOtB,QAAM,eAAe,OAAsB,IAAI;AAC/C,YAAU,MAAM;AACd,UAAM,MAAM,aAAa;AACzB,QAAI,CAAC,IAAK;AACV,iBAAa,UAAU;AACvB,YAAQ,SAAS,cAA2B,cAAc,GAAG,IAAI,GAAG,MAAM;AAAA,EAC5E,CAAC;AAID,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,YAAQ,SAAS,cAA2B,gBAAgB,GAAG,MAAM;AAAA,EACvE,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,SAAS,CAAC,GAAS,UAAmB;AAC1C,UAAM,MAAM,WAAW,CAAC;AACxB,QAAI,QAAQ,UAAW;AACvB,QAAI,MAAO,cAAa,UAAU;AAClC,iBAAa,GAAG;AAAA,EAClB;AASA,QAAM,eAAe,CAAC,MAAwC;AAC5D,UAAM,OAAO,IAAI,KAAK,UAAU;AAIhC,UAAM,OAAO,eAAe,EAAE,KAAK,EAAE,aAAa;AAClD,YAAQ,OAAO,eAAe,EAAE,KAAK;AAAA,MACnC,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,IAAI;AAClC;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,CAAC;AAC/B;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,CAAC;AAC/B;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,aAAa,MAAM,SAAS,CAAC;AAC3D;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,KAAK,IAAI,aAAa,MAAM,SAAS,EAAE;AACjE;AAAA;AAAA;AAAA,MAGF,KAAK;AACH,aAAK,QAAQ,WAAW,MAAM,EAAE,WAAW,MAAM,EAAE,EAAE,QAAQ,CAAC;AAC9D;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,WAAW,MAAM,EAAE,WAAW,KAAK,CAAC,EAAE,QAAQ,CAAC;AAC5D;AAAA,MACF;AACE;AAAA,IACJ;AAGA,MAAE,eAAe;AACjB,WAAO,MAAM,IAAI;AAAA,EACnB;AAEA,QAAM,YAAY,CAAC,UAAkB;AAEnC,WAAO,WAAW,YAAY,KAAK,GAAG,KAAK;AAAA,EAC7C;AAEA,QAAM,cAAc,CAAC,MAAY;AAG/B,QAAI,WAAW,CAAC,EAAG;AACnB,UAAM,MAAM,WAAW,CAAC;AAIxB,WAAO,GAAG,KAAK;AACf,QAAI,SAAS,UAAU;AACrB,eAAS,KAAK,GAAG;AACjB;AAAA,IACF;AACA,UAAM,IAAI,aAAa,IAAI;AAC3B,UAAM,KAAK,aAAa,EAAE;AAC1B,QAAI,CAAC,KAAM,KAAK,IAAK;AAEnB,eAAS,KAAK,EAAE;AAChB,eAAS,OAAO,cAAc,UAAU,CAAC,CAAC,CAAC;AAC3C;AAAA,IACF;AAEA,QAAI,IAAI,GAAG;AACT,eAAS,KAAK,WAAW,CAAC,CAAC;AAC3B,eAAS,OAAO,cAAc,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;AAAA,IAC3D,OAAO;AACL,eAAS,WAAW,CAAC,GAAG,GAAG;AAC3B,eAAS,OAAO,cAAc,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,QAAM,QAAQ,oBAAI,KAAK;AACvB,QAAM,UAAU,QAAQ,YAAY,UAAU,CAAC,QAAQ,UAAU,MAAM,CAAC;AACxE,QAAM,cAAc,CAAC,MAAY,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,IAAI,GAAG,CAAC,EAAE,QAAQ;AACxF,QAAM,UAAU,CAAC,MAAY;AAC3B,QAAI,CAAC,YAAY,CAAC,OAAQ,QAAO;AACjC,WAAO,KAAK,YAAY,KAAK;AAAA,EAC/B;AAIA,QAAM,cAAc,QAAQ,QAAQ,KAAK,CAAC;AAC1C,QAAM,YAAY,cAAc,OAAO,YAAY,OAAO;AAE1D;AAAA;AAAA;AAAA;AAAA,IAIE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GACnD;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,UAAU,EAAE;AAAA,YAC3B,cAAY,OAAO;AAAA,YACnB,WAAU;AAAA,YAGV,8BAAC,eAAY,WAAU,2BAA0B,eAAW,MAAC;AAAA;AAAA,QAC/D;AAAA,QAKA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,UAAU,CAAC;AAAA,YAC1B,cAAY,OAAO;AAAA,YACnB,WAAU;AAAA,YAEV,8BAAC,gBAAa,WAAU,2BAA0B,eAAW,MAAC;AAAA;AAAA,QAChE;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,mBAAiB;AAAA,UACjB,oBAAkB,SAAS,UAAU,SAAS;AAAA,UAC9C,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET,wBAAc,IAAI,CAAC,GAAG,MACrB,oBAAC,SAAY,MAAK,gBAAe,cAAY,EAAE,MAAM,WAAU,UAC5D,YAAE,UADK,CAEV,CACD;AAAA;AAAA,YACH;AAAA,YACC,MAAM,IAAI,CAAC,MAAM;AAAA;AAAA;AAAA,cAGhB,oBAAC,SAAa,MAAK,OAAM,WAAU,oBAChC,eAAK,IAAI,CAAC,GAAG,OAAO;AAGnB,oBAAI,CAAC,EAAG,QAAO,oBAAC,SAAa,MAAK,YAAW,WAAU,SAA9B,EAAoC;AAC7D,sBAAM,MAAM,WAAW,CAAC;AACxB,sBAAM,WAAW,WAAW,CAAC;AAC7B,sBAAM,UAAU,CAAC,YAAY,YAAY,QAAQ,GAAG,QAAQ;AAC5D,sBAAM,QAAQ,CAAC,YAAY,UAAU,QAAQ,GAAG,MAAM;AACtD,sBAAM,UAAU,QAAQ,GAAG,KAAK;AAChC,sBAAM,YAAY,CAAC,YAAY,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC;AAC1D,sBAAM,WAAW,QAAQ;AAKzB,sBAAM,SACJ,WAAW,CAAC,aAAa,WAAW,SAAS;AAC/C,sBAAMA,eAAc,EAAE,QAAQ,MAAM,YAAY,CAAC;AACjD,sBAAM,OAAO,SACT;AAAA,kBACE;AAAA,kBACA,UAAU,oBAAoB,QAAQ,oBAAoB;AAAA,kBAC1D,cAAc,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM;AAAA,kBAChD,cAAc,OAAO,KAAKA,iBAAgB;AAAA,kBAC1C,YAAY,OAAO,KAAKA,iBAAgB;AAAA,kBACxC,UAAU,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM;AAAA,gBAC9C,IACA;AACJ,uBACE,qBAAC,SAAa,MAAK,QAAO,WAAU,iDACnC;AAAA,0BAAQ,oBAAC,UAAK,eAAW,MAAC,WAAW,MAAM;AAAA,kBAC5C;AAAA,oBAAC;AAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,MAAK;AAAA,sBACL,YAAU;AAAA,sBAIV,UAAU,WAAW,IAAI;AAAA,sBACzB,cAAY,OAAO,IAAI,UAAU,CAAC,CAAC;AAAA,sBACnC,iBAAe,QAAQ,WAAW,SAAS,SAAS;AAAA,sBACpD,iBAAe,YAAY;AAAA,sBAC3B,gBAAc,UAAU,SAAS;AAAA,sBACjC,SAAS,MAAM,YAAY,CAAC;AAAA,sBAC5B,WAAW;AAAA,sBACX,WAAW;AAAA,wBACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOA;AAAA,wBACA,WAAW,QACP,+CACA;AAAA,wBACJ,WACI,sDAOA,WAAW,QACT,iFACA,YACE,2EACA;AAAA,wBACR,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY;AAAA,sBAC9D;AAAA,sBAEC,oBAAU,OAAO,EAAE,QAAQ,CAAC;AAAA;AAAA,oBA1CxB;AAAA,kBA2CP;AAAA,qBA9CU,EA+CV;AAAA,cAEJ,CAAC,KA/EO,EAgFV;AAAA,aACD;AAAA;AAAA;AAAA,MACH;AAAA,MAIC,SAAS,WACR,oBAAC,UAAK,IAAI,QAAQ,WAAU,iBACzB,qBACH;AAAA,MAEF,oBAAC,UAAM,GAAG,aAAa;AAAA,OACzB;AAAA;AAEJ;","names":["lastOfMonth"]}
+{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport {\n  addMonthsClamped,\n  localeWeekStart,\n  monthKey,\n  parseIsoDate,\n  sameYmd,\n  toLocalIso,\n} from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart } from \"../i18n/kit-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`\n *  (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  day: (date) => date,\n  chooseStart: \"Choose a start date\",\n  chooseEnd: \"Choose an end date\",\n  startSelected: (date) => `${date} selected as the start. Choose an end date.`,\n  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,\n};\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  /** 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?: Partial<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /**\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  /** 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  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  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) cells.push(null);\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  while (cells.length % 7 !== 0) cells.push(null);\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  const monthLabel = firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" });\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        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-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          {/* Mirrored in RTL: \"previous\" points to the reading START, which is right. */}\n          <ChevronLeft className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n        {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n        <div\n          id={monthId}\n          aria-live=\"polite\"\n          className={cn(\n            \"capitalize\",\n            lg\n              ? \"text-base font-semibold text-[var(--text-primary)]\"\n              : \"text-xs font-medium text-[var(--text-secondary)]\",\n          )}\n        >\n          {monthLabel}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => moveMonth(1)}\n          aria-label={labels.nextMonth}\n          className=\"rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n        </button>\n      </div>\n      )}\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\n            ? \"gap-px overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--border)]\"\n            : \"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\n              ? \"gap-px text-xs text-[var(--text-muted)]\"\n              : \"text-[10px] uppercase text-[var(--text-placeholder)]\",\n          )}\n        >\n          {weekdayLabels.map((w, i) => (\n            <div\n              key={i}\n              role=\"columnheader\"\n              aria-label={w.long}\n              className={lg ? \"bg-[var(--bg-surface)] py-2\" : \"py-0.5\"}\n            >\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 (\n                  <div\n                    key={di}\n                    role=\"gridcell\"\n                    className={lg ? cn(LG_CELL_HEIGHT, \"bg-[var(--bg-surface-2)]\") : \"h-8\"}\n                  />\n                );\n              }\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              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 hasContent = content != null && content !== false && 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 =\n                !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-[var(--brand-bg)]\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div\n                  key={di}\n                  role=\"none\"\n                  className={cn(\n                    \"relative flex\",\n                    lg ? \"min-w-0\" : \"h-8 items-center justify-center\",\n                  )}\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={hasContent ? 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-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\",\n                          disabled\n                            ? \"cursor-not-allowed bg-[var(--bg-surface)] text-[var(--text-placeholder)]\"\n                            : isSelected\n                              ? \"bg-[var(--brand-bg)] text-[var(--text-primary)] hover:bg-[var(--brand-bg-hover)]\"\n                              : \"bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--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-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset\",\n                    isStart || isEnd\n                      ? \"focus-visible:ring-[var(--brand-contrast)]\"\n                      : \"focus-visible:ring-[var(--brand)]\",\n                    disabled\n                      ? \"cursor-not-allowed text-[var(--text-placeholder)]\"\n                      // The two selected states are the BRAND, not a fixed sky: the endpoints\n                      // are the solid fill and the days between them its soft tint. Hardcoding\n                      // them left an app that changed `--brand` with a calendar in the old\n                      // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                      // flip light/dark themselves, so there is no `dark:` partner to carry —\n                      // one would override the token and bring the hardcoded hue back.\n                      : isStart || isEnd\n                        ? \"bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]\"\n                        : isInRange\n                          ? \"font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]\"\n                          : \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n                    isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-[var(--border-strong)]\",\n                  )\n                  }\n                >\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-[var(--brand)] font-semibold text-[var(--brand-contrast)]\"\n                            : isToday && !disabled\n                              ? \"font-semibold text-[var(--brand)] ring-1 ring-inset ring-[var(--brand)]\"\n                              : isInRange && \"font-medium text-[var(--brand-muted)]\",\n                        )}\n                      >\n                        {label}\n                      </span>\n                      {hasContent && (\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                      {hasContent && (\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

@@ -28,6 +28,28 @@ declare function useBackdropClose(onClose: () => void): {
 interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** Invoked on backdrop click and on Escape. */
     onClose: () => void;
+    /**
+     * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.
+     *
+     * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,
+     * which is every caller before this prop and stays exactly as it was. That idiom has
+     * one blind spot: a close the CALLER decides on (a save that succeeded, a
+     * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,
+     * because there is nothing left to animate. kastlan's `FormModal` was nothing but an
+     * `if (!open) return null` gate in front of this.
+     *
+     * Passed, the component stays mounted while closed and renders nothing, and a flip
+     * to `false` plays the same exit a dismissal does before the panel goes. The focus
+     * trap, the scroll lock and the Back-gesture history entry are held only while
+     * `open` is true — they are released the moment it turns false, so focus is back on
+     * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,
+     * Back, the frame's X) animates first and then calls `onClose`; the `false` that
+     * comes back from it is not animated a second time.
+     *
+     * The body is unmounted once the exit has finished, as it is today, so a form inside
+     * still starts fresh on the next open.
+     */
+    open?: boolean;
     /** `"alertdialog"` for a dialog that interrupts to ask a question the user must
      *  answer (a confirmation) — screen readers announce it with more urgency. Only the
      *  two dialog roles are allowed: the panel stays modal either way. */
@@ -88,6 +110,6 @@ interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
  * into the panel on open and back to the trigger on close, a Tab focus trap, and
  * `role="dialog"`/`aria-modal`.
  */
-declare function Modal({ onClose, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, style, role, ...rest }: ModalProps): react.ReactPortal;
+declare function Modal({ onClose, open, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, style, role, ...rest }: ModalProps): react.ReactPortal | null;
 
 export { Modal, ModalCloseContext, type ModalProps, useBackdropClose };