@eifi1/ui-kit 0.52.0 → 0.53.0

package/dist/components/date-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-field.tsx"],"sourcesContent":["// The field both date pickers draw: the trigger, the popover or phone sheet it opens,\n// the clear button — and the props, label hook and trigger format the two share.\n// Moved out of date-picker.tsx as it was (MOD-9, refactor audit 2026-10); date-picker\n// still exports the one public name here, `DateTriggerAttributes`.\nimport { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref, RefObject } from \"react\";\nimport { Calendar, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { formatIsoDate } from \"../lib/dates\";\nimport {\n  DEFAULT_DATE_PICKER_LABELS,\n  DEFAULT_PICKER_SHEET_LABELS,\n  useKitDateFormatter,\n  useKitLabels,\n  type DatePickerLabels,\n  type KitDateFormatContext,\n} from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport {\n  assignRef,\n  FieldLabelLine,\n  LABEL_ABOVE_BOX,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { FullBleedDialog } from \"./full-bleed-dialog\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport type { MiniCalendarProps } from \"./mini-calendar\";\nimport { Popover } from \"./popover\";\n\n/**\n * What both pickers share — and, through `ComponentPropsWithoutRef<\"div\">`, everything a\n * `<div>` takes, so a `data-tour` anchor, a test id or an `aria-describedby` reaches the\n * field's root element instead of being dropped (audit §api-design).\n *\n * `onChange` is omitted from those attributes: the DOM event of that name carries a\n * `FormEvent`, while both pickers answer with ISO date strings. Each declares its own\n * (date-picker.tsx, date-range-picker.tsx).\n */\nexport interface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">, FieldHelpProps {\n  /** BCP 47 tag for the trigger's date and the calendar. Falls back to\n   *  `<UiKitProvider locale>`, then to the runtime's default. */\n  locale?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  placeholder?: string;\n  /** Inclusive ISO bounds for selectable days. */\n  min?: string;\n  max?: string;\n  /** Show an X to clear the value (emits `\"\"`). */\n  clearable?: boolean;\n  /** Accessible name of the clear button. Wins over `datePicker.clear` from\n   *  `<UiKitProvider labels>`; kept as a prop because it predates the provider. */\n  clearLabel?: string;\n  disabled?: boolean;\n  /**\n   * Why the date cannot be changed — {@link Select}'s `disabledReason`, for a picker that\n   * SAVES on change (a report's period kept per user, a filter persisted as it moves).\n   * The trigger stays focusable and `aria-disabled`, the calendar does not open, the ‹ ›\n   * and Today buttons refuse, the clear is not offered, and `onChange` never fires; the\n   * reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's `aria-describedby`.\n   * Wins over `disabled`.\n   *\n   * 0.52 (refactor audit 2026-10-30, API-3): the date pickers and MonthPicker were the\n   * only value fields with no lock opt-in.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * Standing advice for the field (keksdose K4, \"uniform field anatomy\"), as on a\n   * {@link Select}: plain TEXT is a caption under the field, attached with\n   * `aria-describedby`; a {@link FieldHint} rides the label line (or, unlabelled, sits\n   * at the field's end, outside the box).\n   */\n  hint?: ReactNode;\n  /**\n   * What is wrong with the date, in the caller's words (\"The due date is before the\n   * invoice date\") — {@link Input}'s `error` (keksdose K4: DateField errors had no slot).\n   * Rendered under the field (under the whole row, with `step` / `today`), attached to\n   * the trigger with `aria-describedby` — merged with any the caller passed, after the\n   * caption — and implies `invalid`. Passing the key at all keeps the field's box while\n   * there is no message, so the trigger is never remounted as one comes and goes.\n   */\n  error?: ReactNode;\n  className?: string;\n  /** Intl options for the trigger's formatted date (default: locale short date). Win\n   *  over the provider's `formatDate`. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /** Render the trigger's text for an ISO date yourself; wins over `formatOptions` and\n   *  over the provider's `formatDate`.\n   *  For a host whose date rendering is more than one `Intl` call can say — Keksdose\n   *  puts the weekday's name in the UI language beside digits ordered by a separate\n   *  format preference, two locales in one string. `locale` still drives the calendar.\n   *  Set that rendering once with `<UiKitProvider formatDate>` (keksdose K12) and this\n   *  is for the one field that differs. */\n  formatValue?: (iso: string) => string;\n  /** Passed through to the {@link MiniCalendar} this opens. Its month arrows are\n   *  icon-only, so their `aria-label` is the only name they have — and the package\n   *  ships English defaults, which a translating host has to be able to replace.\n   *  Usually unnecessary now: the calendar reads `miniCalendar` from the provider. */\n  calendarLabels?: MiniCalendarProps[\"labels\"];\n  /**\n   * Make the panel's caption (\"July 2026\") a button that opens the year's twelve\n   * months, with ‹ › stepping a year; picking a month returns to its days. Far dates\n   * stop being a march of month arrows.\n   *\n   * kastlan is why: its service-charge period runs July to June, and with one month on\n   * screen and ‹ › the only way across, the end of the period was eleven clicks past\n   * the start — so kastlan kept two date fields instead of `RhfDateRangePicker`. With\n   * the jump the whole period is open, caption, Jul, 1, caption, next year, Jun, 30.\n   *\n   * What it adds, for the keyboard and a screen reader:\n   *  - the caption is a disclosure button (`aria-expanded`). Its name is the month it\n   *    shows, so speech input can say what it sees; it is `aria-live`, as the\n   *    calendar's caption was, so paging months still says where you landed; and it is\n   *    described by `monthPicker.panel` (\"Choose a month\").\n   *  - the month grid is `MonthPicker`'s grid: one tab stop, arrows walk the months\n   *    (across the year's edge), Home/End the row, PageUp/PageDown a year, Enter or a\n   *    click picks. Focus opens on the month on show and comes back on its days — the\n   *    selected day if it is in that month, else the 1st. Months outside `min`/`max`\n   *    are `aria-disabled`, and a year arrow is once the whole year beyond is.\n   *  - Escape in the month grid goes back to the days without closing the panel (focus\n   *    on the caption); in the days, Escape closes the panel as before.\n   *\n   * No new strings: the month arrows keep `miniCalendar.previousMonth` / `nextMonth`\n   * (`calendarLabels`), and the month grid speaks with `MonthPicker`'s words —\n   * `monthPicker.previousYear` / `nextYear` / `month` / `panel` — because it is that\n   * grid, and a host that translated it once should not have to again.\n   *\n   * Off by default: the caption becomes one more stop in the panel's tab order, which a\n   * 0.x minor does not spring on a form. Works in the popover and in\n   * `DateRangePicker`'s phone sheet alike, beside presets and in `commit=\"apply\"`\n   * (a preset picked while the months are open goes back to the days, on its start).\n   *\n   * Why not a two-month panel (`months={2}`) instead, or beside it: for a twelve-month\n   * period it still pages six times where this takes one year step, and two\n   * `MiniCalendar`s side by side each follow the value on their own — picking the end\n   * in the right-hand month would pull the left one onto it — so the calendar would\n   * have to learn to share a month first. Not worth that for a saving of one arrow on a\n   * range across a single month boundary.\n   */\n  monthJump?: boolean;\n  /**\n   * The TRIGGER — the focusable button that opens the calendar, a `renderTrigger` one\n   * too — as a React 19 ref prop (0.34, API-3, refactor audit 2026-10). The field took\n   * none, so react-hook-form's focus-on-error reached it only through /rhf's id lookup,\n   * and an app not at all. Not the wrapper, which takes the rest of the props.\n   */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The trigger's date renderer, in the kit's order of precedence: the picker's own\n * `formatValue`, then its `formatOptions` (an explicit `Intl` look for this field),\n * then the provider's `formatDate` (keksdose K12), then the locale's short date. A\n * provider formatter that answers `\"\"` falls through to the default for that date.\n */\nexport function useTriggerFormat(\n  source: KitDateFormatContext[\"source\"],\n  locale: string | undefined,\n  formatOptions: Intl.DateTimeFormatOptions | undefined,\n  formatValue: ((iso: string) => string) | undefined,\n): (iso: string) => string {\n  const fromProvider = useKitDateFormatter();\n  if (formatValue) return formatValue;\n  return (iso) => {\n    if (formatOptions === undefined && fromProvider) {\n      // A single date stands alone, where the weekday helps; a range's two ends do not.\n      const text = fromProvider(iso, { unit: \"day\", source, locale, weekday: source === \"datePicker\" });\n      if (text) return text;\n    }\n    // No prop and no provider leaves `locale` undefined: the runtime's default (DUP-11).\n    return formatIsoDate(iso, locale, formatOptions);\n  };\n}\n\n/**\n * Everything the kit's own trigger button carries, handed to a custom one\n * ({@link DateRangePickerProps.renderTrigger}) to spread onto its `<button>`. Spread\n * it WHOLE: the ref is how focus comes back when the panel closes, the id pair and\n * `aria-labelledby` are the 0.5.1 naming (an external `<label htmlFor>`, a form\n * library's `aria-describedby`), and `role`/`aria-haspopup`/`aria-controls`/\n * `aria-expanded` are what tell a screen reader this opens a calendar and whether it\n * is open. `className` is the kit's field look (42px with a label, `pe-9` for the\n * glyph the field draws at its end) — merge yours after it with `cn`.\n */\nexport interface DateTriggerAttributes {\n  ref: RefObject<HTMLButtonElement | null>;\n  type: \"button\";\n  id?: string;\n  role: \"combobox\";\n  \"aria-haspopup\": \"dialog\";\n  \"aria-controls\": string;\n  \"aria-expanded\": boolean;\n  \"aria-labelledby\"?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  /** The field's required state — `Field required` hands it down with the id pair. */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  disabled?: boolean;\n  /** Locked by the write lock (0.52, `commit` / `disabledReason`): focusable, and the\n   *  click opens nothing. Dress a custom trigger for it as for `disabled`. */\n  \"aria-disabled\"?: true;\n  onClick: () => void;\n  className: string;\n}\n\n/** A custom trigger, as `DateField` calls it; each picker adapts it to its own props. */\ntype TriggerRenderer = (attrs: DateTriggerAttributes, valueId: string) => ReactNode;\n\n/** A caller's trigger, as an element of its own: the attributes carry the trigger's\n *  ref, and a ref is handed to a child as a prop, not passed to a function in the\n *  middle of the parent's render. */\nfunction CustomTrigger({\n  render,\n  attrs,\n  valueId,\n}: {\n  render: TriggerRenderer;\n  attrs: DateTriggerAttributes;\n  valueId: string;\n}) {\n  return render(attrs, valueId);\n}\n\n/**\n * The trigger's value wraps instead of truncating at Large and Extra large (0.32.1, the\n * 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing truncates\"). A\n * range (\"01/09/2026 – 30/09/2026\") is 312 px at 150 %, and on a 360 px phone it read\n * \"01/09/2026 – 30/…\" — its end, the half a reader needs, was the half cut off. A\n * `large:` class, so Normal keeps its one-line field: since 0.33 (§10.17) the kit's one\n * `truncate-until-large` (tokens.css) in place of this file's own `truncate` +\n * `large:whitespace-normal large:break-words`.\n */\nconst VALUE_TRUNCATE = \"truncate-until-large\";\n\n/**\n * The field-shaped button that opens the calendar.\n *\n * A component of its own rather than JSX inline in `Popover`'s `trigger` render prop,\n * because handing focus back to it is an effect and a render prop is not somewhere a\n * hook can go.\n */\nfunction DateFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  padded,\n  disabled,\n  locked,\n  invalid,\n  required,\n  panelId,\n  aria,\n  renderTrigger,\n  fieldRef,\n}: {\n  /** The caller's naming/description attributes, routed here from the field. */\n  aria: TriggerAria;\n  /** Draw the button yourself, with these attributes — see {@link DateTriggerAttributes}. */\n  renderTrigger?: TriggerRenderer;\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  /** The picker's own `ref` prop (API-3) — the same element as `triggerRef`. */\n  fieldRef?: Ref<HTMLButtonElement>;\n  /** The panel's id — `role=\"combobox\"` requires `aria-controls`. */\n  panelId: string;\n  triggerText: string;\n  hasValue: boolean;\n  /** ids of the hidden label twin + the value span, in the order they are spoken. */\n  labelledBy?: string;\n  valueId: string;\n  padded: boolean;\n  disabled?: boolean;\n  /** The write lock: the focusable kind of disabled (see `disabledReason`). */\n  locked: boolean;\n  invalid?: boolean;\n  /** `aria-required`, on the trigger with the rest of the field's ARIA. */\n  required?: boolean | \"true\" | \"false\";\n}) {\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    const justClosed = wasOpen.current && !open;\n    wasOpen.current = open;\n    if (!justClosed) return;\n    // Only when the panel still HAD focus. The day the user was standing on has just\n    // been unmounted with the panel, which drops focus to <body> and leaves a\n    // keyboard user back at the top of the document with no idea where they were.\n    // But an outside click closes this panel too, and that click has already given\n    // focus to whatever it landed on — dragging it back here would be worse than the\n    // bug, so a focus that is somewhere real is left alone.\n    const active = document.activeElement;\n    if (!active || active === document.body) triggerRef.current?.focus();\n    // Here rather than through `useFocusTrap`'s `restoreFocus`, and not only because\n    // `Popover` runs no trap to carry it: that option restores to whatever held focus\n    // when the panel opened, and on Safari — and on Firefox on macOS — clicking a\n    // button does not focus it, so \"whatever held focus\" is the page. The requirement\n    // is this trigger, every time, however the panel was opened.\n  }, [open, triggerRef]);\n  // The caller's `ref` (API-3, refactor audit 2026-10) is handed the trigger once it is\n  // mounted, rather than merged into `attrs.ref`: that one is a `RefObject` by contract\n  // (`DateTriggerAttributes`), which a `renderTrigger` button may read, and this way a\n  // caller's own trigger is covered as well as the kit's.\n  useLayoutEffect(() => {\n    if (!fieldRef) return;\n    assignRef(fieldRef, triggerRef.current);\n    return () => assignRef(fieldRef, null);\n  }, [fieldRef, triggerRef]);\n\n  // One attribute object, worn either by the kit's own button below or by a caller's\n  // (`renderTrigger`) — so a custom trigger cannot quietly fall out of step with the\n  // naming and state this one announces.\n  const isInvalid = Boolean(invalid) || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\";\n  const attrs: DateTriggerAttributes = {\n    ref: triggerRef,\n    type: \"button\",\n    // The focusable kind of disabled while locked (Button's rule): native `disabled`\n    // would take the field out of the tab order, and the reason with it.\n    disabled: locked ? undefined : disabled,\n    \"aria-disabled\": locked || undefined,\n    // Locked, the calendar does not open. One open when the lock arrives closes: the\n    // picker moves the field into the reason's frame, which remounts it, as Select's.\n    onClick: () => {\n      if (!locked) toggle();\n    },\n    // The name has to carry the VALUE. A bare `aria-label={label}` — which is what\n    // this was — replaces the button's text outright, so the one field in the form\n    // whose entire job is to show a date announced \"Due date\" and stopped there,\n    // and a screen-reader user could not read back what they had picked without\n    // opening the calendar and hunting for the selected day.\n    //\n    // Two ids rather than one composed string (`common.fieldValue`): \"label: value\"\n    // is a sentence, and a name reference is spoken as the two texts in order with\n    // no punctuation to translate at all. The hidden twin of the FieldLabel lives\n    // in DateField, next to the label it copies.\n    id: aria.id,\n    \"aria-labelledby\": aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy,\n    \"aria-label\": aria[\"aria-label\"],\n    \"aria-describedby\": aria[\"aria-describedby\"],\n    // `role=\"combobox\"` on a button that opens a calendar is the APG date-picker\n    // shape, and it is what makes the next two lines legal: `button` supports\n    // neither `aria-expanded` nor `aria-invalid`, so the previous markup set an\n    // invalid state that announced nothing (ESLint's `role-supports-aria-props`).\n    //\n    // `aria-haspopup=\"dialog\"` is now honest — it was not when this comment first\n    // said so. `Popover` gained a real `role=\"dialog\"` in the same wave, so the\n    // trigger's promise and the panel's role finally agree. The phone sheet is a\n    // `role=\"dialog\"` too, and carries the same id.\n    role: \"combobox\",\n    \"aria-haspopup\": \"dialog\",\n    \"aria-controls\": panelId,\n    \"aria-expanded\": open,\n    \"aria-invalid\": isInvalid || undefined,\n    \"aria-required\": required,\n    className: cn(\n      FIELD_TRIGGER,\n      \"pe-9\",\n      padded && FIELD_FLOATING_PAD,\n      (disabled || locked) && \"cursor-not-allowed opacity-50\",\n      // An `aria-invalid` from a Field spread paints too, as on Input and AmountInput.\n      isInvalid && FIELD_INVALID,\n    ),\n  };\n  if (renderTrigger) return <CustomTrigger render={renderTrigger} attrs={attrs} valueId={valueId} />;\n\n  return (\n    <button {...attrs}>\n      <span id={valueId} className={cn(VALUE_TRUNCATE, !hasValue && \"text-placeholder\")}>\n        {/* `|| \" \"` (a NON-BREAKING space) — triggerText is \"\" when there is no value and no\n            placeholder was passed. An empty span has no line box, so the\n            trigger collapses to its padding and sits shorter than every\n            other field beside it.\n\n            It has to be a NON-BREAKING space. This read `|| \" \"` first, and\n            that fix did nothing at all: an ordinary space is collapsible\n            white space, and white space at the start and end of a line is\n            removed — so the span rendered with height 0 and the trigger\n            stayed 22px against the 42px of the fields either side of it\n            (Keksdose live #294, measured in the browser: `span.textContent`\n            WAS `\" \"` and `getBoundingClientRect().height` was 0). U+00A0 is\n            not collapsible, so it holds the line. */}\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n/**\n * How a panel's body and its action row are put on screen — the popover stacks them,\n * the phone sheet pins the actions in its footer. Handed to the panel rather than\n * applied around it because the actions belong to the panel's own draft state\n * (`RangePanel`), while the frame they sit in belongs to the field.\n */\nexport type PanelFrame = (body: ReactNode, actions?: ReactNode) => ReactNode;\n\nconst popoverFrame: PanelFrame = (body, actions) =>\n  actions ? (\n    <div className=\"flex flex-col gap-2\">\n      {body}\n      <div className=\"flex items-center justify-end gap-2 border-t border-subtle pt-2\">{actions}</div>\n    </div>\n  ) : (\n    body\n  );\n\n/** A field-styled trigger that opens a portalled MiniCalendar. Shared by the\n *  single- and range-date pickers (date-picker.tsx, date-range-picker.tsx). */\nexport function DateField({\n  triggerText,\n  hasValue,\n  label,\n  disabled,\n  locked = false,\n  clearable,\n  clearLabel,\n  panelLabel,\n  className,\n  width,\n  onClear,\n  invalid,\n  sheet = false,\n  sheetBackCloses = true,\n  renderTrigger,\n  labelHint,\n  children,\n  // The trigger's, not the wrapper's: `Field`'s render-prop spreads it with the id\n  // pair, and a required date read as optional while it sat on the role-less div.\n  // Taken here rather than in `splitTriggerAria`, which MonthPicker shares.\n  \"aria-required\": ariaRequired,\n  fieldRef,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  /** The picker's `ref` prop: the trigger (API-3). */\n  fieldRef?: Ref<HTMLButtonElement>;\n  triggerText: string;\n  hasValue: boolean;\n  label?: ReactNode;\n  /** A `FieldHint` for the label line, beside the label. */\n  labelHint?: ReactNode;\n  disabled?: boolean;\n  /** The write lock is on: the trigger is focusable and opens nothing, no clear. The\n   *  picker draws the reason's frame around the field (or its step row). */\n  locked?: boolean;\n  clearable?: boolean;\n  /** Already resolved by the picker (prop > provider > English). */\n  clearLabel: string;\n  /** The popover panel's accessible name, resolved likewise. */\n  panelLabel: string;\n  invalid?: boolean;\n  className?: string;\n  /** Popover panel width; omit for the default (a bare calendar). In rem so it grows\n   *  with the text size, like the Popover's own default (§3.2). */\n  width?: number | RemLength;\n  onClear: () => void;\n  /** Open as a full-screen sheet instead of the popover — the picker decides when\n   *  (in the phone layout, `usePhoneLayout()`). */\n  sheet?: boolean;\n  /** The sheet's `FullBleedDialog backCloses`. */\n  sheetBackCloses?: boolean;\n  renderTrigger?: TriggerRenderer;\n  children: (close: () => void, frame: PanelFrame) => ReactNode;\n}) {\n  // A clear is a change like any other: not offered while locked.\n  const showClear = Boolean(clearable && hasValue && !disabled && !locked);\n  const [aria, wrapperRest] = splitTriggerAria(rest);\n  // The trigger, for the clear to hand the focus to (INP-10, below), beside the picker's\n  // own `ref`.\n  const triggerEl = useRef<HTMLButtonElement | null>(null);\n  const toTrigger = useCallback(\n    (node: HTMLButtonElement | null) => {\n      triggerEl.current = node;\n      assignRef(fieldRef, node);\n    },\n    [fieldRef],\n  );\n  // The panel is portalled to <body> and leaves the subtree whose `dir` it inherited,\n  // so a calendar in an RTL form opened LTR — the grid's columns, its arrow keys and\n  // its chevrons all the wrong way round. Read at the moment of opening (the only way\n  // the popover opens is through `toggle`) and put back on the panel.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const id = useId();\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can be reused as a name; a ReactNode may be a whole row with\n  // its own interactive \"?\" hint in it, and naming a button with that reads the hint\n  // out as part of the field's name.\n  const named = typeof label === \"string\";\n  // The sheet's open flag. Only the phone branch owns one: on desktop `Popover` owns\n  // it, so the two can never disagree about what is on screen.\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const sheetTriggerRef = useRef<HTMLButtonElement>(null);\n  const closeSheet = () => setSheetOpen(false);\n  const sheetLabels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS);\n  const sheetFrame: PanelFrame = (body, actions) => (\n    <FullBleedDialog\n      open\n      onClose={closeSheet}\n      // The same id the popover panel wears, so the trigger's `aria-controls` holds in\n      // both presentations; named the way the popover is.\n      id={panelId}\n      aria-label={panelLabel}\n      header={panelLabel}\n      // `pickerSheet.close`: the one \"close this full-screen picker\" string the kit\n      // already translates, rather than a second key saying the same thing.\n      closeLabel={sheetLabels.close}\n      backCloses={sheetBackCloses}\n      dir={dir}\n      // Portalled to <body>, the sheet is not inside the field's wrapper, so a\n      // document-level \"outside click\" listener — a Popover or dropdown this field\n      // sits in — would read a tap on a day as outside and unmount the cell before\n      // its click (Keksdose dev#477, the fix `PickerSheet` carries).\n      onMouseDown={(e) => e.stopPropagation()}\n      footer={actions}\n    >\n      {body}\n    </FullBleedDialog>\n  );\n  const fieldTrigger = ({\n    open,\n    toggle,\n    ref,\n  }: {\n    open: boolean;\n    toggle: () => void;\n    ref: RefObject<HTMLButtonElement | null>;\n  }) => (\n    <DateFieldTrigger\n      open={open}\n      toggle={() => {\n        setDir(dirOf(rootRef.current));\n        toggle();\n      }}\n      triggerRef={ref}\n      triggerText={triggerText}\n      hasValue={hasValue}\n      // ALWAYS a name reference, never `undefined`. A `<button>` takes its\n      // accessible name from its contents, so an unlabelled trigger used to\n      // announce its own date text for free. `role=\"combobox\"` does not —\n      // content is excluded from name computation for that role — so leaving\n      // this undefined made an unlabelled date field announce nothing at all.\n      // Named: \"label, value\". Unnamed: the value alone, which is what the\n      // button was saying before.\n      //\n      // A caller's own reference comes first. And when the caller gives the field\n      // an `id` (so an external `<label htmlFor>` can point at it), the trigger\n      // lists ITSELF first: a self-reference in `aria-labelledby` is resolved\n      // from the element's native label (accname 2B → 2D), so \"Due date\" from\n      // that <label> is spoken before the value, instead of being overridden.\n      labelledBy={[\n        aria[\"aria-labelledby\"],\n        named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n        valueId,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      aria={aria}\n      panelId={panelId}\n      valueId={valueId}\n      padded={label !== undefined}\n      disabled={disabled}\n      locked={locked}\n      invalid={invalid}\n      required={ariaRequired}\n      renderTrigger={renderTrigger}\n      fieldRef={toTrigger}\n    />\n  );\n  return (\n    // The caller's attributes land here, on the field's own box — the trigger inside is\n    // named by `aria-labelledby` and must keep the id pair it is given.\n    // At Large a labelled box is a grid: the label above, the calendar glyph and the\n    // clear × measured against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).\n    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", label !== undefined && LABEL_ABOVE_BOX, className)}>\n      {label !== undefined && <FieldLabelLine label={label} hint={labelHint} />}\n      {/* The visible FieldLabel is a plain span, not a `<label htmlFor>`, so it names\n          nothing on its own — this hidden twin is what the trigger is named by.\n          `aria-hidden` because a name reference reads a hidden element deliberately\n          (accname §4.3.1), and without it the label would be announced twice: once as\n          loose text before the button, once inside the button's own name.\n          `sr-only-fixed` rather than `sr-only` — see the note on the class in\n          tokens.css. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      {sheet ? (\n        <>\n          {fieldTrigger({ open: sheetOpen, toggle: () => setSheetOpen((v) => !v), ref: sheetTriggerRef })}\n          {/* Mounted only while open, like the popover's children: the panel's draft is\n              born with it, so every open starts again from the committed value. */}\n          {sheetOpen && children(closeSheet, sheetFrame)}\n        </>\n      ) : (\n        <Popover\n          width={width}\n          panelId={panelId}\n          // Named for what it is. Unnamed, it fell back to `popover.panel`, and a date\n          // field announced its calendar as \"Popover\" — in English, in every language.\n          labels={{ panel: panelLabel }}\n          dir={dir}\n          trigger={fieldTrigger}\n        >\n          {(close) => children(close, popoverFrame)}\n        </Popover>\n      )}\n      {showClear ? (\n        <button\n          type=\"button\"\n          aria-label={clearLabel}\n          onClick={() => {\n            onClear();\n            // The × goes with the value, so a keyboard clear left the focus on a button\n            // that was about to unmount — and it fell to <body> (refactor audit\n            // 2026-10-30, INP-10). The trigger, as SearchField's clear does.\n            triggerEl.current?.focus();\n          }}\n          className=\"absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      ) : (\n        <Calendar\n          aria-hidden\n          className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\"\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * The picker's own label props, folded into one `datePicker` override so they sit at\n * the top of the same precedence chain as everything else: prop > provider > English.\n * They predate the provider and stay public API, which is why they are not simply\n * replaced by a `labels` prop.\n */\nexport function useDatePickerLabels(\n  clearLabel: string | undefined,\n  stepLabels: { prev: string; next: string } | undefined,\n  todayLabel: string | undefined,\n): DatePickerLabels {\n  const prev = stepLabels?.prev;\n  const next = stepLabels?.next;\n  const fromProps = useMemo(() => {\n    const out: Partial<DatePickerLabels> = {};\n    if (clearLabel !== undefined) out.clear = clearLabel;\n    if (prev !== undefined) out.previousDay = prev;\n    if (next !== undefined) out.nextDay = next;\n    if (todayLabel !== undefined) out.today = todayLabel;\n    return out;\n  }, [clearLabel, prev, next, todayLabel]);\n  return useKitLabels(\"datePicker\", DEFAULT_DATE_PICKER_LABELS, fromProps);\n}\n\n/**\n * The caller's `hint` when it has no label line to ride: at the end of the field,\n * outside the box, as an unlabelled {@link Select} places its FieldHint (0.15.5 P8).\n */\nexport function withEndHint(field: ReactNode, hint: ReactNode): ReactNode {\n  if (hint === undefined) return field;\n  return (\n    <div className=\"flex items-center gap-1.5\">\n      <div className=\"min-w-0 flex-1\">{field}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-field.tsx"],"sourcesContent":["// The field both date pickers draw: the trigger, the popover or phone sheet it opens,\n// the clear button — and the props, label hook and trigger format the two share.\n// Moved out of date-picker.tsx as it was (MOD-9, refactor audit 2026-10); date-picker\n// still exports the one public name here, `DateTriggerAttributes`.\nimport { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref, RefObject } from \"react\";\nimport { Calendar, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { formatIsoDate } from \"../lib/dates\";\nimport {\n  DEFAULT_DATE_PICKER_LABELS,\n  DEFAULT_PICKER_SHEET_LABELS,\n  useKitDateFormatter,\n  useKitLabels,\n  type DatePickerLabels,\n  type KitDateFormatContext,\n} from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport {\n  assignRef,\n  FieldLabelLine,\n  LABEL_ABOVE_BOX,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { FullBleedDialog } from \"./full-bleed-dialog\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport type { MiniCalendarProps } from \"./mini-calendar\";\nimport { Popover } from \"./popover\";\n\n/**\n * What both pickers share — and, through `ComponentPropsWithoutRef<\"div\">`, everything a\n * `<div>` takes, so a `data-tour` anchor, a test id or an `aria-describedby` reaches the\n * field's root element instead of being dropped (audit §api-design).\n *\n * `onChange` is omitted from those attributes: the DOM event of that name carries a\n * `FormEvent`, while both pickers answer with ISO date strings. Each declares its own\n * (date-picker.tsx, date-range-picker.tsx).\n */\nexport interface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">, FieldHelpProps {\n  /** BCP 47 tag for the trigger's date and the calendar. Falls back to\n   *  `<UiKitProvider locale>`, then to the runtime's default. */\n  locale?: string;\n  /** Embedded top-boundary label, matching the native Input/Select fields. */\n  label?: ReactNode;\n  placeholder?: string;\n  /** Inclusive ISO bounds for selectable days. */\n  min?: string;\n  max?: string;\n  /** Show an X to clear the value (emits `\"\"`). */\n  clearable?: boolean;\n  /** Accessible name of the clear button. Wins over `datePicker.clear` from\n   *  `<UiKitProvider labels>`; kept as a prop because it predates the provider. */\n  clearLabel?: string;\n  disabled?: boolean;\n  /**\n   * Why the date cannot be changed — {@link Select}'s `disabledReason`, for a picker that\n   * SAVES on change (a report's period kept per user, a filter persisted as it moves).\n   * The trigger stays focusable and `aria-disabled`, the calendar does not open, the ‹ ›\n   * and Today buttons refuse, the clear is not offered, and `onChange` never fires; the\n   * reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's `aria-describedby`.\n   * Wins over `disabled`.\n   *\n   * 0.52 (refactor audit 2026-10-30, API-3): the date pickers and MonthPicker were the\n   * only value fields with no lock opt-in.\n   */\n  disabledReason?: ReactNode;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise. */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * Standing advice for the field (keksdose K4, \"uniform field anatomy\"), as on a\n   * {@link Select}: plain TEXT is a caption under the field, attached with\n   * `aria-describedby`; a {@link FieldHint} rides the label line (or, unlabelled, sits\n   * at the field's end, outside the box).\n   */\n  hint?: ReactNode;\n  /**\n   * What is wrong with the date, in the caller's words (\"The due date is before the\n   * invoice date\") — {@link Input}'s `error` (keksdose K4: DateField errors had no slot).\n   * Rendered under the field (under the whole row, with `step` / `today`), attached to\n   * the trigger with `aria-describedby` — merged with any the caller passed, after the\n   * caption — and implies `invalid`. Passing the key at all keeps the field's box while\n   * there is no message, so the trigger is never remounted as one comes and goes.\n   */\n  error?: ReactNode;\n  className?: string;\n  /** Intl options for the trigger's formatted date (default: locale short date). Win\n   *  over the provider's `formatDate`. */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /** Render the trigger's text for an ISO date yourself; wins over `formatOptions` and\n   *  over the provider's `formatDate`.\n   *  For a host whose date rendering is more than one `Intl` call can say — Keksdose\n   *  puts the weekday's name in the UI language beside digits ordered by a separate\n   *  format preference, two locales in one string. `locale` still drives the calendar.\n   *  Set that rendering once with `<UiKitProvider formatDate>` (keksdose K12) and this\n   *  is for the one field that differs. */\n  formatValue?: (iso: string) => string;\n  /** Passed through to the {@link MiniCalendar} this opens. Its month arrows are\n   *  icon-only, so their `aria-label` is the only name they have — and the package\n   *  ships English defaults, which a translating host has to be able to replace.\n   *  Usually unnecessary now: the calendar reads `miniCalendar` from the provider. */\n  calendarLabels?: MiniCalendarProps[\"labels\"];\n  /**\n   * Make the panel's caption (\"July 2026\") a button that opens the year's twelve\n   * months, with ‹ › stepping a year; picking a month returns to its days. Far dates\n   * stop being a march of month arrows.\n   *\n   * kastlan is why: its service-charge period runs July to June, and with one month on\n   * screen and ‹ › the only way across, the end of the period was eleven clicks past\n   * the start — so kastlan kept two date fields instead of `RhfDateRangePicker`. With\n   * the jump the whole period is open, caption, Jul, 1, caption, next year, Jun, 30.\n   *\n   * What it adds, for the keyboard and a screen reader:\n   *  - the caption is a disclosure button (`aria-expanded`). Its name is the month it\n   *    shows, so speech input can say what it sees; it is `aria-live`, as the\n   *    calendar's caption was, so paging months still says where you landed; and it is\n   *    described by `monthPicker.panel` (\"Choose a month\").\n   *  - the month grid is `MonthPicker`'s grid: one tab stop, arrows walk the months\n   *    (across the year's edge), Home/End the row, PageUp/PageDown a year, Enter or a\n   *    click picks. Focus opens on the month on show and comes back on its days — the\n   *    selected day if it is in that month, else the 1st. Months outside `min`/`max`\n   *    are `aria-disabled`, and a year arrow is once the whole year beyond is.\n   *  - Escape in the month grid goes back to the days without closing the panel (focus\n   *    on the caption); in the days, Escape closes the panel as before.\n   *\n   * No new strings: the month arrows keep `miniCalendar.previousMonth` / `nextMonth`\n   * (`calendarLabels`), and the month grid speaks with `MonthPicker`'s words —\n   * `monthPicker.previousYear` / `nextYear` / `month` / `panel` — because it is that\n   * grid, and a host that translated it once should not have to again.\n   *\n   * Off by default: the caption becomes one more stop in the panel's tab order, which a\n   * 0.x minor does not spring on a form. Works in the popover and in\n   * `DateRangePicker`'s phone sheet alike, beside presets and with `apply`\n   * (a preset picked while the months are open goes back to the days, on its start).\n   *\n   * Why not a two-month panel (`months={2}`) instead, or beside it: for a twelve-month\n   * period it still pages six times where this takes one year step, and two\n   * `MiniCalendar`s side by side each follow the value on their own — picking the end\n   * in the right-hand month would pull the left one onto it — so the calendar would\n   * have to learn to share a month first. Not worth that for a saving of one arrow on a\n   * range across a single month boundary.\n   */\n  monthJump?: boolean;\n  /**\n   * The TRIGGER — the focusable button that opens the calendar, a `renderTrigger` one\n   * too — as a React 19 ref prop (0.34, API-3, refactor audit 2026-10). The field took\n   * none, so react-hook-form's focus-on-error reached it only through /rhf's id lookup,\n   * and an app not at all. Not the wrapper, which takes the rest of the props.\n   */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The trigger's date renderer, in the kit's order of precedence: the picker's own\n * `formatValue`, then its `formatOptions` (an explicit `Intl` look for this field),\n * then the provider's `formatDate` (keksdose K12), then the locale's short date. A\n * provider formatter that answers `\"\"` falls through to the default for that date.\n */\nexport function useTriggerFormat(\n  source: KitDateFormatContext[\"source\"],\n  locale: string | undefined,\n  formatOptions: Intl.DateTimeFormatOptions | undefined,\n  formatValue: ((iso: string) => string) | undefined,\n): (iso: string) => string {\n  const fromProvider = useKitDateFormatter();\n  if (formatValue) return formatValue;\n  return (iso) => {\n    if (formatOptions === undefined && fromProvider) {\n      // A single date stands alone, where the weekday helps; a range's two ends do not.\n      const text = fromProvider(iso, { unit: \"day\", source, locale, weekday: source === \"datePicker\" });\n      if (text) return text;\n    }\n    // No prop and no provider leaves `locale` undefined: the runtime's default (DUP-11).\n    return formatIsoDate(iso, locale, formatOptions);\n  };\n}\n\n/**\n * Everything the kit's own trigger button carries, handed to a custom one\n * ({@link DateRangePickerProps.renderTrigger}) to spread onto its `<button>`. Spread\n * it WHOLE: the ref is how focus comes back when the panel closes, the id pair and\n * `aria-labelledby` are the 0.5.1 naming (an external `<label htmlFor>`, a form\n * library's `aria-describedby`), and `role`/`aria-haspopup`/`aria-controls`/\n * `aria-expanded` are what tell a screen reader this opens a calendar and whether it\n * is open. `className` is the kit's field look (42px with a label, `pe-9` for the\n * glyph the field draws at its end) — merge yours after it with `cn`.\n */\nexport interface DateTriggerAttributes {\n  ref: RefObject<HTMLButtonElement | null>;\n  type: \"button\";\n  id?: string;\n  role: \"combobox\";\n  \"aria-haspopup\": \"dialog\";\n  \"aria-controls\": string;\n  \"aria-expanded\": boolean;\n  \"aria-labelledby\"?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  /** The field's required state — `Field required` hands it down with the id pair. */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  disabled?: boolean;\n  /** Locked by the write lock (0.52, `commit` / `disabledReason`): focusable, and the\n   *  click opens nothing. Dress a custom trigger for it as for `disabled`. */\n  \"aria-disabled\"?: true;\n  onClick: () => void;\n  className: string;\n}\n\n/** A custom trigger, as `DateField` calls it; each picker adapts it to its own props. */\ntype TriggerRenderer = (attrs: DateTriggerAttributes, valueId: string) => ReactNode;\n\n/** A caller's trigger, as an element of its own: the attributes carry the trigger's\n *  ref, and a ref is handed to a child as a prop, not passed to a function in the\n *  middle of the parent's render. */\nfunction CustomTrigger({\n  render,\n  attrs,\n  valueId,\n}: {\n  render: TriggerRenderer;\n  attrs: DateTriggerAttributes;\n  valueId: string;\n}) {\n  return render(attrs, valueId);\n}\n\n/**\n * The trigger's value wraps instead of truncating at Large and Extra large (0.32.1, the\n * 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing truncates\"). A\n * range (\"01/09/2026 – 30/09/2026\") is 312 px at 150 %, and on a 360 px phone it read\n * \"01/09/2026 – 30/…\" — its end, the half a reader needs, was the half cut off. A\n * `large:` class, so Normal keeps its one-line field: since 0.33 (§10.17) the kit's one\n * `truncate-until-large` (tokens.css) in place of this file's own `truncate` +\n * `large:whitespace-normal large:break-words`.\n */\nconst VALUE_TRUNCATE = \"truncate-until-large\";\n\n/**\n * The field-shaped button that opens the calendar.\n *\n * A component of its own rather than JSX inline in `Popover`'s `trigger` render prop,\n * because handing focus back to it is an effect and a render prop is not somewhere a\n * hook can go.\n */\nfunction DateFieldTrigger({\n  open,\n  toggle,\n  triggerRef,\n  triggerText,\n  hasValue,\n  labelledBy,\n  valueId,\n  padded,\n  disabled,\n  locked,\n  invalid,\n  required,\n  panelId,\n  aria,\n  renderTrigger,\n  fieldRef,\n}: {\n  /** The caller's naming/description attributes, routed here from the field. */\n  aria: TriggerAria;\n  /** Draw the button yourself, with these attributes — see {@link DateTriggerAttributes}. */\n  renderTrigger?: TriggerRenderer;\n  open: boolean;\n  toggle: () => void;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  /** The picker's own `ref` prop (API-3) — the same element as `triggerRef`. */\n  fieldRef?: Ref<HTMLButtonElement>;\n  /** The panel's id — `role=\"combobox\"` requires `aria-controls`. */\n  panelId: string;\n  triggerText: string;\n  hasValue: boolean;\n  /** ids of the hidden label twin + the value span, in the order they are spoken. */\n  labelledBy?: string;\n  valueId: string;\n  padded: boolean;\n  disabled?: boolean;\n  /** The write lock: the focusable kind of disabled (see `disabledReason`). */\n  locked: boolean;\n  invalid?: boolean;\n  /** `aria-required`, on the trigger with the rest of the field's ARIA. */\n  required?: boolean | \"true\" | \"false\";\n}) {\n  const wasOpen = useRef(false);\n  useEffect(() => {\n    const justClosed = wasOpen.current && !open;\n    wasOpen.current = open;\n    if (!justClosed) return;\n    // Only when the panel still HAD focus. The day the user was standing on has just\n    // been unmounted with the panel, which drops focus to <body> and leaves a\n    // keyboard user back at the top of the document with no idea where they were.\n    // But an outside click closes this panel too, and that click has already given\n    // focus to whatever it landed on — dragging it back here would be worse than the\n    // bug, so a focus that is somewhere real is left alone.\n    const active = document.activeElement;\n    if (!active || active === document.body) triggerRef.current?.focus();\n    // Here rather than through `useFocusTrap`'s `restoreFocus`, and not only because\n    // `Popover` runs no trap to carry it: that option restores to whatever held focus\n    // when the panel opened, and on Safari — and on Firefox on macOS — clicking a\n    // button does not focus it, so \"whatever held focus\" is the page. The requirement\n    // is this trigger, every time, however the panel was opened.\n  }, [open, triggerRef]);\n  // The caller's `ref` (API-3, refactor audit 2026-10) is handed the trigger once it is\n  // mounted, rather than merged into `attrs.ref`: that one is a `RefObject` by contract\n  // (`DateTriggerAttributes`), which a `renderTrigger` button may read, and this way a\n  // caller's own trigger is covered as well as the kit's.\n  useLayoutEffect(() => {\n    if (!fieldRef) return;\n    assignRef(fieldRef, triggerRef.current);\n    return () => assignRef(fieldRef, null);\n  }, [fieldRef, triggerRef]);\n\n  // One attribute object, worn either by the kit's own button below or by a caller's\n  // (`renderTrigger`) — so a custom trigger cannot quietly fall out of step with the\n  // naming and state this one announces.\n  const isInvalid = Boolean(invalid) || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\";\n  const attrs: DateTriggerAttributes = {\n    ref: triggerRef,\n    type: \"button\",\n    // The focusable kind of disabled while locked (Button's rule): native `disabled`\n    // would take the field out of the tab order, and the reason with it.\n    disabled: locked ? undefined : disabled,\n    \"aria-disabled\": locked || undefined,\n    // Locked, the calendar does not open. One open when the lock arrives closes: the\n    // picker moves the field into the reason's frame, which remounts it, as Select's.\n    onClick: () => {\n      if (!locked) toggle();\n    },\n    // The name has to carry the VALUE. A bare `aria-label={label}` — which is what\n    // this was — replaces the button's text outright, so the one field in the form\n    // whose entire job is to show a date announced \"Due date\" and stopped there,\n    // and a screen-reader user could not read back what they had picked without\n    // opening the calendar and hunting for the selected day.\n    //\n    // Two ids rather than one composed string (`common.fieldValue`): \"label: value\"\n    // is a sentence, and a name reference is spoken as the two texts in order with\n    // no punctuation to translate at all. The hidden twin of the FieldLabel lives\n    // in DateField, next to the label it copies.\n    id: aria.id,\n    \"aria-labelledby\": aria[\"aria-label\"] && !aria[\"aria-labelledby\"] ? undefined : labelledBy,\n    \"aria-label\": aria[\"aria-label\"],\n    \"aria-describedby\": aria[\"aria-describedby\"],\n    // `role=\"combobox\"` on a button that opens a calendar is the APG date-picker\n    // shape, and it is what makes the next two lines legal: `button` supports\n    // neither `aria-expanded` nor `aria-invalid`, so the previous markup set an\n    // invalid state that announced nothing (ESLint's `role-supports-aria-props`).\n    //\n    // `aria-haspopup=\"dialog\"` is now honest — it was not when this comment first\n    // said so. `Popover` gained a real `role=\"dialog\"` in the same wave, so the\n    // trigger's promise and the panel's role finally agree. The phone sheet is a\n    // `role=\"dialog\"` too, and carries the same id.\n    role: \"combobox\",\n    \"aria-haspopup\": \"dialog\",\n    \"aria-controls\": panelId,\n    \"aria-expanded\": open,\n    \"aria-invalid\": isInvalid || undefined,\n    \"aria-required\": required,\n    className: cn(\n      FIELD_TRIGGER,\n      \"pe-9\",\n      padded && FIELD_FLOATING_PAD,\n      (disabled || locked) && \"cursor-not-allowed opacity-50\",\n      // An `aria-invalid` from a Field spread paints too, as on Input and AmountInput.\n      isInvalid && FIELD_INVALID,\n    ),\n  };\n  if (renderTrigger) return <CustomTrigger render={renderTrigger} attrs={attrs} valueId={valueId} />;\n\n  return (\n    <button {...attrs}>\n      <span id={valueId} className={cn(VALUE_TRUNCATE, !hasValue && \"text-placeholder\")}>\n        {/* `|| \" \"` (a NON-BREAKING space) — triggerText is \"\" when there is no value and no\n            placeholder was passed. An empty span has no line box, so the\n            trigger collapses to its padding and sits shorter than every\n            other field beside it.\n\n            It has to be a NON-BREAKING space. This read `|| \" \"` first, and\n            that fix did nothing at all: an ordinary space is collapsible\n            white space, and white space at the start and end of a line is\n            removed — so the span rendered with height 0 and the trigger\n            stayed 22px against the 42px of the fields either side of it\n            (Keksdose live #294, measured in the browser: `span.textContent`\n            WAS `\" \"` and `getBoundingClientRect().height` was 0). U+00A0 is\n            not collapsible, so it holds the line. */}\n        {triggerText || \" \"}\n      </span>\n    </button>\n  );\n}\n\n/**\n * How a panel's body and its action row are put on screen — the popover stacks them,\n * the phone sheet pins the actions in its footer. Handed to the panel rather than\n * applied around it because the actions belong to the panel's own draft state\n * (`RangePanel`), while the frame they sit in belongs to the field.\n */\nexport type PanelFrame = (body: ReactNode, actions?: ReactNode) => ReactNode;\n\nconst popoverFrame: PanelFrame = (body, actions) =>\n  actions ? (\n    <div className=\"flex flex-col gap-2\">\n      {body}\n      <div className=\"flex items-center justify-end gap-2 border-t border-subtle pt-2\">{actions}</div>\n    </div>\n  ) : (\n    body\n  );\n\n/** A field-styled trigger that opens a portalled MiniCalendar. Shared by the\n *  single- and range-date pickers (date-picker.tsx, date-range-picker.tsx). */\nexport function DateField({\n  triggerText,\n  hasValue,\n  label,\n  disabled,\n  locked = false,\n  clearable,\n  clearLabel,\n  panelLabel,\n  className,\n  width,\n  onClear,\n  invalid,\n  sheet = false,\n  sheetBackCloses = true,\n  renderTrigger,\n  labelHint,\n  children,\n  // The trigger's, not the wrapper's: `Field`'s render-prop spreads it with the id\n  // pair, and a required date read as optional while it sat on the role-less div.\n  // Taken here rather than in `splitTriggerAria`, which MonthPicker shares.\n  \"aria-required\": ariaRequired,\n  fieldRef,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  /** The picker's `ref` prop: the trigger (API-3). */\n  fieldRef?: Ref<HTMLButtonElement>;\n  triggerText: string;\n  hasValue: boolean;\n  label?: ReactNode;\n  /** A `FieldHint` for the label line, beside the label. */\n  labelHint?: ReactNode;\n  disabled?: boolean;\n  /** The write lock is on: the trigger is focusable and opens nothing, no clear. The\n   *  picker draws the reason's frame around the field (or its step row). */\n  locked?: boolean;\n  clearable?: boolean;\n  /** Already resolved by the picker (prop > provider > English). */\n  clearLabel: string;\n  /** The popover panel's accessible name, resolved likewise. */\n  panelLabel: string;\n  invalid?: boolean;\n  className?: string;\n  /** Popover panel width; omit for the default (a bare calendar). In rem so it grows\n   *  with the text size, like the Popover's own default (§3.2). */\n  width?: number | RemLength;\n  onClear: () => void;\n  /** Open as a full-screen sheet instead of the popover — the picker decides when\n   *  (in the phone layout, `usePhoneLayout()`). */\n  sheet?: boolean;\n  /** The sheet's `FullBleedDialog backCloses`. */\n  sheetBackCloses?: boolean;\n  renderTrigger?: TriggerRenderer;\n  children: (close: () => void, frame: PanelFrame) => ReactNode;\n}) {\n  // A clear is a change like any other: not offered while locked.\n  const showClear = Boolean(clearable && hasValue && !disabled && !locked);\n  const [aria, wrapperRest] = splitTriggerAria(rest);\n  // The trigger, for the clear to hand the focus to (INP-10, below), beside the picker's\n  // own `ref`.\n  const triggerEl = useRef<HTMLButtonElement | null>(null);\n  const toTrigger = useCallback(\n    (node: HTMLButtonElement | null) => {\n      triggerEl.current = node;\n      assignRef(fieldRef, node);\n    },\n    [fieldRef],\n  );\n  // The panel is portalled to <body> and leaves the subtree whose `dir` it inherited,\n  // so a calendar in an RTL form opened LTR — the grid's columns, its arrow keys and\n  // its chevrons all the wrong way round. Read at the moment of opening (the only way\n  // the popover opens is through `toggle`) and put back on the panel.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const id = useId();\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const panelId = `${id}-panel`;\n  // Only a STRING label can be reused as a name; a ReactNode may be a whole row with\n  // its own interactive \"?\" hint in it, and naming a button with that reads the hint\n  // out as part of the field's name.\n  const named = typeof label === \"string\";\n  // The sheet's open flag. Only the phone branch owns one: on desktop `Popover` owns\n  // it, so the two can never disagree about what is on screen.\n  const [sheetOpen, setSheetOpen] = useState(false);\n  const sheetTriggerRef = useRef<HTMLButtonElement>(null);\n  const closeSheet = () => setSheetOpen(false);\n  const sheetLabels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS);\n  const sheetFrame: PanelFrame = (body, actions) => (\n    <FullBleedDialog\n      open\n      onClose={closeSheet}\n      // The same id the popover panel wears, so the trigger's `aria-controls` holds in\n      // both presentations; named the way the popover is.\n      id={panelId}\n      aria-label={panelLabel}\n      header={panelLabel}\n      // `pickerSheet.close`: the one \"close this full-screen picker\" string the kit\n      // already translates, rather than a second key saying the same thing.\n      closeLabel={sheetLabels.close}\n      backCloses={sheetBackCloses}\n      dir={dir}\n      // Portalled to <body>, the sheet is not inside the field's wrapper, so a\n      // document-level \"outside click\" listener — a Popover or dropdown this field\n      // sits in — would read a tap on a day as outside and unmount the cell before\n      // its click (Keksdose dev#477, the fix `PickerSheet` carries).\n      onMouseDown={(e) => e.stopPropagation()}\n      footer={actions}\n    >\n      {body}\n    </FullBleedDialog>\n  );\n  const fieldTrigger = ({\n    open,\n    toggle,\n    ref,\n  }: {\n    open: boolean;\n    toggle: () => void;\n    ref: RefObject<HTMLButtonElement | null>;\n  }) => (\n    <DateFieldTrigger\n      open={open}\n      toggle={() => {\n        setDir(dirOf(rootRef.current));\n        toggle();\n      }}\n      triggerRef={ref}\n      triggerText={triggerText}\n      hasValue={hasValue}\n      // ALWAYS a name reference, never `undefined`. A `<button>` takes its\n      // accessible name from its contents, so an unlabelled trigger used to\n      // announce its own date text for free. `role=\"combobox\"` does not —\n      // content is excluded from name computation for that role — so leaving\n      // this undefined made an unlabelled date field announce nothing at all.\n      // Named: \"label, value\". Unnamed: the value alone, which is what the\n      // button was saying before.\n      //\n      // A caller's own reference comes first. And when the caller gives the field\n      // an `id` (so an external `<label htmlFor>` can point at it), the trigger\n      // lists ITSELF first: a self-reference in `aria-labelledby` is resolved\n      // from the element's native label (accname 2B → 2D), so \"Due date\" from\n      // that <label> is spoken before the value, instead of being overridden.\n      labelledBy={[\n        aria[\"aria-labelledby\"],\n        named ? labelId : !aria[\"aria-labelledby\"] && aria.id ? aria.id : undefined,\n        valueId,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      aria={aria}\n      panelId={panelId}\n      valueId={valueId}\n      padded={label !== undefined}\n      disabled={disabled}\n      locked={locked}\n      invalid={invalid}\n      required={ariaRequired}\n      renderTrigger={renderTrigger}\n      fieldRef={toTrigger}\n    />\n  );\n  return (\n    // The caller's attributes land here, on the field's own box — the trigger inside is\n    // named by `aria-labelledby` and must keep the id pair it is given.\n    // At Large a labelled box is a grid: the label above, the calendar glyph and the\n    // clear × measured against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).\n    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", label !== undefined && LABEL_ABOVE_BOX, className)}>\n      {label !== undefined && <FieldLabelLine label={label} hint={labelHint} />}\n      {/* The visible FieldLabel is a plain span, not a `<label htmlFor>`, so it names\n          nothing on its own — this hidden twin is what the trigger is named by.\n          `aria-hidden` because a name reference reads a hidden element deliberately\n          (accname §4.3.1), and without it the label would be announced twice: once as\n          loose text before the button, once inside the button's own name.\n          `sr-only-fixed` rather than `sr-only` — see the note on the class in\n          tokens.css. */}\n      {named && (\n        <span id={labelId} aria-hidden className=\"sr-only-fixed\">\n          {label}\n        </span>\n      )}\n      {sheet ? (\n        <>\n          {fieldTrigger({ open: sheetOpen, toggle: () => setSheetOpen((v) => !v), ref: sheetTriggerRef })}\n          {/* Mounted only while open, like the popover's children: the panel's draft is\n              born with it, so every open starts again from the committed value. */}\n          {sheetOpen && children(closeSheet, sheetFrame)}\n        </>\n      ) : (\n        <Popover\n          width={width}\n          panelId={panelId}\n          // Named for what it is. Unnamed, it fell back to `popover.panel`, and a date\n          // field announced its calendar as \"Popover\" — in English, in every language.\n          labels={{ panel: panelLabel }}\n          dir={dir}\n          trigger={fieldTrigger}\n        >\n          {(close) => children(close, popoverFrame)}\n        </Popover>\n      )}\n      {showClear ? (\n        <button\n          type=\"button\"\n          aria-label={clearLabel}\n          onClick={() => {\n            onClear();\n            // The × goes with the value, so a keyboard clear left the focus on a button\n            // that was about to unmount — and it fell to <body> (refactor audit\n            // 2026-10-30, INP-10). The trigger, as SearchField's clear does.\n            triggerEl.current?.focus();\n          }}\n          className=\"absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-placeholder hover:text-secondary\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      ) : (\n        <Calendar\n          aria-hidden\n          className=\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\"\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * The picker's own label props, folded into one `datePicker` override so they sit at\n * the top of the same precedence chain as everything else: prop > provider > English.\n * They predate the provider and stay public API, which is why they are not simply\n * replaced by a `labels` prop.\n */\nexport function useDatePickerLabels(\n  clearLabel: string | undefined,\n  stepLabels: { prev: string; next: string } | undefined,\n  todayLabel: string | undefined,\n): DatePickerLabels {\n  const prev = stepLabels?.prev;\n  const next = stepLabels?.next;\n  const fromProps = useMemo(() => {\n    const out: Partial<DatePickerLabels> = {};\n    if (clearLabel !== undefined) out.clear = clearLabel;\n    if (prev !== undefined) out.previousDay = prev;\n    if (next !== undefined) out.nextDay = next;\n    if (todayLabel !== undefined) out.today = todayLabel;\n    return out;\n  }, [clearLabel, prev, next, todayLabel]);\n  return useKitLabels(\"datePicker\", DEFAULT_DATE_PICKER_LABELS, fromProps);\n}\n\n/**\n * The caller's `hint` when it has no label line to ride: at the end of the field,\n * outside the box, as an unlabelled {@link Select} places its FieldHint (0.15.5 P8).\n */\nexport function withEndHint(field: ReactNode, hint: ReactNode): ReactNode {\n  if (hint === undefined) return field;\n  return (\n    <div className=\"flex items-center gap-1.5\">\n      <div className=\"min-w-0 flex-1\">{field}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,7 +2,7 @@ import type { CommitScope } from "./write-lock.js";
 import { type DatePickerBaseProps } from "./date-field.js";
 export type { DateTriggerAttributes } from "./date-field.js";
 export { DateRangePicker } from "./date-range-picker.js";
