@eifi1/ui-kit 0.5.1 → 0.6.1

package/dist/components/mini-calendar.js

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { parseIsoDate, sameYmd, toLocalIso } from "../lib/dates.js";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels.js";
 const DEFAULT_MINI_CALENDAR_LABELS = {
   previousMonth: "Previous month",
   nextMonth: "Next month",
@@ -55,9 +55,10 @@ function MiniCalendar({
 }) {
   const labels = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
+  const providerWeekStart = useKitWeekStart();
   const weekStart = useMemo(
-    () => weekStartsOn ?? localeWeekStart(locale),
-    [weekStartsOn, locale]
+    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),
+    [weekStartsOn, providerWeekStart, locale]
   );
   const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const fromDate = parseIsoDate(from);

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

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

package/dist/components/modal.d.ts

@@ -1,6 +1,13 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, KeyboardEvent, MouseEvent } from 'react';
 
+/**
+ * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X
+ * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the
+ * way Escape does — calling `onClose` from inside unmounts with no exit, which is the
+ * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.
+ */
+declare const ModalCloseContext: react.Context<(() => void) | null>;
 /**
  * Backdrop handlers that close only when a press starts AND ends on the
  * backdrop itself. A plain onClick fires on mouseup, so dragging a text
@@ -79,4 +86,4 @@ interface ModalProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare function Modal({ onClose, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, style, ...rest }: ModalProps): react.ReactPortal;
 
-export { Modal, type ModalProps, useBackdropClose };
+export { Modal, ModalCloseContext, type ModalProps, useBackdropClose };

package/dist/components/modal.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { createContext, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
 import { useFocusTrap } from "../hooks/use-focus-trap.js";
@@ -40,6 +40,7 @@ function useDragOffset(enabled) {
     }
   };
 }
+const ModalCloseContext = createContext(null);
 function useBackdropClose(onClose) {
   const pressStartedOnBackdrop = useRef(false);
   return {
@@ -130,7 +131,7 @@ function Modal({
               draggable && "md:[&>*:first-child]:cursor-grab",
               className
             ),
-            children
+            children: /* @__PURE__ */ jsx(ModalCloseContext.Provider, { value: requestClose, children })
           }
         )
       }