-export type { DateRangeCommit, DateRangeDraftSummary, DateRangePickerPreset, DateRangePickerProps, DateRangeTriggerRenderProps, } from "./date-range-picker.js";
+export type { DateRangeDraftSummary, DateRangePickerPreset, DateRangePickerProps, DateRangeTriggerRenderProps, } from "./date-range-picker.js";
 export interface DatePickerProps extends DatePickerBaseProps {
     /** ISO "YYYY-MM-DD", or "" for empty. */
     value: string;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { CalendarClock, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { addDaysIso } from \"../lib/dates\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport { FIELD_BASE } from \"./field-base\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport { Tooltip } from \"./tooltip\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DateField, useDatePickerLabels, useTriggerFormat, withEndHint, type DatePickerBaseProps } from \"./date-field\";\nimport { PanelCalendar } from \"./jump-calendar\";\n// The shared field, the month-jump calendar and the range picker live in date-field.tsx,\n// jump-calendar.tsx and date-range-picker.tsx (MOD-9); their public names are still this\n// module's, so the barrel exports them as before.\nexport type { DateTriggerAttributes } from \"./date-field\";\nexport { DateRangePicker } from \"./date-range-picker\";\nexport type {\n  DateRangeCommit,\n  DateRangeDraftSummary,\n  DateRangePickerPreset,\n  DateRangePickerProps,\n  DateRangeTriggerRenderProps,\n} from \"./date-range-picker\";\n\n/**\n * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px\n * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line\n * on its own, whole and with all four corners, and the buttons share the line under it\n * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone\n * they left the field 84 px — \"Book… 0\" for \"Booking date 07/09/2026\" — where a 360 px\n * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,\n * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.\n */\nconst STEP_ROW_STACK_AT_LARGE = cn(\n  \"large:max-sm:flex-wrap large:max-sm:gap-y-2\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md\",\n  // The buttons (each in its tooltip's wrapper) share the line under the field.\n  \"large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full\",\n);\n\n// The focused part of the ‹ date › (today) row framed 2px wide, not 1 (keksdose live\n// #394, fourth round; kk K5). The row raises the focused part over the neighbour it\n// overlaps (`[&>*:focus-within]:z-20`), so all four of its sides are its own brand\n// border — but at a fractional device-pixel ratio a 1px line covers 1.25 device pixels\n// (at 125 %), and on whichever sides fall across a pixel boundary it is spread over two\n// pixels at partial strength: ‹'s left side and the date field's right read grey beside\n// the crisp ones (dark theme, measured: 82,87,146 against 139,147,248).\n//\n// A 1px INSET ring in the focus colour beside the 1px border doubles the line inward, so\n// every side keeps at least one fully covered device pixel at any scale — FIELD_INVALID's\n// border-plus-ring, for the same reason (live #295). A box-shadow, and inset: nothing\n// outside the part moves or is covered. `focus`, not `focus-visible`, as the row's\n// raise: a tap focuses too.\n//\n// 0.34 drew it here, on the parts — `focus:ring-1 focus:ring-inset` on each step and\n// `[&_[role=combobox]:focus]:…` from the row — and the K5 follow-up then moved that very\n// ring into FIELD_BASE for every field (keksdose run 78). Each part of this row is\n// FIELD_BASE, the steps directly and the trigger through FIELD_TRIGGER, so the copies went\n// (round 0.34 Wave 2). Not on every button in the row: keksdose's local fix\n// (`[&_button:focus]:ring-1 [&_button:focus]:ring-inset` on the row) also reached the\n// label's \"?\" and thinned its 2px focus frame to 1.\n\n/**\n * One ‹ / › day-step (or today) button, sized to sit flush beside the field.\n *\n * Two kinds of \"cannot\" (refactor audit 2026-10-30, INP-4). `off` is natively `disabled`,\n * out of the tab order: the field is `disabled`, or empty with nothing to step from — no\n * press of these buttons gets there, so the focus is never on one as it turns. `refused`\n * is `aria-disabled` with a click that does nothing, JumpCalendar's rule: › pressed onto\n * `max`, ‹ onto `min` and Today onto today are refused by the very press the focus is on,\n * and a focused button that turns `disabled` drops the focus to <body>, mid-form\n * (keksdose's shared date field passes `step` and `today` in 14 files). A lock refuses\n * too, and the lock's reason describes the button.\n */\nfunction StepButton({\n  icon: Icon,\n  label,\n  off,\n  refused,\n  reasonId,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  off: boolean;\n  refused: boolean;\n  /** While locked: the id of the lock's reason, which the row's frame shows. */\n  reasonId?: string;\n  onClick: () => void;\n  /** Flip the icon in RTL — for the ‹ › day steps, whose \"previous\" points to the\n   *  reading start. Not for the today icon, which has no direction. */\n  mirror?: boolean;\n  /** The button's corners in the joined group (see DatePicker). */\n  className?: string;\n}) {\n  const button = (\n    <button\n      type=\"button\"\n      aria-label={label}\n      disabled={off}\n      aria-disabled={(!off && refused) || undefined}\n      aria-describedby={reasonId}\n      onClick={() => {\n        if (!refused) onClick();\n      }}\n      className={cn(\n        FIELD_BASE,\n        // FIELD_BASE is `block w-full` for text inputs; a step button is neither, and\n        // px-3 would make it wider than it needs to be. twMerge lets these win.\n        \"relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-muted\",\n        \"hover:bg-hover hover:text-secondary\",\n        // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border\n        // included — faded out of the group and read as a broken, detached control. The\n        // same look for the focusable kind (INP-4).\n        \"disabled:cursor-not-allowed disabled:text-placeholder disabled:opacity-60 disabled:hover:bg-surface\",\n        \"aria-disabled:cursor-not-allowed aria-disabled:text-placeholder aria-disabled:opacity-60 aria-disabled:hover:bg-surface\",\n        // A part of a joined row: FIELD_BASE's 2px focus line, whole at 125 % (K5, the\n        // note above this function).\n        className,\n      )}\n    >\n      <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\n    </button>\n  );\n  // Locked, the row's frame holds the reason's bubble; a name bubble of its own as well\n  // would be two on one hover (IconButton drops its own the same way). The wrapper stays\n  // — STEP_ROW_STACK_AT_LARGE lays the buttons out by it.\n  if (reasonId) return <span className=\"relative inline-flex\">{button}</span>;\n  return (\n    <Tooltip label={label} portal>\n      {button}\n    </Tooltip>\n  );\n}\n\nexport interface DatePickerProps extends DatePickerBaseProps {\n  /** ISO \"YYYY-MM-DD\", or \"\" for empty. */\n  value: string;\n  onChange: (iso: string) => void;\n  /**\n   * Flank the field with ‹ › buttons that move the value one day. For fields whose\n   * typical edit is a day or two — opening a calendar to go \"yesterday\" is three\n   * interactions for what should be one. A button whose day is outside `min` / `max` is\n   * refused (`aria-disabled`, still focusable — 0.52); with no value both are disabled.\n   *\n   * Off by default: on a filter or a far-away date the buttons are dead weight, and\n   * they cost ~5rem of width that a narrow layout may not have.\n   */\n  step?: boolean;\n  /** Accessible names for the step buttons. Optional: they resolve from\n   *  `datePicker.previousDay` / `nextDay` in `<UiKitProvider labels>`, then from the\n   *  English defaults. This prop wins over both, for the one field that says it\n   *  differently. */\n  stepLabels?: { prev: string; next: string };\n  /**\n   * Today's date as ISO \"YYYY-MM-DD\". Adds a jump-to-today button beside the field,\n   * refused once the value already is that day — `aria-disabled`, so the focus stays on\n   * the button that was just pressed (0.52) — and disabled while that day is outside\n   * `min` / `max`.\n   *\n   * Passed in rather than read from a clock here: a component that decides what \"today\"\n   * is cannot be tested at a fixed date, and the consumer already has one definition of\n   * it. The button is always RENDERED — going flat instead of disappearing — because a\n   * control that comes and goes with the value reflows whatever sits beside it, which\n   * is the report this exists to answer.\n   */\n  today?: string;\n  /** Accessible name for the today button; wins over `datePicker.today`. */\n  todayLabel?: string;\n  /**\n   * This picker COMMITS — picking a date saves it (a row's date edited in place, a\n   * filter kept as it moves). Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every kit\n   * control. A date field inside a form with its own Save stays editable under the lock —\n   * leave this off there, and put `commit` on the Save. 0.52 (refactor audit 2026-10-30,\n   * API-3).\n   */\n  commit?: CommitScope;\n}\n\n/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker(props: DatePickerProps) {\n  const {\n    value,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    step,\n    stepLabels,\n    today,\n    todayLabel,\n    className,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    invalid,\n    hint,\n    help,\n    error,\n    // Named so it reaches the field (and so its trigger) when a step/today row is the\n    // root and takes the rest of the caller's props.\n    \"aria-required\": ariaRequired,\n    // The trigger's, wherever the rest go (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = useTriggerFormat(\"datePicker\", locale, formatOptions, formatValue);\n  // The write lock (API-3): Select's — the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const change = (iso: string) => {\n    if (!locked) onChange(iso);\n  };\n  // keksdose K4: the caption and the error under the field, attached to the TRIGGER\n  // (the element a screen reader is on) after any description of the caller's own; a\n  // lock's reason between the two, as on Select.\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    reasonId: locked && lock.reasonId,\n  });\n  // With a step or a today button beside it the field is no longer the outermost\n  // element — the flex row at the bottom is, and a caller's attributes belong on\n  // whichever of the two is actually the root. Naming the shared props rather than\n  // letting `...rest` carry them is what makes that choice possible.\n  const wrapped = Boolean(step || today);\n  const [triggerAria, wrapperRest] = splitTriggerAria(rest);\n  const field = (\n    <DateField\n      // With step/today buttons the flex row is the root and takes the caller's props —\n      // except the ones that name the field, which still belong on its trigger.\n      {...(wrapped ? triggerAria : rest)}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      aria-required={ariaRequired}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      locked={locked}\n      invalid={messages.isInvalid}\n      // In the row, the field fills what the buttons leave and the caller's classes are\n      // the row's — with `today` alone too: dressed on `step` alone, a today-only row put\n      // them on both (refactor audit 2026-10-30, INP-13). Locked, they are the frame's.\n      className={wrapped ? \"min-w-0 flex-1\" : locked ? undefined : className}\n      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own\n      // `data-slot` on a bare field is left alone.\n      {...(wrapped ? { \"data-slot\": \"date-step-field\" } : {})}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => change(\"\")}\n    >\n      {(close) => (\n        <PanelCalendar\n          monthJump={monthJump}\n          mode=\"single\"\n          focusOnOpen\n          from={value}\n          to={value}\n          locale={locale}\n          min={min}\n          max={max}\n          labels={calendarLabels}\n          onSelect={(iso) => {\n            change(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldBox.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const endHint = label === undefined ? messages.labelHint : undefined;\n  // Locked, the field — or the whole row, whose buttons change the value too — sits in\n  // the reason's frame (the line, or the Tooltip), which becomes the outermost box: the\n  // caller's classes move onto it, as on Select, so a lock does not reflow the form.\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (!wrapped) {\n    return (\n      <FieldBox below={messages.below} reserve={reserve}>\n        {withReason(withEndHint(field, endHint))}\n      </FieldBox>\n    );\n  }\n\n  // An empty field has nothing to step from, so both buttons are off until a date is\n  // picked. Bounds are compared as strings: \"YYYY-MM-DD\" sorts chronologically.\n  const target = (days: number) => (value ? addDaysIso(value, days) : \"\");\n  const outOfBounds = (iso: string) => Boolean((min && iso < min) || (max && iso > max));\n  // A lock's reason wins over `disabled`, as on Select: the buttons stay focusable then.\n  const fieldOff = Boolean(disabled) && !locked;\n  const reasonId = locked ? lock.reasonId : undefined;\n  const row = (\n    // ONE joined control, not three boxes in a row: the buttons and the field share\n    // their borders (each piece overlaps the previous by a pixel) and only the outer\n    // ends are rounded — the button-group shape, so ‹ date › reads as one field with\n    // controls rather than a field with loose buttons parked beside it, which is what\n    // the `gap-1` version looked like.\n    //\n    // items-stretch, not items-center: the buttons match the field's height, which\n    // varies with whether it carries a floating label. The field's trigger is nested\n    // inside DateField, so its inner corners are squared from here.\n    <div\n      {...wrapperRest}\n      className={cn(\n        \"flex items-stretch [&>*:not(:first-child)]:-ms-px\",\n        step && \"[&_[role=combobox]]:rounded-s-none\",\n        (step || today) && \"[&_[role=combobox]]:rounded-e-none\",\n        // The PART that is focused, pressed or invalid is raised over the neighbour it\n        // overlaps by a pixel, so its blue (or red) border shows on all four sides\n        // (keksdose live #394). `:focus-within`, not `:focus-visible`: a tap focuses\n        // without it, as does the sheet handing focus back, and the next part — later in\n        // the DOM — painted its grey left edge over the tapped one's right. Raising the\n        // whole part (each is `relative`) keeps the floating label and the icon above\n        // the trigger, which raising the trigger alone covered. Hover raises nothing: it\n        // changes no border, and would let a hovered › cover a focused field's edge.\n        \"[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10\",\n        // …and its line is 2px, so no side of it reads half-strength at 125 % (live #394,\n        // fourth round): FIELD_BASE's inset ring, which every part of the row carries.\n        STEP_ROW_STACK_AT_LARGE,\n        !locked && className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(-1))}\n          reasonId={reasonId}\n          onClick={() => change(target(-1))}\n          className=\"rounded-e-none\"\n        />\n      )}\n      {field}\n      {step && (\n        <StepButton\n          icon={ChevronRight}\n          mirror\n          label={text.nextDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(1))}\n          reasonId={reasonId}\n          onClick={() => change(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        // Refused once the value is today: pressable as a no-op would keep the focus too\n        // (INP-4), and this also says there is nothing to jump to. Today outside the\n        // bounds is `off`: no press here gets there, as MonthPicker's stepper has it — it\n        // was refused, a tab stop that could never do anything (0.52 code review,\n        // date-picker.tsx). A lock wins, focusable, to say why.\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          off={fieldOff || (!locked && outOfBounds(today))}\n          refused={locked || value === today}\n          reasonId={reasonId}\n          onClick={() => change(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n  // Under the whole row, not under the field between the buttons: the message is about\n  // the date, and the steppers are part of how it is entered.\n  return (\n    <FieldBox below={messages.below} reserve={reserve}>\n      {withReason(withEndHint(row, endHint))}\n    </FieldBox>\n  );\n}\n"],"mappings":";AA6HM,cAgNF,YAhNE;AA5HN,SAAS,eAAe,aAAa,oBAAoB;AACzD,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,UAAU,cAAc,kBAAkB,qBAAqB;AACxE,SAAS,eAAe;AAExB,SAAS,WAAW,qBAAqB,kBAAkB,mBAA6C;AACxG,SAAS,qBAAqB;AAK9B,SAAS,uBAAuB;AAkBhC,MAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AACF;AAoCA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAaG;AACD,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,iBAAgB,CAAC,OAAO,WAAY;AAAA,MACpC,oBAAkB;AAAA,MAClB,SAAS,MAAM;AACb,YAAI,CAAC,QAAS,SAAQ;AAAA,MACxB;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA;AAAA;AAAA,QAGA;AAAA,MACF;AAAA,MAEA,8BAAC,QAAK,WAAW,GAAG,UAAU,UAAU,kBAAkB,GAAG;AAAA;AAAA,EAC/D;AAKF,MAAI,SAAU,QAAO,oBAAC,UAAK,WAAU,wBAAwB,kBAAO;AACpE,SACE,oBAAC,WAAQ,OAAc,QAAM,MAC1B,kBACH;AAEJ;AAgDO,SAAS,WAAW,OAAwB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,iBAAiB;AAAA;AAAA,IAEjB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,oBAAoB,YAAY,YAAY,UAAU;AACnE,QAAM,SAAS,iBAAiB,cAAc,QAAQ,eAAe,WAAW;AAEhF,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AACpB,QAAM,SAAS,CAAC,QAAgB;AAC9B,QAAI,CAAC,OAAQ,UAAS,GAAG;AAAA,EAC3B;AAIA,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,MAAM,SAAS,KAAK,YAAY;AAAA,IAChC;AAAA,IACA;AAAA,IACA,aAAa,KAAK,kBAAkB;AAAA,IACpC,aAAa,KAAK,cAAc;AAAA,IAChC,UAAU,UAAU,KAAK;AAAA,EAC3B,CAAC;AAKD,QAAM,UAAU,QAAQ,QAAQ,KAAK;AACrC,QAAM,CAAC,aAAa,WAAW,IAAI,iBAAiB,IAAI;AACxD,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MAGE,GAAI,UAAU,cAAc;AAAA,MAC7B,UAAU;AAAA,MACV,oBAAkB,SAAS;AAAA,MAC3B,iBAAe;AAAA,MACf;AAAA,MACA,WAAW,SAAS;AAAA,MACpB;AAAA,MACA,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,MACjB;AAAA,MACA;AAAA,MACA,SAAS,SAAS;AAAA,MAIlB,WAAW,UAAU,mBAAmB,SAAS,SAAY;AAAA,MAG5D,GAAI,UAAU,EAAE,aAAa,kBAAkB,IAAI,CAAC;AAAA,MACrD,UAAU,QAAQ,KAAK;AAAA,MACvB,aAAa,QAAQ,OAAO,KAAK,IAAK,eAAe;AAAA,MACrD,SAAS,MAAM,OAAO,EAAE;AAAA,MAEvB,WAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,aAAW;AAAA,UACX,MAAM;AAAA,UACN,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,UACR,UAAU,CAAC,QAAQ;AACjB,mBAAO,GAAG;AACV,kBAAM;AAAA,UACR;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAGF,QAAM,UAAU,WAAW,SAAS,UAAU;AAC9C,QAAM,UAAU,UAAU,SAAY,SAAS,YAAY;AAI3D,QAAM,aAAa,CAAC,QAClB,SACE,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAW,GAAG,SAAS,SAAS,GACvF,eACH,IAEA;AAEJ,MAAI,CAAC,SAAS;AACZ,WACE,oBAAC,YAAS,OAAO,SAAS,OAAO,SAC9B,qBAAW,YAAY,OAAO,OAAO,CAAC,GACzC;AAAA,EAEJ;AAIA,QAAM,SAAS,CAAC,SAAkB,QAAQ,WAAW,OAAO,IAAI,IAAI;AACpE,QAAM,cAAc,CAAC,QAAgB,QAAS,OAAO,MAAM,OAAS,OAAO,MAAM,GAAI;AAErF,QAAM,WAAW,QAAQ,QAAQ,KAAK,CAAC;AACvC,QAAM,WAAW,SAAS,KAAK,WAAW;AAC1C,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUJ;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,QAAQ;AAAA,WACP,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UASnB;AAAA;AAAA;AAAA,UAGA;AAAA,UACA,CAAC,UAAU;AAAA,QACb;AAAA,QAEC;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAM;AAAA,cACN,OAAO,KAAK;AAAA,cACZ,KAAK,YAAY,CAAC;AAAA,cAClB,SAAS,UAAU,YAAY,OAAO,EAAE,CAAC;AAAA,cACzC;AAAA,cACA,SAAS,MAAM,OAAO,OAAO,EAAE,CAAC;AAAA,cAChC,WAAU;AAAA;AAAA,UACZ;AAAA,UAED;AAAA,UACA,QACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,QAAM;AAAA,cACN,OAAO,KAAK;AAAA,cACZ,KAAK,YAAY,CAAC;AAAA,cAClB,SAAS,UAAU,YAAY,OAAO,CAAC,CAAC;AAAA,cACxC;AAAA,cACA,SAAS,MAAM,OAAO,OAAO,CAAC,CAAC;AAAA,cAC/B,WAAW,GAAG,kBAAkB,SAAS,gBAAgB;AAAA;AAAA,UAC3D;AAAA,UAED;AAAA;AAAA;AAAA;AAAA;AAAA,UAMC;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,OAAO,KAAK;AAAA,cACZ,KAAK,YAAa,CAAC,UAAU,YAAY,KAAK;AAAA,cAC9C,SAAS,UAAU,UAAU;AAAA,cAC7B;AAAA,cACA,SAAS,MAAM,OAAO,KAAK;AAAA,cAC3B,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IAEJ;AAAA;AAIF,SACE,oBAAC,YAAS,OAAO,SAAS,OAAO,SAC9B,qBAAW,YAAY,KAAK,OAAO,CAAC,GACvC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { CalendarClock, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { addDaysIso } from \"../lib/dates\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport { FIELD_BASE } from \"./field-base\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport { Tooltip } from \"./tooltip\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DateField, useDatePickerLabels, useTriggerFormat, withEndHint, type DatePickerBaseProps } from \"./date-field\";\nimport { PanelCalendar } from \"./jump-calendar\";\n// The shared field, the month-jump calendar and the range picker live in date-field.tsx,\n// jump-calendar.tsx and date-range-picker.tsx (MOD-9); their public names are still this\n// module's, so the barrel exports them as before.\nexport type { DateTriggerAttributes } from \"./date-field\";\nexport { DateRangePicker } from \"./date-range-picker\";\nexport type {\n  DateRangeDraftSummary,\n  DateRangePickerPreset,\n  DateRangePickerProps,\n  DateRangeTriggerRenderProps,\n} from \"./date-range-picker\";\n\n/**\n * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px\n * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line\n * on its own, whole and with all four corners, and the buttons share the line under it\n * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone\n * they left the field 84 px — \"Book… 0\" for \"Booking date 07/09/2026\" — where a 360 px\n * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,\n * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.\n */\nconst STEP_ROW_STACK_AT_LARGE = cn(\n  \"large:max-sm:flex-wrap large:max-sm:gap-y-2\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md\",\n  // The buttons (each in its tooltip's wrapper) share the line under the field.\n  \"large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full\",\n);\n\n// The focused part of the ‹ date › (today) row framed 2px wide, not 1 (keksdose live\n// #394, fourth round; kk K5). The row raises the focused part over the neighbour it\n// overlaps (`[&>*:focus-within]:z-20`), so all four of its sides are its own brand\n// border — but at a fractional device-pixel ratio a 1px line covers 1.25 device pixels\n// (at 125 %), and on whichever sides fall across a pixel boundary it is spread over two\n// pixels at partial strength: ‹'s left side and the date field's right read grey beside\n// the crisp ones (dark theme, measured: 82,87,146 against 139,147,248).\n//\n// A 1px INSET ring in the focus colour beside the 1px border doubles the line inward, so\n// every side keeps at least one fully covered device pixel at any scale — FIELD_INVALID's\n// border-plus-ring, for the same reason (live #295). A box-shadow, and inset: nothing\n// outside the part moves or is covered. `focus`, not `focus-visible`, as the row's\n// raise: a tap focuses too.\n//\n// 0.34 drew it here, on the parts — `focus:ring-1 focus:ring-inset` on each step and\n// `[&_[role=combobox]:focus]:…` from the row — and the K5 follow-up then moved that very\n// ring into FIELD_BASE for every field (keksdose run 78). Each part of this row is\n// FIELD_BASE, the steps directly and the trigger through FIELD_TRIGGER, so the copies went\n// (round 0.34 Wave 2). Not on every button in the row: keksdose's local fix\n// (`[&_button:focus]:ring-1 [&_button:focus]:ring-inset` on the row) also reached the\n// label's \"?\" and thinned its 2px focus frame to 1.\n\n/**\n * One ‹ / › day-step (or today) button, sized to sit flush beside the field.\n *\n * Two kinds of \"cannot\" (refactor audit 2026-10-30, INP-4). `off` is natively `disabled`,\n * out of the tab order: the field is `disabled`, or empty with nothing to step from — no\n * press of these buttons gets there, so the focus is never on one as it turns. `refused`\n * is `aria-disabled` with a click that does nothing, JumpCalendar's rule: › pressed onto\n * `max`, ‹ onto `min` and Today onto today are refused by the very press the focus is on,\n * and a focused button that turns `disabled` drops the focus to <body>, mid-form\n * (keksdose's shared date field passes `step` and `today` in 14 files). A lock refuses\n * too, and the lock's reason describes the button.\n */\nfunction StepButton({\n  icon: Icon,\n  label,\n  off,\n  refused,\n  reasonId,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  off: boolean;\n  refused: boolean;\n  /** While locked: the id of the lock's reason, which the row's frame shows. */\n  reasonId?: string;\n  onClick: () => void;\n  /** Flip the icon in RTL — for the ‹ › day steps, whose \"previous\" points to the\n   *  reading start. Not for the today icon, which has no direction. */\n  mirror?: boolean;\n  /** The button's corners in the joined group (see DatePicker). */\n  className?: string;\n}) {\n  const button = (\n    <button\n      type=\"button\"\n      aria-label={label}\n      disabled={off}\n      aria-disabled={(!off && refused) || undefined}\n      aria-describedby={reasonId}\n      onClick={() => {\n        if (!refused) onClick();\n      }}\n      className={cn(\n        FIELD_BASE,\n        // FIELD_BASE is `block w-full` for text inputs; a step button is neither, and\n        // px-3 would make it wider than it needs to be. twMerge lets these win.\n        \"relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-muted\",\n        \"hover:bg-hover hover:text-secondary\",\n        // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border\n        // included — faded out of the group and read as a broken, detached control. The\n        // same look for the focusable kind (INP-4).\n        \"disabled:cursor-not-allowed disabled:text-placeholder disabled:opacity-60 disabled:hover:bg-surface\",\n        \"aria-disabled:cursor-not-allowed aria-disabled:text-placeholder aria-disabled:opacity-60 aria-disabled:hover:bg-surface\",\n        // A part of a joined row: FIELD_BASE's 2px focus line, whole at 125 % (K5, the\n        // note above this function).\n        className,\n      )}\n    >\n      <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\n    </button>\n  );\n  // Locked, the row's frame holds the reason's bubble; a name bubble of its own as well\n  // would be two on one hover (IconButton drops its own the same way). The wrapper stays\n  // — STEP_ROW_STACK_AT_LARGE lays the buttons out by it.\n  if (reasonId) return <span className=\"relative inline-flex\">{button}</span>;\n  return (\n    <Tooltip label={label} portal>\n      {button}\n    </Tooltip>\n  );\n}\n\nexport interface DatePickerProps extends DatePickerBaseProps {\n  /** ISO \"YYYY-MM-DD\", or \"\" for empty. */\n  value: string;\n  onChange: (iso: string) => void;\n  /**\n   * Flank the field with ‹ › buttons that move the value one day. For fields whose\n   * typical edit is a day or two — opening a calendar to go \"yesterday\" is three\n   * interactions for what should be one. A button whose day is outside `min` / `max` is\n   * refused (`aria-disabled`, still focusable — 0.52); with no value both are disabled.\n   *\n   * Off by default: on a filter or a far-away date the buttons are dead weight, and\n   * they cost ~5rem of width that a narrow layout may not have.\n   */\n  step?: boolean;\n  /** Accessible names for the step buttons. Optional: they resolve from\n   *  `datePicker.previousDay` / `nextDay` in `<UiKitProvider labels>`, then from the\n   *  English defaults. This prop wins over both, for the one field that says it\n   *  differently. */\n  stepLabels?: { prev: string; next: string };\n  /**\n   * Today's date as ISO \"YYYY-MM-DD\". Adds a jump-to-today button beside the field,\n   * refused once the value already is that day — `aria-disabled`, so the focus stays on\n   * the button that was just pressed (0.52) — and disabled while that day is outside\n   * `min` / `max`.\n   *\n   * Passed in rather than read from a clock here: a component that decides what \"today\"\n   * is cannot be tested at a fixed date, and the consumer already has one definition of\n   * it. The button is always RENDERED — going flat instead of disappearing — because a\n   * control that comes and goes with the value reflows whatever sits beside it, which\n   * is the report this exists to answer.\n   */\n  today?: string;\n  /** Accessible name for the today button; wins over `datePicker.today`. */\n  todayLabel?: string;\n  /**\n   * This picker COMMITS — picking a date saves it (a row's date edited in place, a\n   * filter kept as it moves). Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every kit\n   * control. A date field inside a form with its own Save stays editable under the lock —\n   * leave this off there, and put `commit` on the Save. 0.52 (refactor audit 2026-10-30,\n   * API-3).\n   */\n  commit?: CommitScope;\n}\n\n/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker(props: DatePickerProps) {\n  const {\n    value,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    step,\n    stepLabels,\n    today,\n    todayLabel,\n    className,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    invalid,\n    hint,\n    help,\n    error,\n    // Named so it reaches the field (and so its trigger) when a step/today row is the\n    // root and takes the rest of the caller's props.\n    \"aria-required\": ariaRequired,\n    // The trigger's, wherever the rest go (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = useTriggerFormat(\"datePicker\", locale, formatOptions, formatValue);\n  // The write lock (API-3): Select's — the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const change = (iso: string) => {\n    if (!locked) onChange(iso);\n  };\n  // keksdose K4: the caption and the error under the field, attached to the TRIGGER\n  // (the element a screen reader is on) after any description of the caller's own; a\n  // lock's reason between the two, as on Select.\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    reasonId: locked && lock.reasonId,\n  });\n  // With a step or a today button beside it the field is no longer the outermost\n  // element — the flex row at the bottom is, and a caller's attributes belong on\n  // whichever of the two is actually the root. Naming the shared props rather than\n  // letting `...rest` carry them is what makes that choice possible.\n  const wrapped = Boolean(step || today);\n  const [triggerAria, wrapperRest] = splitTriggerAria(rest);\n  const field = (\n    <DateField\n      // With step/today buttons the flex row is the root and takes the caller's props —\n      // except the ones that name the field, which still belong on its trigger.\n      {...(wrapped ? triggerAria : rest)}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      aria-required={ariaRequired}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      locked={locked}\n      invalid={messages.isInvalid}\n      // In the row, the field fills what the buttons leave and the caller's classes are\n      // the row's — with `today` alone too: dressed on `step` alone, a today-only row put\n      // them on both (refactor audit 2026-10-30, INP-13). Locked, they are the frame's.\n      className={wrapped ? \"min-w-0 flex-1\" : locked ? undefined : className}\n      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own\n      // `data-slot` on a bare field is left alone.\n      {...(wrapped ? { \"data-slot\": \"date-step-field\" } : {})}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => change(\"\")}\n    >\n      {(close) => (\n        <PanelCalendar\n          monthJump={monthJump}\n          mode=\"single\"\n          focusOnOpen\n          from={value}\n          to={value}\n          locale={locale}\n          min={min}\n          max={max}\n          labels={calendarLabels}\n          onSelect={(iso) => {\n            change(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldBox.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const endHint = label === undefined ? messages.labelHint : undefined;\n  // Locked, the field — or the whole row, whose buttons change the value too — sits in\n  // the reason's frame (the line, or the Tooltip), which becomes the outermost box: the\n  // caller's classes move onto it, as on Select, so a lock does not reflow the form.\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (!wrapped) {\n    return (\n      <FieldBox below={messages.below} reserve={reserve}>\n        {withReason(withEndHint(field, endHint))}\n      </FieldBox>\n    );\n  }\n\n  // An empty field has nothing to step from, so both buttons are off until a date is\n  // picked. Bounds are compared as strings: \"YYYY-MM-DD\" sorts chronologically.\n  const target = (days: number) => (value ? addDaysIso(value, days) : \"\");\n  const outOfBounds = (iso: string) => Boolean((min && iso < min) || (max && iso > max));\n  // A lock's reason wins over `disabled`, as on Select: the buttons stay focusable then.\n  const fieldOff = Boolean(disabled) && !locked;\n  const reasonId = locked ? lock.reasonId : undefined;\n  const row = (\n    // ONE joined control, not three boxes in a row: the buttons and the field share\n    // their borders (each piece overlaps the previous by a pixel) and only the outer\n    // ends are rounded — the button-group shape, so ‹ date › reads as one field with\n    // controls rather than a field with loose buttons parked beside it, which is what\n    // the `gap-1` version looked like.\n    //\n    // items-stretch, not items-center: the buttons match the field's height, which\n    // varies with whether it carries a floating label. The field's trigger is nested\n    // inside DateField, so its inner corners are squared from here.\n    <div\n      {...wrapperRest}\n      className={cn(\n        \"flex items-stretch [&>*:not(:first-child)]:-ms-px\",\n        step && \"[&_[role=combobox]]:rounded-s-none\",\n        (step || today) && \"[&_[role=combobox]]:rounded-e-none\",\n        // The PART that is focused, pressed or invalid is raised over the neighbour it\n        // overlaps by a pixel, so its blue (or red) border shows on all four sides\n        // (keksdose live #394). `:focus-within`, not `:focus-visible`: a tap focuses\n        // without it, as does the sheet handing focus back, and the next part — later in\n        // the DOM — painted its grey left edge over the tapped one's right. Raising the\n        // whole part (each is `relative`) keeps the floating label and the icon above\n        // the trigger, which raising the trigger alone covered. Hover raises nothing: it\n        // changes no border, and would let a hovered › cover a focused field's edge.\n        \"[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10\",\n        // …and its line is 2px, so no side of it reads half-strength at 125 % (live #394,\n        // fourth round): FIELD_BASE's inset ring, which every part of the row carries.\n        STEP_ROW_STACK_AT_LARGE,\n        !locked && className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(-1))}\n          reasonId={reasonId}\n          onClick={() => change(target(-1))}\n          className=\"rounded-e-none\"\n        />\n      )}\n      {field}\n      {step && (\n        <StepButton\n          icon={ChevronRight}\n          mirror\n          label={text.nextDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(1))}\n          reasonId={reasonId}\n          onClick={() => change(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        // Refused once the value is today: pressable as a no-op would keep the focus too\n        // (INP-4), and this also says there is nothing to jump to. Today outside the\n        // bounds is `off`: no press here gets there, as MonthPicker's stepper has it — it\n        // was refused, a tab stop that could never do anything (0.52 code review,\n        // date-picker.tsx). A lock wins, focusable, to say why.\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          off={fieldOff || (!locked && outOfBounds(today))}\n          refused={locked || value === today}\n          reasonId={reasonId}\n          onClick={() => change(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n  // Under the whole row, not under the field between the buttons: the message is about\n  // the date, and the steppers are part of how it is entered.\n  return (\n    <FieldBox below={messages.below} reserve={reserve}>\n      {withReason(withEndHint(row, endHint))}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/date-range-picker.d.ts

@@ -20,16 +20,6 @@ export interface DateRangePickerPreset {
     from: string;
     to: string;
 }
-/**
- * The 0.x values of DateRangePicker's `commit`, when it was the panel's mode:
- * `"immediate"` is `apply` left out, `"apply"` is `apply`. See
- * {@link DateRangePickerProps.apply}.
- *
- * @deprecated 0.52 — DateRangePicker's `apply` (`commit="apply"` → `apply`, `"immediate"`
- * → nothing); removed in 0.53. `commit` is the write lock's opt-in on every other kit
- * control, and since 0.52 on this one too (refactor audit 2026-10-30, API-3).
- */
-export type DateRangeCommit = "immediate" | "apply";
 export interface DateRangePickerProps extends DatePickerBaseProps {
     from: string;
     to: string;
@@ -68,8 +58,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      *    must never escape the panel.
      *
      * `commit="apply"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write
-     * lock's prop on every other kit control. The old spelling still works for 0.52 and
-     * goes in 0.53 ({@link DateRangeCommit}); `apply` wins where both are given.
+     * lock's prop on every other kit control. The old spelling went in 0.53.
      */
     apply?: boolean;
     /**
@@ -79,12 +68,10 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with
      * its own Save stays editable under the lock — leave this off there.
      *
-     * The strings `"immediate"` and `"apply"` are the panel's mode, the 0.x meaning of this
-     * prop: deprecated, read as `apply` for one minor, removed in 0.53 — see
-     * {@link DateRangeCommit}. They cannot be taken for a scope, which is a boolean or an
-     * object.
+     * The strings `"immediate"` and `"apply"`, the panel's mode in 0.x, went in 0.53
+     * (deprecated in 0.52): `apply` is the mode.
      */
-    commit?: CommitScope | DateRangeCommit;
+    commit?: CommitScope;
     /**
      * Draw the trigger yourself. keksdose's report range field
      * (reports/report-range-field.tsx, "Why this is app-level") is why: its trigger

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

@@ -189,8 +189,8 @@ function DateRangePicker(props) {
   const locale = useKitLocale(localeProp);
   const text = useDatePickerLabels(clearLabel, void 0, void 0);
   const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
-  const drafting = apply ?? commit === "apply";
-  const lock = useLockReason(typeof commit === "string" ? void 0 : commit, disabledReason);
+  const drafting = apply ?? false;
+  const lock = useLockReason(commit, disabledReason);
   const locked = lock.locked;
   const messages = useFieldMessages({
     hint,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `apply` drafts, a custom\n// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\n/**\n * The 0.x values of DateRangePicker's `commit`, when it was the panel's mode:\n * `\"immediate\"` is `apply` left out, `\"apply\"` is `apply`. See\n * {@link DateRangePickerProps.apply}.\n *\n * @deprecated 0.52 — DateRangePicker's `apply` (`commit=\"apply\"` → `apply`, `\"immediate\"`\n * → nothing); removed in 0.53. `commit` is the write lock's opt-in on every other kit\n * control, and since 0.52 on this one too (refactor audit 2026-10-30, API-3).\n */\nexport type DateRangeCommit = \"immediate\" | \"apply\";\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …).\n   *  `readonly` since 0.52 (API-7): the picker never changes the list. */\n  presets?: readonly DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /**\n   * When the picker hands its range to `onChange`.\n   *\n   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and\n   *    each calendar click is reported as it happens — the half-made `(from, \"\")`\n   *    included. The right shape for quick ranges on a filter, where one click is one\n   *    answer.\n   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n   *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n   *    exist. Cancel, Escape and an outside click discard the draft, and every open\n   *    starts again from the committed value. keksdose's report range asked for exactly\n   *    this: each commit there re-runs a whole page of charts, so an intermediate state\n   *    must never escape the panel.\n   *\n   * `commit=\"apply\"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write\n   * lock's prop on every other kit control. The old spelling still works for 0.52 and\n   * goes in 0.53 ({@link DateRangeCommit}); `apply` wins where both are given.\n   */\n  apply?: boolean;\n  /**\n   * This picker COMMITS — picking a range saves it (a report's period kept per user, a\n   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked\n   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every\n   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with\n   * its own Save stays editable under the lock — leave this off there.\n   *\n   * The strings `\"immediate\"` and `\"apply\"` are the panel's mode, the 0.x meaning of this\n   * prop: deprecated, read as `apply` for one minor, removed in 0.53 — see\n   * {@link DateRangeCommit}. They cannot be taken for a scope, which is a boolean or an\n   * object.\n   */\n  commit?: CommitScope | DateRangeCommit;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `apply`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored without `apply`, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `apply` can keep its draft in state that\n * is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  drafting,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  /** `apply`: the panel works on a draft. */\n  drafting: boolean;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`\n *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    apply,\n    commit,\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    invalid,\n    hint,\n    help,\n    error,\n    className,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  // `commit` is two props until 0.53: a string is the deprecated mode, anything else\n  // the write lock's scope (API-3).\n  const drafting = apply ?? commit === \"apply\";\n  const lock = useLockReason(typeof commit === \"string\" ? undefined : commit, disabledReason);\n  const locked = lock.locked;\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    // A lock's reason between the caption and the error, as on Select.\n    reasonId: locked && lock.reasonId,\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    if (locked) return;\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      locked={locked}\n      // Locked, the caller's classes are the reason's frame's (below).\n      className={locked ? undefined : className}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          drafting={drafting}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {locked ? (\n        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy\n        // for `aria-describedby`; the outermost box, so it takes the caller's classes.\n        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n          {box}\n        </LockedReason>\n      ) : (\n        box\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `apply` drafts, a custom\n// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …).\n   *  `readonly` since 0.52 (API-7): the picker never changes the list. */\n  presets?: readonly DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /**\n   * When the picker hands its range to `onChange`.\n   *\n   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and\n   *    each calendar click is reported as it happens — the half-made `(from, \"\")`\n   *    included. The right shape for quick ranges on a filter, where one click is one\n   *    answer.\n   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n   *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n   *    exist. Cancel, Escape and an outside click discard the draft, and every open\n   *    starts again from the committed value. keksdose's report range asked for exactly\n   *    this: each commit there re-runs a whole page of charts, so an intermediate state\n   *    must never escape the panel.\n   *\n   * `commit=\"apply\"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write\n   * lock's prop on every other kit control. The old spelling went in 0.53.\n   */\n  apply?: boolean;\n  /**\n   * This picker COMMITS — picking a range saves it (a report's period kept per user, a\n   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked\n   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every\n   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with\n   * its own Save stays editable under the lock — leave this off there.\n   *\n   * The strings `\"immediate\"` and `\"apply\"`, the panel's mode in 0.x, went in 0.53\n   * (deprecated in 0.52): `apply` is the mode.\n   */\n  commit?: CommitScope;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `apply`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored without `apply`, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `apply` can keep its draft in state that\n * is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  drafting,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  /** `apply`: the panel works on a draft. */\n  drafting: boolean;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`\n *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    apply,\n    commit,\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    invalid,\n    hint,\n    help,\n    error,\n    className,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  const drafting = apply ?? false;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    // A lock's reason between the caption and the error, as on Select.\n    reasonId: locked && lock.reasonId,\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    if (locked) return;\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      locked={locked}\n      // Locked, the caller's classes are the reason's frame's (below).\n      className={locked ? undefined : className}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          drafting={drafting}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {locked ? (\n        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy\n        // for `aria-describedby`; the outermost box, so it takes the caller's classes.\n        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n          {box}\n        </LockedReason>\n      ) : (\n        box\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/nav-pills.d.ts

@@ -49,7 +49,7 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
      * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
      * them on ONE row that scrolls sideways — faded at a cut edge, the current pill
      * scrolled into view (the row only, never the page) — for a strip that must stay one
-     * line high, as {@link SectionNav} under a page title on a phone.
+     * line high, as a section's pages under a page title on a phone.
      */
     layout?: "wrap" | "scroll";
     /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,

package/dist/components/nav-pills.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<\n  ComponentPropsWithoutRef<\"nav\">,\n  \"children\" | \"onSelect\"\n> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n  /**\n   * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps\n   * them on ONE row that scrolls sideways — faded at a cut edge, the current pill\n   * scrolled into view (the row only, never the page) — for a strip that must stay one\n   * line high, as {@link SectionNav} under a page title on a phone.\n   */\n  layout?: \"wrap\" | \"scroll\";\n  /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n   *  refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} (which\n * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  layout = \"wrap\",\n  className,\n  ref,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  const scroll = layout === \"scroll\";\n  const listRef = useRef<HTMLUListElement>(null);\n  const fade = useStripFade(listRef);\n  // The current pill into view — the row only, never the page.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const currentPill = list?.querySelector<HTMLElement>(\"[aria-current]\");\n    if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);\n  }, [scroll, current]);\n  return (\n    <Root\n      {...rest}\n      ref={ref as Ref<HTMLDivElement> | undefined}\n      role={landmark ? undefined : \"group\"}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ul\n        ref={listRef}\n        className={cn(\n          \"m-0 flex list-none gap-1 p-0\",\n          scroll ? \"flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]\" : \"flex-wrap\",\n        )}\n        data-overflow={scroll ? fade.overflow : undefined}\n        style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}\n      >\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a\n                href={props.href}\n                className={props.className}\n                aria-current={props[\"aria-current\"]}\n                onClick={props.onClick}\n              >\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className={cn(\"flex\", scroll && \"shrink-0\")}>\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n  value: T;\n  label: ReactNode;\n  /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n   *  that calls `onSelect`. */\n  href?: string;\n  /** A Lucide icon (or any component taking a `className`), before the label. */\n  icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Buttons only — a link cannot be disabled. */\n  disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n *  — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n  \"aria-current\": NavPillsCurrent | undefined;\n  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<\n  ComponentPropsWithoutRef<\"nav\">,\n  \"children\" | \"onSelect\"\n> {\n  items: NavPillItem<T>[];\n  /** The pill that is current. `null` or a value not in `items`: none is. */\n  current: T | null;\n  /** Called with the pill's value on a click — of a button, and of a link too (before\n   *  the router follows it), for a caller that keeps the choice in state as well. */\n  onSelect?: (value: T) => void;\n  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n   *  `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n  renderLink?: (props: NavPillLinkProps) => ReactElement;\n  /** What `aria-current` says on the current pill. Default `page` where the items\n   *  are links and `true` where they are buttons (keksdose's swipe-surface picker\n   *  switches a panel on the same page, which is not a page). */\n  currentType?: NavPillsCurrent;\n  /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n  size?: \"sm\" | \"md\";\n  /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n   *  that is not the page's navigation. Name either with `aria-label`. */\n  landmark?: boolean;\n  /** Classes for every pill. */\n  itemClassName?: string;\n  /**\n   * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps\n   * them on ONE row that scrolls sideways — faded at a cut edge, the current pill\n   * scrolled into view (the row only, never the page) — for a strip that must stay one\n   * line high, as a section's pages under a page title on a phone.\n   */\n  layout?: \"wrap\" | \"scroll\";\n  /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n   *  refactor audit 2026-10). */\n  ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} (which\n * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n  items,\n  current,\n  onSelect,\n  renderLink,\n  currentType,\n  size = \"md\",\n  landmark = true,\n  itemClassName,\n  layout = \"wrap\",\n  className,\n  ref,\n  ...rest\n}: NavPillsProps<T>) {\n  const kitLink = useKitLink();\n  const Root = landmark ? \"nav\" : \"div\";\n  const scroll = layout === \"scroll\";\n  const listRef = useRef<HTMLUListElement>(null);\n  const fade = useStripFade(listRef);\n  // The current pill into view — the row only, never the page.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const currentPill = list?.querySelector<HTMLElement>(\"[aria-current]\");\n    if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);\n  }, [scroll, current]);\n  return (\n    <Root\n      {...rest}\n      ref={ref as Ref<HTMLDivElement> | undefined}\n      role={landmark ? undefined : \"group\"}\n      className={cn(\"min-w-0\", className)}\n    >\n      <ul\n        ref={listRef}\n        className={cn(\n          \"m-0 flex list-none gap-1 p-0\",\n          scroll ? \"flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]\" : \"flex-wrap\",\n        )}\n        data-overflow={scroll ? fade.overflow : undefined}\n        style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}\n      >\n        {items.map((item) => {\n          const isCurrent = item.value === current;\n          const Icon = item.icon;\n          const pillClass = cn(\n            PILL,\n            size === \"sm\" && PILL_SM,\n            isCurrent ? PILL_CURRENT : PILL_IDLE,\n            item.disabled && item.href === undefined && PILL_DISABLED,\n            itemClassName,\n          );\n          const children = (\n            <>\n              {Icon && <Icon aria-hidden />}\n              {item.label}\n            </>\n          );\n          let pill: ReactNode;\n          if (item.href !== undefined) {\n            const props: NavPillLinkProps = {\n              href: item.href,\n              className: pillClass,\n              children,\n              \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n              onClick: () => onSelect?.(item.value),\n            };\n            const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n            pill = renderLink ? (\n              renderLink(props)\n            ) : kit ? (\n              <RenderedKitLink render={kit} props={props} />\n            ) : (\n              <a\n                href={props.href}\n                className={props.className}\n                aria-current={props[\"aria-current\"]}\n                onClick={props.onClick}\n              >\n                {props.children}\n              </a>\n            );\n          } else {\n            pill = (\n              <button\n                type=\"button\"\n                disabled={item.disabled}\n                aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n                onClick={() => onSelect?.(item.value)}\n                className={pillClass}\n              >\n                {children}\n              </button>\n            );\n          }\n          return (\n            <li key={item.value} className={cn(\"flex\", scroll && \"shrink-0\")}>\n              {pill}\n            </li>\n          );\n        })}\n      </ul>\n    </Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart-axes.d.ts

@@ -97,7 +97,7 @@ export declare function anchoredBand(extent: readonly [number, number] | undefin
  * it in its neighbour's colour on each click. Resolving the colours on the full list
  * and filtering after keeps each series in the colour its legend entry shows.
  */
-export declare function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[];
+export declare function visibleSeries<TRow extends object>(series: readonly SeriesChartSeries<TRow>[], hidden: ReadonlySet<string>): SeriesChartSeries<TRow>[];
 /** A finite number, or `undefined` — the only thing a row cell counts as a sample. */
 export declare const finite: (value: unknown) => number | undefined;
 /**