@@ -140,6 +141,7 @@ function Modal({
 }
 export {
   Modal,
+  ModalCloseContext,
   useBackdropClose
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all three are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal({\n  onClose,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  ...rest\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useDragOffset(Boolean(draggable));\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit, which is the documented limit of this.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Mounted only while open, hence the constant `true`.\n  useOverlayHistory(true, requestClose);\n\n  // Mounted only while open, hence the constant `true`. Through the shared hook and\n  // not by hand: this component's own save/restore copy was one half of the pair that\n  // left the page permanently unscrollable when a dialog containing an open sheet was\n  // closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(true);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had.\n  useFocusTrap(panelRef, { active: true, initialFocus: \"container\" });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      requestClose();\n      return;\n    }\n    // Tab containment lives in useFocusTrap, which listens on the panel itself.\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  return createPortal(\n    <div\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          closing ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all three are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal({\n  onClose,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  ...rest\n}: ModalProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const drag = useDragOffset(Boolean(draggable));\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit, which is the documented limit of this.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Mounted only while open, hence the constant `true`.\n  useOverlayHistory(true, requestClose);\n\n  // Mounted only while open, hence the constant `true`. Through the shared hook and\n  // not by hand: this component's own save/restore copy was one half of the pair that\n  // left the page permanently unscrollable when a dialog containing an open sheet was\n  // closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(true);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had.\n  useFocusTrap(panelRef, { active: true, initialFocus: \"container\" });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      requestClose();\n      return;\n    }\n    // Tab containment lives in useFocusTrap, which listens on the panel itself.\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  return createPortal(\n    <div\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          closing ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -12,8 +12,8 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
     onChange: (value: V[]) => void;
     /** Already-loaded options (client-side filtered); also resolves selected labels. */
     options?: ComboOption<V>[];
-    /** Async option source, debounced + race-safe. When set, `options` resolves
-     *  labels only. */
+    /** Async option source, debounced + race-safe; a rejection shows
+     *  `loadErrorLabel`. When set, `options` resolves labels only. */
     loadOptions?: (query: string) => Promise<ComboOption<V>[]>;
     loading?: boolean;
     label?: ReactNode;
@@ -37,12 +37,25 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
     createLabel?: (query: string) => string;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
+    /** What is wrong with the value, as {@link Input}'s `error`: rendered under the
+     *  field, on the trigger's `aria-describedby`, and implies `invalid`. */
+    error?: ReactNode;
+    /** Narrow `options` client-side by the query. Default `true`; `false` shows them
+     *  as given (a server-ranked list). */
+    filter?: boolean;
+    /** Offer nothing, and call no `loadOptions`, below this many characters. Default
+     *  `0`, i.e. the list loads as the panel opens. */
+    minChars?: number;
+    /** `loadOptions` debounce. Default 150 ms. */
+    debounceMs?: number;
+    /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */
+    loadErrorLabel?: string;
 }
 /**
  * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,
  * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and
  * toggle without closing the panel; the trigger summarises the selection.
  */
-declare function MultiEntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, itemLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, "aria-label": ariaLabel, ...rest }: MultiEntityComboboxProps<V>): react.JSX.Element;
+declare function MultiEntityCombobox<V extends string | number>({ value, onChange, options, loadOptions, loading, label, placeholder, searchPlaceholder, emptyLabel, itemLabel, clearable, clearLabel, closeLabel, disabled, onCreate, createLabel, className, invalid, error, filter, minChars, debounceMs, loadErrorLabel, "aria-label": ariaLabel, ...rest }: MultiEntityComboboxProps<V>): react.JSX.Element;
 
 export { MultiEntityCombobox, type MultiEntityComboboxProps };

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

@@ -4,7 +4,11 @@ import { useId, useMemo } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
-import { ComboboxPanel, useComboboxCore } from "./combobox-core.js";
+import {
+  ComboboxPanel,
+  useComboboxCore,
+  useComboboxFieldError
+} from "./combobox-core.js";
 import {
   DEFAULT_COMBOBOX_LABELS,
   DEFAULT_COMMON_LABELS,
@@ -30,10 +34,23 @@ function MultiEntityCombobox({
   createLabel,
   className,
   invalid,
+  error,
+  filter,
+  minChars,
+  debounceMs,
+  loadErrorLabel,
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const core = useComboboxCore({ options, loadOptions, loading });
+  const core = useComboboxCore({
+    options,
+    loadOptions,
+    loading,
+    filter,
+    minChars,
+    debounceMs
+  });
+  const field = useComboboxFieldError(error, invalid);
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,
     noResults: emptyLabel,
@@ -80,7 +97,8 @@ function MultiEntityCombobox({
           "aria-haspopup": "listbox",
           "aria-label": ariaLabel ?? (typeof label === "string" ? common.fieldValue(label, summary) : void 0),
           disabled,
-          "aria-invalid": invalid || void 0,
+          "aria-invalid": field.isInvalid || void 0,
+          "aria-describedby": field.describedBy,
           onClick: () => !disabled && setOpen((o) => !o),
           onKeyDown: (e) => {
             if (disabled) return;
@@ -94,7 +112,7 @@ function MultiEntityCombobox({
             "pr-9",
             label !== void 0 && FIELD_FLOATING_PAD,
             disabled && "cursor-not-allowed opacity-50",
-            invalid && FIELD_INVALID
+            field.isInvalid && FIELD_INVALID
           ),
           children: [
             /* @__PURE__ */ jsx(
@@ -137,6 +155,7 @@ function MultiEntityCombobox({
           searchPlaceholder: labels.search,
           emptyLabel: labels.noResults,
           closeLabel,
+          loadErrorLabel,
           isSelected: (v) => valueSet.has(v),
           onChoose: toggle,
           showCreate,
@@ -146,7 +165,8 @@ function MultiEntityCombobox({
           },
           createContent: labels.create(q)
         }
-      )
+      ),
+      field.errorEl
     ] })
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useId, useMemo, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe. When set, `options` resolves\n   *  labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyLabel,\n  itemLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: MultiEntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen } = core;\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(\n    () => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }),\n    [locale],\n  );\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? listFormat.format(chosen.map((o) => o!.label))\n      : labels.selectedCount(value.length);\n  })();\n\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value.length > 0 && !disabled);\n\n  const toggle = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on\n    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // A combobox, not a button. The distinction is not pedantry: this control\n        // carried `aria-invalid`, which `button` does not support, so a required\n        // field left empty painted a rose border and told a reader nothing at all —\n        // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n        // fix the audit asked for is the role that describes what this IS: a closed\n        // choice that expands into the list named below. `combobox` supports\n        // `aria-invalid`, so the border and the announcement finally agree.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-haspopup=\"listbox\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        // A caller's own name wins over the composition: two fields labelled\n        // \"Account\" on a transfer form are the from and the to, and only the\n        // caller knows which is which.\n        aria-label={\n          ariaLabel ??\n          (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG. Enter and\n        // Space already do it through the button's own click.\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span\n          className={cn(\n            \"min-w-0 truncate\",\n            // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n            // (`--text-placeholder`) — the same rule every field on a form row\n            // follows (Keksdose dev#477).\n            !value.length && \"text-[var(--text-placeholder)]\",\n          )}\n        >\n          {summary}\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={labels.clear}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange([]);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={labels.create(q)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useId, useMemo, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboOption,\n} from \"./combobox-core\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe; a rejection shows\n   *  `loadErrorLabel`. When set, `options` resolves labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyLabel,\n  itemLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n  error,\n  filter,\n  minChars,\n  debounceMs,\n  loadErrorLabel,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: MultiEntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const field = useComboboxFieldError(error, invalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen } = core;\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(\n    () => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }),\n    [locale],\n  );\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? listFormat.format(chosen.map((o) => o!.label))\n      : labels.selectedCount(value.length);\n  })();\n\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value.length > 0 && !disabled);\n\n  const toggle = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on\n    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // A combobox, not a button. The distinction is not pedantry: this control\n        // carried `aria-invalid`, which `button` does not support, so a required\n        // field left empty painted a rose border and told a reader nothing at all —\n        // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n        // fix the audit asked for is the role that describes what this IS: a closed\n        // choice that expands into the list named below. `combobox` supports\n        // `aria-invalid`, so the border and the announcement finally agree.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-haspopup=\"listbox\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        // A caller's own name wins over the composition: two fields labelled\n        // \"Account\" on a transfer form are the from and the to, and only the\n        // caller knows which is which.\n        aria-label={\n          ariaLabel ??\n          (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)\n        }\n        disabled={disabled}\n        aria-invalid={field.isInvalid || undefined}\n        aria-describedby={field.describedBy}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG. Enter and\n        // Space already do it through the button's own click.\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          field.isInvalid && FIELD_INVALID,\n        )}\n      >\n        <span\n          className={cn(\n            \"min-w-0 truncate\",\n            // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n            // (`--text-placeholder`) — the same rule every field on a form row\n            // follows (Keksdose dev#477).\n            !value.length && \"text-[var(--text-placeholder)]\",\n          )}\n        >\n          {summary}\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={labels.clear}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange([]);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={labels.create(q)}\n      />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/number-field.d.ts

@@ -20,6 +20,13 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import './file-button.js';
 import './numpad-sheet.js';
 
 type NumberInputProps = ComponentProps<typeof NumberInput>;
@@ -32,6 +39,25 @@ interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" |
      * into `[min, max]`. `null` only when `nullable` and the field was emptied.
      */
     onCommit: (value: number | null) => void;
+    /**
+     * LIVE MODE: the number the text reads as, on every keystroke (and every step
+     * key) — for a calculator that recomputes as the user types, while `onCommit`
+     * stays the one to save on.
+     *
+     * What it is NOT, until the commit: rounded to `digits` or clamped into
+     * `[min, max]` — a half-typed "1" on the way to "150" must not read as the
+     * minimum of 100. A calculation reads as its result ("12+5" → 17); an empty field
+     * as `null` (whether or not `nullable`); a draft that is no number yet ("-", "12+")
+     * fires nothing, so the last number stands. On blur/Enter it fires once more with
+     * the committed value if that differs from the last one it reported — the rounded,
+     * clamped or snapped-back number — so a live consumer always ends where `onCommit`
+     * does.
+     *
+     * Feeding it back into `value` is safe: a `value` equal to the number this field
+     * last reported does not re-render the text, so "1," stays "1," while the rest of
+     * the form already shows 1. Not called when `value` changes from outside.
+     */
+    onValueChange?: (value: number | null) => void;
     /** Round to this many decimals on commit, and show at most this many (trailing
      *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */
     digits?: number;
@@ -80,6 +106,20 @@ interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" |
  * The draft follows `value` when it changes from outside (a reset, a loaded record);
  * a change that came from here arrives back identical and is a no-op.
  *
+ * LIVE MODE. A calculator that recomputes per keystroke used to have to pick: this
+ * field (limits, rounding, but a number only on blur) or a bare NumberInput (every
+ * keystroke, but a string and no limits). `onValueChange` is the per-keystroke
+ * channel here, next to the commit rather than instead of it: live numbers for the
+ * read-out, `onCommit` for the save. It lives on this field rather than as
+ * `min`/`max`/`digits` on NumberInput because parsing, the locale's mark and the
+ * limits are what this field already is — a second copy on the string field would be
+ * a second, subtly different NumberField.
+ *
+ * STEPS. `step` (with `min`/`max` as bounds) turns on ArrowUp/ArrowDown and PageUp/
+ * PageDown (×10) — see NumberInput's `step`. A step is a draft change like a
+ * keystroke: `onValueChange` hears it at once, `onCommit` on blur/Enter. Pick a
+ * `step` that `digits` can show (0.25 needs `digits={2}`), or the commit rounds it.
+ *
  * LOCALE. The decimal mark is the locale's: a German user sees and types "1,5".
  * NumberInput normalises every keystroke to a dot (so its evaluator reads one
  * alphabet); this field maps the dot back before the draft is shown, which also
@@ -87,6 +127,6 @@ interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" |
  * digit grouping — "1.000" would read as a thousand in German and as one in English,
  * and a field that parses its own display back must not have that ambiguity.
  */
-declare function NumberField({ value, onCommit, digits, min, max, nullable, unit, unitPlacement, locale: localeProp, label, invalid, error, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rest }: NumberFieldProps): react.JSX.Element;
+declare function NumberField({ value, onCommit, onValueChange, digits, min, max, nullable, unit, unitPlacement, locale: localeProp, label, invalid, error, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rest }: NumberFieldProps): react.JSX.Element;
 
 export { NumberField, type NumberFieldProps };