@eifi1/ui-kit 0.9.0 → 0.10.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, ReactNode, RefObject } from \"react\";\nimport { Calendar, CalendarClock, ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { addDaysIso, parseIsoDate } from \"../lib/dates\";\nimport {\n  DEFAULT_DATE_PICKER_LABELS,\n  DEFAULT_PICKER_SHEET_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type DatePickerLabels,\n} from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { Button, FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from \"./ui\";\nimport { FullBleedDialog } from \"./full-bleed-dialog\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { MiniCalendar, type MiniCalendarProps } from \"./mini-calendar\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\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 * below.\n */\ninterface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\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  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  /** Intl options for the trigger's formatted date (default: locale short date). */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /** Render the trigger's text for an ISO date yourself; wins over `formatOptions`.\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  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\n/** Format an ISO date for the trigger. `lib/dates`' `formatIsoDate` insists on a\n *  locale, and here there may be none — no prop and no provider — which `Intl` reads\n *  as \"the runtime's default\", as every other kit formatter does. */\nfunction formatDate(iso: string, locale: string | undefined, options?: Intl.DateTimeFormatOptions) {\n  return parseIsoDate(iso)?.toLocaleDateString(locale, options) ?? \"\";\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  disabled?: boolean;\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 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  invalid,\n  panelId,\n  aria,\n  renderTrigger,\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 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  invalid?: boolean;\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\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 attrs: DateTriggerAttributes = {\n    ref: triggerRef,\n    type: \"button\",\n    disabled,\n    onClick: toggle,\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\":\n      invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined,\n    className: cn(\n      FIELD_TRIGGER,\n      \"pe-9\",\n      padded && FIELD_FLOATING_PAD,\n      disabled && \"cursor-not-allowed opacity-50\",\n      invalid && FIELD_INVALID,\n    ),\n  };\n  if (renderTrigger) return <CustomTrigger render={renderTrigger} attrs={attrs} valueId={valueId} />;\n\n  return (\n    <button {...attrs}>\n      <span id={valueId} className={cn(\"truncate\", !hasValue && \"text-[var(--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 */\ntype 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-[var(--border)] 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 below. */\nfunction DateField({\n  triggerText,\n  hasValue,\n  label,\n  disabled,\n  clearable,\n  clearLabel,\n  panelLabel,\n  className,\n  width,\n  onClear,\n  invalid,\n  sheet = false,\n  sheetBackCloses = true,\n  renderTrigger,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  triggerText: string;\n  hasValue: boolean;\n  label?: ReactNode;\n  disabled?: 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). */\n  width?: number;\n  onClear: () => void;\n  /** Open as a full-screen sheet instead of the popover — the picker decides when\n   *  (below {@link PHONE_QUERY}). */\n  sheet?: boolean;\n  /** The sheet's `FullBleedDialog backCloses`. */\n  sheetBackCloses?: boolean;\n  renderTrigger?: TriggerRenderer;\n  children: (close: () => void, frame: PanelFrame) => ReactNode;\n}) {\n  const showClear = Boolean(clearable && hasValue && !disabled);\n  const [aria, wrapperRest] = splitTriggerAria(rest);\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      invalid={invalid}\n      renderTrigger={renderTrigger}\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    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\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={onClear}\n          className=\"absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--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-[var(--text-placeholder)]\"\n        />\n      )}\n    </div>\n  );\n}\n\n/** One ‹ / › day-step button, sized to sit flush beside the field. */\nfunction StepButton({\n  icon: Icon,\n  label,\n  disabled,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  disabled: boolean;\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  return (\n    <Tooltip label={label} portal>\n      <button\n        type=\"button\"\n        aria-label={label}\n        disabled={disabled}\n        onClick={onClick}\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-[var(--text-muted)]\",\n          \"hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\",\n          // Raised while hovered or focused, so the shared border and the focus ring are\n          // drawn on top of the neighbour they overlap by a pixel.\n          \"hover:z-10 focus-visible:z-10\",\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.\n          \"disabled:cursor-not-allowed disabled:text-[var(--text-placeholder)] disabled:opacity-60 disabled:hover:bg-[var(--bg-surface)]\",\n          className,\n        )}\n      >\n        <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\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.\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   * disabled once the value already is that day.\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\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 */\nfunction 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/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker({\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  label,\n  clearable,\n  clearLabel,\n  disabled,\n  invalid,\n  ...rest\n}: DatePickerProps) {\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = formatValue ?? ((iso: string) => formatDate(iso, locale, formatOptions));\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      label={label}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      invalid={invalid}\n      className={step ? \"min-w-0 flex-1\" : className}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => onChange(\"\")}\n    >\n      {(close) => (\n        <MiniCalendar\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            onChange(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  if (!wrapped) return field;\n\n  // An empty field has nothing to step from, so both buttons are dead until a date\n  // is 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  const blocked = (days: number) => {\n    const next = target(days);\n    if (!next || disabled) return true;\n    return outOfBounds(next);\n  };\n  return (\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        \"[&_[role=combobox]:focus-visible]:relative [&_[role=combobox]:focus-visible]:z-10\",\n        className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          disabled={blocked(-1)}\n          onClick={() => onChange(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          disabled={blocked(1)}\n          onClick={() => onChange(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          disabled={Boolean(disabled) || value === today || outOfBounds(today)}\n          onClick={() => onChange(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n}\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 * When the picker hands its range to `onChange`.\n *\n *  - `\"immediate\"` (the default, and all of 0.7): a preset click commits and closes,\n *    and 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 */\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  presets?: 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  /** See {@link DateRangeCommit}. Default `\"immediate\"`. */\n  commit?: 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   * Below {@link PHONE_QUERY} 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\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={\n        sheet\n          ? \"grid grid-cols-2 gap-0.5\"\n          : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2\"\n      }\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\n                ? \"bg-[var(--bg-active)] font-medium text-[var(--text-primary)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--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 `commit=\"apply\"` can keep its draft in\n * state that 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  commit,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  commit: DateRangeCommit;\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<MiniCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\">;\n  labels: DatePickerLabels;\n}) {\n  const drafting = commit === \"apply\";\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 calendar = (\n    <MiniCalendar\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\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\n *  `commit=\"apply\"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */\nexport function DateRangePicker({\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  commit = \"immediate\",\n  renderTrigger,\n  sheetBackCloses,\n  calendarLabels,\n  label,\n  clearable,\n  clearLabel,\n  disabled,\n  invalid,\n  ...rest\n}: DateRangePickerProps) {\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = formatValue ?? ((iso: string) => formatDate(iso, locale, formatOptions));\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\n    ? to\n      ? `${a}${separator}${b}`\n      : `${a}${separator}…`\n    : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = useMediaQuery(PHONE_QUERY, false);\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\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  return (\n    <DateField\n      {...rest}\n      label={label}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      invalid={invalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? 440 : 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          commit={commit}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels }}\n          labels={text}\n        />\n      )}\n    </DateField>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, ReactNode, RefObject } from \"react\";\nimport { Calendar, CalendarClock, ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { addDaysIso, parseIsoDate } from \"../lib/dates\";\nimport {\n  DEFAULT_DATE_PICKER_LABELS,\n  DEFAULT_PICKER_SHEET_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type DatePickerLabels,\n} from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport type { TriggerAria } from \"./trigger-aria\";\nimport { Button, FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from \"./ui\";\nimport { FullBleedDialog } from \"./full-bleed-dialog\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { MiniCalendar, type MiniCalendarProps } from \"./mini-calendar\";\nimport { Popover } from \"./popover\";\nimport { Tooltip } from \"./tooltip\";\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 * below.\n */\ninterface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\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  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  /** Intl options for the trigger's formatted date (default: locale short date). */\n  formatOptions?: Intl.DateTimeFormatOptions;\n  /** Render the trigger's text for an ISO date yourself; wins over `formatOptions`.\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  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\n/** Format an ISO date for the trigger. `lib/dates`' `formatIsoDate` insists on a\n *  locale, and here there may be none — no prop and no provider — which `Intl` reads\n *  as \"the runtime's default\", as every other kit formatter does. */\nfunction formatDate(iso: string, locale: string | undefined, options?: Intl.DateTimeFormatOptions) {\n  return parseIsoDate(iso)?.toLocaleDateString(locale, options) ?? \"\";\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  disabled?: boolean;\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 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  invalid,\n  panelId,\n  aria,\n  renderTrigger,\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 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  invalid?: boolean;\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\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 attrs: DateTriggerAttributes = {\n    ref: triggerRef,\n    type: \"button\",\n    disabled,\n    onClick: toggle,\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\":\n      invalid || aria[\"aria-invalid\"] === true || aria[\"aria-invalid\"] === \"true\" || undefined,\n    className: cn(\n      FIELD_TRIGGER,\n      \"pe-9\",\n      padded && FIELD_FLOATING_PAD,\n      disabled && \"cursor-not-allowed opacity-50\",\n      invalid && FIELD_INVALID,\n    ),\n  };\n  if (renderTrigger) return <CustomTrigger render={renderTrigger} attrs={attrs} valueId={valueId} />;\n\n  return (\n    <button {...attrs}>\n      <span id={valueId} className={cn(\"truncate\", !hasValue && \"text-[var(--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 */\ntype 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-[var(--border)] 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 below. */\nfunction DateField({\n  triggerText,\n  hasValue,\n  label,\n  disabled,\n  clearable,\n  clearLabel,\n  panelLabel,\n  className,\n  width,\n  onClear,\n  invalid,\n  sheet = false,\n  sheetBackCloses = true,\n  renderTrigger,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  triggerText: string;\n  hasValue: boolean;\n  label?: ReactNode;\n  disabled?: 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). */\n  width?: number;\n  onClear: () => void;\n  /** Open as a full-screen sheet instead of the popover — the picker decides when\n   *  (below {@link PHONE_QUERY}). */\n  sheet?: boolean;\n  /** The sheet's `FullBleedDialog backCloses`. */\n  sheetBackCloses?: boolean;\n  renderTrigger?: TriggerRenderer;\n  children: (close: () => void, frame: PanelFrame) => ReactNode;\n}) {\n  const showClear = Boolean(clearable && hasValue && !disabled);\n  const [aria, wrapperRest] = splitTriggerAria(rest);\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      invalid={invalid}\n      renderTrigger={renderTrigger}\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    <div {...wrapperRest} ref={rootRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\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={onClear}\n          className=\"absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--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-[var(--text-placeholder)]\"\n        />\n      )}\n    </div>\n  );\n}\n\n/** One ‹ / › day-step button, sized to sit flush beside the field. */\nfunction StepButton({\n  icon: Icon,\n  label,\n  disabled,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  disabled: boolean;\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  return (\n    <Tooltip label={label} portal>\n      <button\n        type=\"button\"\n        aria-label={label}\n        disabled={disabled}\n        onClick={onClick}\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-[var(--text-muted)]\",\n          \"hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\",\n          // Raised while hovered or focused, so the shared border and the focus ring are\n          // drawn on top of the neighbour they overlap by a pixel.\n          \"hover:z-10 focus-visible:z-10\",\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.\n          \"disabled:cursor-not-allowed disabled:text-[var(--text-placeholder)] disabled:opacity-60 disabled:hover:bg-[var(--bg-surface)]\",\n          className,\n        )}\n      >\n        <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\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.\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   * disabled once the value already is that day.\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\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 */\nfunction 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/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker({\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  label,\n  clearable,\n  clearLabel,\n  disabled,\n  invalid,\n  ...rest\n}: DatePickerProps) {\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = formatValue ?? ((iso: string) => formatDate(iso, locale, formatOptions));\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      label={label}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      invalid={invalid}\n      className={step ? \"min-w-0 flex-1\" : className}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => onChange(\"\")}\n    >\n      {(close) => (\n        <MiniCalendar\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            onChange(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  if (!wrapped) return field;\n\n  // An empty field has nothing to step from, so both buttons are dead until a date\n  // is 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  const blocked = (days: number) => {\n    const next = target(days);\n    if (!next || disabled) return true;\n    return outOfBounds(next);\n  };\n  return (\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        \"[&_[role=combobox]:focus-visible]:relative [&_[role=combobox]:focus-visible]:z-10\",\n        className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          disabled={blocked(-1)}\n          onClick={() => onChange(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          disabled={blocked(1)}\n          onClick={() => onChange(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          disabled={Boolean(disabled) || value === today || outOfBounds(today)}\n          onClick={() => onChange(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n}\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 * When the picker hands its range to `onChange`.\n *\n *  - `\"immediate\"` (the default, and all of 0.7): a preset click commits and closes,\n *    and 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 */\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  presets?: 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  /** See {@link DateRangeCommit}. Default `\"immediate\"`. */\n  commit?: 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   * Below {@link PHONE_QUERY} 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 `commit=\"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 in `\"immediate\"` mode, 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={\n        sheet\n          ? \"grid grid-cols-2 gap-0.5\"\n          : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2\"\n      }\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\n                ? \"bg-[var(--bg-active)] font-medium text-[var(--text-primary)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--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 `commit=\"apply\"` can keep its draft in\n * state that 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  commit,\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  commit: DateRangeCommit;\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<MiniCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const drafting = commit === \"apply\";\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    <MiniCalendar\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-[var(--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\n *  `commit=\"apply\"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */\nexport function DateRangePicker({\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  commit = \"immediate\",\n  renderTrigger,\n  sheetBackCloses,\n  renderDraftSummary,\n  calendarLabels,\n  label,\n  clearable,\n  clearLabel,\n  disabled,\n  invalid,\n  ...rest\n}: DateRangePickerProps) {\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = formatValue ?? ((iso: string) => formatDate(iso, locale, formatOptions));\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\n    ? to\n      ? `${a}${separator}${b}`\n      : `${a}${separator}…`\n    : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = useMediaQuery(PHONE_QUERY, false);\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\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  return (\n    <DateField\n      {...rest}\n      label={label}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      invalid={invalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? 440 : 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          commit={commit}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/description-list.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-type DescriptionListLayout = "rows" | "cards";
-type DescriptionListDensity = "comfortable" | "compact";
+type DescriptionListLayout = "rows" | "cards" | "stacked";
+type DescriptionListDensity = "comfortable" | "compact" | "tight";
+/** How many columns a `stacked` or `cards` list may use. */
+type DescriptionListColumns = 1 | 2 | 3 | 4 | 5 | 6;
 interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
     /**
      * `rows` (default): term beside detail, a two-column list that stacks the pair
@@ -10,6 +12,10 @@ interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
      * beside a sidebar stacks where it is actually cramped, not where the viewport is.
      * `cards`: a grid of small bordered cards, term above body — keksdose's overview
      * figures, lenkbank's account facts.
+     * `stacked` (0.10.0): a borderless grid, term ABOVE detail, {@link columns} wide —
+     * kastlan's DetailField/DetailGrid and the label-over-value grids of its lease,
+     * invoice, contact and unit preview dialogs. Items can {@link DescriptionItemProps.span}
+     * several columns (a notes field across the whole row).
      */
     layout?: DescriptionListLayout;
     /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of
@@ -17,10 +23,31 @@ interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
      *  term would double the list's height to gain no width. Per item: see
      *  {@link DescriptionItemProps.numeric}. */
     numeric?: boolean;
-    /** `compact` tightens the rhythm for a dense side panel. */
+    /** `compact` tightens the rhythm for a dense side panel. `tight` (0.10.0) is 11px
+     *  type on a 2px rhythm with no rules between rows — keksdose's admin metrics
+     *  breakdowns (metrics-panel's label-left, count-right lists), which are read as a
+     *  block of small print, not scanned row by row. */
     density?: DescriptionListDensity;
     /** `cards` only: the narrowest a card may get before the grid drops a column. */
     minCardWidth?: string;
+    /**
+     * `stacked`: how many columns the grid grows to on a wide pane (default 2), see
+     * {@link STACKED_COLS}. `cards` (0.10.0): the MOST cards per row; the grid still
+     * drops columns below {@link minCardWidth}. keksdose's category editor faked "two
+     * side by side" with `minCardWidth="calc(50% - 0.5rem)"`, which is `columns={2}
+     * minCardWidth="0"` now, without knowing the gap. Ignored by `rows`.
+     */
+    columns?: DescriptionListColumns;
+    /**
+     * The details are sentences, not values: regular weight in the secondary ink.
+     * lenkbank's control explainer cards each carry a paragraph, and at the card's
+     * `font-medium` primary ink a grid of paragraphs reads as a wall of headings — it
+     * spelled `font-normal text-slate-700` into every item. A flag rather than a new
+     * default because every other card list in the apps holds values (dates, figures,
+     * counts) that are not flagged `numeric` and ARE meant to stand out; lightening them
+     * all would not be an improvement. Per item: {@link DescriptionItemProps.prose}.
+     */
+    prose?: boolean;
 }
 /**
  * A real `<dl>` — terms and their details, which is what keksdose's eight and
@@ -39,7 +66,7 @@ interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
  * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly
  * this: styling a pair as a unit (a row, a card) without breaking the list.
  */
-declare function DescriptionList({ layout, numeric, density, minCardWidth, className, style, ...rest }: DescriptionListProps): react.JSX.Element;
+declare function DescriptionList({ layout, numeric, prose, density, minCardWidth, columns, className, style, ...rest }: DescriptionListProps): react.JSX.Element;
 interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** What is described: "Opened", "IBAN", "Net rent". */
     term: ReactNode;
@@ -53,8 +80,18 @@ interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div">, "ch
     numeric?: boolean;
     /** Classes for the `<dd>`. */
     detailClassName?: string;
+    /** This detail is prose (see {@link DescriptionListProps.prose}); overrides the
+     *  list's setting either way. */
+    prose?: boolean;
+    /**
+     * `stacked`: how many columns this item spans, clamped to the list's `columns` and
+     * to however many the pane has room for; `"full"` is the whole row. kastlan's
+     * DetailField `span={2}` for notes and descriptions. `cards`: only `"full"` applies,
+     * because a card grid's column count is not known to CSS ahead of layout.
+     */
+    span?: number | "full";
 }
 /** One term and its detail inside a {@link DescriptionList}. */
-declare function DescriptionItem({ term, children, hint, numeric: numericProp, detailClassName, className, ...rest }: DescriptionItemProps): react.JSX.Element;
+declare function DescriptionItem({ term, children, hint, numeric: numericProp, prose: proseProp, span, detailClassName, className, ...rest }: DescriptionItemProps): react.JSX.Element;
 
-export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListDensity, type DescriptionListLayout, type DescriptionListProps };
+export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListColumns, type DescriptionListDensity, type DescriptionListLayout, type DescriptionListProps };

package/dist/components/description-list.js

@@ -3,52 +3,123 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { cn } from "../lib/cn.js";
 import { FieldHint } from "./ui.js";
-const ListContext = createContext({ layout: "rows", numeric: false, density: "comfortable" });
+const ListContext = createContext({
+  layout: "rows",
+  numeric: false,
+  prose: false,
+  density: "comfortable",
+  columns: 2
+});
+const STACKED_COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @xs:grid-cols-2",
+  3: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3",
+  4: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4",
+  5: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5",
+  6: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5 @6xl:grid-cols-6"
+};
+const STACKED_SPAN = {
+  1: "",
+  2: "@xs:col-span-2",
+  3: "@xs:col-span-2 @xl:col-span-3",
+  4: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4",
+  5: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5",
+  6: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5 @6xl:col-span-6"
+};
+const CARD_GAP = {
+  comfortable: { cls: "gap-3", len: "0.75rem" },
+  compact: { cls: "gap-2", len: "0.5rem" },
+  tight: { cls: "gap-1", len: "0.25rem" }
+};
 function DescriptionList({
   layout = "rows",
   numeric = false,
+  prose = false,
   density = "comfortable",
   minCardWidth = "10rem",
+  columns,
   className,
   style,
   ...rest
 }) {
   const cards = layout === "cards";
-  const grid = cards ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}), 1fr))` } : void 0;
-  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { layout, numeric, density }, children: /* @__PURE__ */ jsx(
+  const stacked = layout === "stacked";
+  const gap = CARD_GAP[density];
+  const track = columns !== void 0 ? `max(${minCardWidth}, (100% - ${columns - 1} * ${gap.len}) / ${columns})` : minCardWidth;
+  const grid = cards ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` } : void 0;
+  const ctx = { layout, numeric, prose, density, columns: columns ?? 2 };
+  const text = density === "tight" ? "text-[11px] leading-4" : density === "compact" ? "text-xs" : "text-sm";
+  if (stacked) {
+    return /* @__PURE__ */ jsx(ListContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: "@container", children: /* @__PURE__ */ jsx(
+      "dl",
+      {
+        ...rest,
+        "data-layout": layout,
+        style,
+        className: cn(
+          "grid",
+          STACKED_COLS[ctx.columns],
+          density === "tight" ? "gap-x-3 gap-y-1" : density === "compact" ? "gap-x-4 gap-y-2" : "gap-x-6 gap-y-4",
+          text,
+          className
+        )
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "dl",
     {
       ...rest,
       "data-layout": layout,
       style: grid ? { ...grid, ...style } : style,
       className: cn(
-        cards ? cn("grid", density === "compact" ? "gap-2" : "gap-3") : "@container divide-y divide-[var(--border)]",
-        density === "compact" ? "text-xs" : "text-sm",
+        cards ? cn("grid", gap.cls) : (
+          // Tight rows carry no rules: at a 2px rhythm a line under every row
+          // turns a block of small print into a ruled table.
+          cn("@container", density !== "tight" && "divide-y divide-[var(--border)]")
+        ),
+        text,
         className
       )
     }
   ) });
 }
-const ROW_PAD = { comfortable: "py-2.5", compact: "py-1.5" };
-const CARD_PAD = { comfortable: "px-3 py-2.5", compact: "px-2.5 py-1.5" };
+const ROW_PAD = {
+  comfortable: "py-2.5",
+  compact: "py-1.5",
+  tight: "py-px"
+};
+const CARD_PAD = {
+  comfortable: "px-3 py-2.5",
+  compact: "px-2.5 py-1.5",
+  tight: "px-2 py-1"
+};
 function DescriptionItem({
   term,
   children,
   hint,
   numeric: numericProp,
+  prose: proseProp,
+  span,
   detailClassName,
   className,
   ...rest
 }) {
-  const { layout, numeric: listNumeric, density } = useContext(ListContext);
+  const { layout, numeric: listNumeric, prose: listProse, density, columns } = useContext(ListContext);
   const numeric = numericProp ?? listNumeric;
+  const prose = proseProp ?? listProse;
   const cards = layout === "cards";
+  const stacked = layout === "stacked";
+  const spanClass = span === "full" ? "col-span-full" : stacked && span !== void 0 && span > 1 ? STACKED_SPAN[Math.min(Math.floor(span), columns)] : void 0;
   const termNode = /* @__PURE__ */ jsxs(
     "dt",
     {
       className: cn(
         "flex min-w-0 items-center gap-1 text-[var(--text-muted)]",
-        cards && "text-xs uppercase tracking-wide"
+        cards && (density === "tight" ? "text-[10px] uppercase tracking-wide" : "text-xs uppercase tracking-wide"),
+        // Stacked terms are a step smaller than the detail, as kastlan's dialogs set
+        // them; in a list that is already small they stay the list's own size.
+        stacked && density === "comfortable" && "text-xs"
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: term }),
@@ -61,8 +132,10 @@ function DescriptionItem({
     {
       className: cn(
         "min-w-0 break-words text-[var(--text-primary)]",
-        numeric && "tabular-nums text-end",
-        cards && "mt-0.5 font-medium",
+        // A stacked figure sits under its term, so it keeps the term's start edge.
+        numeric && (stacked ? "tabular-nums" : "tabular-nums text-end"),
+        (cards || stacked) && "mt-0.5 font-medium",
+        prose && "font-normal text-[var(--text-secondary)]",
         detailClassName
       ),
       children
@@ -76,6 +149,7 @@ function DescriptionItem({
         className: cn(
           "min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
           CARD_PAD[density],
+          spanClass,
           className
         ),
         children: [
@@ -85,6 +159,12 @@ function DescriptionItem({
       }
     );
   }
+  if (stacked) {
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("min-w-0", spanClass, className), children: [
+      termNode,
+      detail
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/components/description-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/description-list.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldHint } from \"./ui\";\n\nexport type DescriptionListLayout = \"rows\" | \"cards\";\nexport type DescriptionListDensity = \"comfortable\" | \"compact\";\n\ninterface ListContextValue {\n  layout: DescriptionListLayout;\n  numeric: boolean;\n  density: DescriptionListDensity;\n}\n\nconst ListContext = createContext<ListContextValue>({ layout: \"rows\", numeric: false, density: \"comfortable\" });\n\nexport interface DescriptionListProps extends ComponentPropsWithoutRef<\"dl\"> {\n  /**\n   * `rows` (default): term beside detail, a two-column list that stacks the pair\n   * when the LIST is narrower than 24rem — a container query, so a detail panel\n   * beside a sidebar stacks where it is actually cramped, not where the viewport is.\n   * `cards`: a grid of small bordered cards, term above body — keksdose's overview\n   * figures, lenkbank's account facts.\n   */\n  layout?: DescriptionListLayout;\n  /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of\n   *  rows does not stack on a phone — a figure is short, and putting it under its\n   *  term would double the list's height to gain no width. Per item: see\n   *  {@link DescriptionItemProps.numeric}. */\n  numeric?: boolean;\n  /** `compact` tightens the rhythm for a dense side panel. */\n  density?: DescriptionListDensity;\n  /** `cards` only: the narrowest a card may get before the grid drops a column. */\n  minCardWidth?: string;\n}\n\n/**\n * A real `<dl>` — terms and their details, which is what keksdose's eight and\n * lenkbank's four hand-built \"label: value\" blocks were, and none of them said so.\n * As a `<dl>` a reader announces \"list, 6 items\" and pairs each term with its detail;\n * as a stack of `<div>`s it read one undifferentiated run of text.\n *\n * Composed from {@link DescriptionItem} children rather than taking an `items`\n * array. The call sites this replaces are mostly CONDITIONAL — \"IBAN, if there is\n * one\", \"closing date, once closed\" — and `{iban && <DescriptionItem …>}` reads as\n * what it means, where an array wants `.filter(Boolean)` and a cast. Children also\n * give each item its own props (a numeric figure in an otherwise textual list, a\n * `data-private` detail) with no parallel config object. A data-driven list loses\n * nothing: `items.map((i) => <DescriptionItem key={i.term} {...i} />)`.\n *\n * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly\n * this: styling a pair as a unit (a row, a card) without breaking the list.\n */\nexport function DescriptionList({\n  layout = \"rows\",\n  numeric = false,\n  density = \"comfortable\",\n  minCardWidth = \"10rem\",\n  className,\n  style,\n  ...rest\n}: DescriptionListProps) {\n  const cards = layout === \"cards\";\n  const grid: CSSProperties | undefined = cards\n    ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}), 1fr))` }\n    : undefined;\n  return (\n    <ListContext.Provider value={{ layout, numeric, density }}>\n      <dl\n        {...rest}\n        data-layout={layout}\n        style={grid ? { ...grid, ...style } : style}\n        className={cn(\n          cards\n            ? cn(\"grid\", density === \"compact\" ? \"gap-2\" : \"gap-3\")\n            : \"@container divide-y divide-[var(--border)]\",\n          density === \"compact\" ? \"text-xs\" : \"text-sm\",\n          className,\n        )}\n      />\n    </ListContext.Provider>\n  );\n}\n\nexport interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** What is described: \"Opened\", \"IBAN\", \"Net rent\". */\n  term: ReactNode;\n  /** The description itself. */\n  children?: ReactNode;\n  /** The explanation behind a \"?\" beside the term (a {@link FieldHint}) — the same\n   *  meaning `hint` has on `StatTile` and the labelled fields. */\n  hint?: string;\n  /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides\n   *  the list's setting either way. */\n  numeric?: boolean;\n  /** Classes for the `<dd>`. */\n  detailClassName?: string;\n}\n\nconst ROW_PAD: Record<DescriptionListDensity, string> = { comfortable: \"py-2.5\", compact: \"py-1.5\" };\nconst CARD_PAD: Record<DescriptionListDensity, string> = { comfortable: \"px-3 py-2.5\", compact: \"px-2.5 py-1.5\" };\n\n/** One term and its detail inside a {@link DescriptionList}. */\nexport function DescriptionItem({\n  term,\n  children,\n  hint,\n  numeric: numericProp,\n  detailClassName,\n  className,\n  ...rest\n}: DescriptionItemProps) {\n  const { layout, numeric: listNumeric, density } = useContext(ListContext);\n  const numeric = numericProp ?? listNumeric;\n  const cards = layout === \"cards\";\n\n  const termNode = (\n    <dt\n      className={cn(\n        \"flex min-w-0 items-center gap-1 text-[var(--text-muted)]\",\n        cards && \"text-xs uppercase tracking-wide\",\n      )}\n    >\n      <span className=\"min-w-0 break-words\">{term}</span>\n      {hint && <FieldHint label={hint} side=\"top\" className=\"shrink-0\" />}\n    </dt>\n  );\n  const detail = (\n    <dd\n      className={cn(\n        \"min-w-0 break-words text-[var(--text-primary)]\",\n        numeric && \"tabular-nums text-end\",\n        cards && \"mt-0.5 font-medium\",\n        detailClassName,\n      )}\n    >\n      {children}\n    </dd>\n  );\n\n  if (cards) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          CARD_PAD[density],\n          className,\n        )}\n      >\n        {termNode}\n        {detail}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"grid gap-x-4 gap-y-0.5\",\n        numeric\n          ? // Never stacks: a figure is short (see DescriptionListProps.numeric).\n            \"grid-cols-[minmax(0,1fr)_auto] items-baseline\"\n          : \"grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline\",\n        ROW_PAD[density],\n        className,\n      )}\n    >\n      {termNode}\n      {detail}\n    </div>\n  );\n}\n"],"mappings":";AAoEM,cAiDF,YAjDE;AApEN,SAAS,eAAe,kBAAkB;AAE1C,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAW1B,MAAM,cAAc,cAAgC,EAAE,QAAQ,QAAQ,SAAS,OAAO,SAAS,cAAc,CAAC;AAuCvG,SAAS,gBAAgB;AAAA,EAC9B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,QAAQ,WAAW;AACzB,QAAM,OAAkC,QACpC,EAAE,qBAAqB,sCAAsC,YAAY,WAAW,IACpF;AACJ,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,SAAS,QAAQ,GACtD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,OAAO,OAAO,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AAAA,MACtC,WAAW;AAAA,QACT,QACI,GAAG,QAAQ,YAAY,YAAY,UAAU,OAAO,IACpD;AAAA,QACJ,YAAY,YAAY,YAAY;AAAA,QACpC;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAiBA,MAAM,UAAkD,EAAE,aAAa,UAAU,SAAS,SAAS;AACnG,MAAM,WAAmD,EAAE,aAAa,eAAe,SAAS,gBAAgB;AAGzG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,EAAE,QAAQ,SAAS,aAAa,QAAQ,IAAI,WAAW,WAAW;AACxE,QAAM,UAAU,eAAe;AAC/B,QAAM,QAAQ,WAAW;AAEzB,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,MACX;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,uBAAuB,gBAAK;AAAA,QAC3C,QAAQ,oBAAC,aAAU,OAAO,MAAM,MAAK,OAAM,WAAU,YAAW;AAAA;AAAA;AAAA,EACnE;AAEF,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAGF,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,OAAO;AAAA,UAChB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,UAEI;AAAA,YACA;AAAA,QACJ,QAAQ,OAAO;AAAA,QACf;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/description-list.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldHint } from \"./ui\";\n\nexport type DescriptionListLayout = \"rows\" | \"cards\" | \"stacked\";\nexport type DescriptionListDensity = \"comfortable\" | \"compact\" | \"tight\";\n/** How many columns a `stacked` or `cards` list may use. */\nexport type DescriptionListColumns = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ListContextValue {\n  layout: DescriptionListLayout;\n  numeric: boolean;\n  prose: boolean;\n  density: DescriptionListDensity;\n  columns: DescriptionListColumns;\n}\n\nconst ListContext = createContext<ListContextValue>({\n  layout: \"rows\",\n  numeric: false,\n  prose: false,\n  density: \"comfortable\",\n  columns: 2,\n});\n\n/**\n * `stacked` columns, by the width of the LIST (a container query on a wrapper — the\n * `<dl>` is the grid and cannot query itself). One column on a phone-narrow pane, two\n * from 20rem, then one more column each time every column would still get ~12rem.\n * The same shape as kastlan's DetailGrid (1 → 2 at `sm` → n at `md`), measured on the\n * pane rather than the viewport, so the four preview dialogs and a full-width detail\n * page can share one list. Literal strings, because Tailwind only emits what it reads.\n */\nconst STACKED_COLS: Record<DescriptionListColumns, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 @xs:grid-cols-2\",\n  3: \"grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3\",\n  4: \"grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4\",\n  5: \"grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5\",\n  6: \"grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5 @6xl:grid-cols-6\",\n};\n\n/** An item's span at each of those thresholds, never more columns than exist there —\n *  so a span can never open an implicit column and push the grid past its pane. */\nconst STACKED_SPAN: Record<DescriptionListColumns, string> = {\n  1: \"\",\n  2: \"@xs:col-span-2\",\n  3: \"@xs:col-span-2 @xl:col-span-3\",\n  4: \"@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4\",\n  5: \"@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5\",\n  6: \"@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5 @6xl:col-span-6\",\n};\n\n/** The cards grid's gap per density, as a class and as the length the column formula\n *  subtracts — one table so the two cannot disagree. */\nconst CARD_GAP: Record<DescriptionListDensity, { cls: string; len: string }> = {\n  comfortable: { cls: \"gap-3\", len: \"0.75rem\" },\n  compact: { cls: \"gap-2\", len: \"0.5rem\" },\n  tight: { cls: \"gap-1\", len: \"0.25rem\" },\n};\n\nexport interface DescriptionListProps extends ComponentPropsWithoutRef<\"dl\"> {\n  /**\n   * `rows` (default): term beside detail, a two-column list that stacks the pair\n   * when the LIST is narrower than 24rem — a container query, so a detail panel\n   * beside a sidebar stacks where it is actually cramped, not where the viewport is.\n   * `cards`: a grid of small bordered cards, term above body — keksdose's overview\n   * figures, lenkbank's account facts.\n   * `stacked` (0.10.0): a borderless grid, term ABOVE detail, {@link columns} wide —\n   * kastlan's DetailField/DetailGrid and the label-over-value grids of its lease,\n   * invoice, contact and unit preview dialogs. Items can {@link DescriptionItemProps.span}\n   * several columns (a notes field across the whole row).\n   */\n  layout?: DescriptionListLayout;\n  /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of\n   *  rows does not stack on a phone — a figure is short, and putting it under its\n   *  term would double the list's height to gain no width. Per item: see\n   *  {@link DescriptionItemProps.numeric}. */\n  numeric?: boolean;\n  /** `compact` tightens the rhythm for a dense side panel. `tight` (0.10.0) is 11px\n   *  type on a 2px rhythm with no rules between rows — keksdose's admin metrics\n   *  breakdowns (metrics-panel's label-left, count-right lists), which are read as a\n   *  block of small print, not scanned row by row. */\n  density?: DescriptionListDensity;\n  /** `cards` only: the narrowest a card may get before the grid drops a column. */\n  minCardWidth?: string;\n  /**\n   * `stacked`: how many columns the grid grows to on a wide pane (default 2), see\n   * {@link STACKED_COLS}. `cards` (0.10.0): the MOST cards per row; the grid still\n   * drops columns below {@link minCardWidth}. keksdose's category editor faked \"two\n   * side by side\" with `minCardWidth=\"calc(50% - 0.5rem)\"`, which is `columns={2}\n   * minCardWidth=\"0\"` now, without knowing the gap. Ignored by `rows`.\n   */\n  columns?: DescriptionListColumns;\n  /**\n   * The details are sentences, not values: regular weight in the secondary ink.\n   * lenkbank's control explainer cards each carry a paragraph, and at the card's\n   * `font-medium` primary ink a grid of paragraphs reads as a wall of headings — it\n   * spelled `font-normal text-slate-700` into every item. A flag rather than a new\n   * default because every other card list in the apps holds values (dates, figures,\n   * counts) that are not flagged `numeric` and ARE meant to stand out; lightening them\n   * all would not be an improvement. Per item: {@link DescriptionItemProps.prose}.\n   */\n  prose?: boolean;\n}\n\n/**\n * A real `<dl>` — terms and their details, which is what keksdose's eight and\n * lenkbank's four hand-built \"label: value\" blocks were, and none of them said so.\n * As a `<dl>` a reader announces \"list, 6 items\" and pairs each term with its detail;\n * as a stack of `<div>`s it read one undifferentiated run of text.\n *\n * Composed from {@link DescriptionItem} children rather than taking an `items`\n * array. The call sites this replaces are mostly CONDITIONAL — \"IBAN, if there is\n * one\", \"closing date, once closed\" — and `{iban && <DescriptionItem …>}` reads as\n * what it means, where an array wants `.filter(Boolean)` and a cast. Children also\n * give each item its own props (a numeric figure in an otherwise textual list, a\n * `data-private` detail) with no parallel config object. A data-driven list loses\n * nothing: `items.map((i) => <DescriptionItem key={i.term} {...i} />)`.\n *\n * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly\n * this: styling a pair as a unit (a row, a card) without breaking the list.\n */\nexport function DescriptionList({\n  layout = \"rows\",\n  numeric = false,\n  prose = false,\n  density = \"comfortable\",\n  minCardWidth = \"10rem\",\n  columns,\n  className,\n  style,\n  ...rest\n}: DescriptionListProps) {\n  const cards = layout === \"cards\";\n  const stacked = layout === \"stacked\";\n  const gap = CARD_GAP[density];\n  // Cards: auto-fill at `minCardWidth`, and with `columns` a floor on the track of one\n  // n-th of the row (less the gaps) — so auto-fill can never fit more than n. The\n  // outer `min(100%, …)` keeps a single card from overflowing a pane narrower than\n  // its minimum.\n  const track =\n    columns !== undefined\n      ? `max(${minCardWidth}, (100% - ${columns - 1} * ${gap.len}) / ${columns})`\n      : minCardWidth;\n  const grid: CSSProperties | undefined = cards\n    ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` }\n    : undefined;\n  const ctx: ListContextValue = { layout, numeric, prose, density, columns: columns ?? 2 };\n  const text = density === \"tight\" ? \"text-[11px] leading-4\" : density === \"compact\" ? \"text-xs\" : \"text-sm\";\n\n  if (stacked) {\n    return (\n      <ListContext.Provider value={ctx}>\n        {/* The container the columns are measured on — see STACKED_COLS. */}\n        <div className=\"@container\">\n          <dl\n            {...rest}\n            data-layout={layout}\n            style={style}\n            className={cn(\n              \"grid\",\n              STACKED_COLS[ctx.columns],\n              density === \"tight\" ? \"gap-x-3 gap-y-1\" : density === \"compact\" ? \"gap-x-4 gap-y-2\" : \"gap-x-6 gap-y-4\",\n              text,\n              className,\n            )}\n          />\n        </div>\n      </ListContext.Provider>\n    );\n  }\n\n  return (\n    <ListContext.Provider value={ctx}>\n      <dl\n        {...rest}\n        data-layout={layout}\n        style={grid ? { ...grid, ...style } : style}\n        className={cn(\n          cards\n            ? cn(\"grid\", gap.cls)\n            : // Tight rows carry no rules: at a 2px rhythm a line under every row\n              // turns a block of small print into a ruled table.\n              cn(\"@container\", density !== \"tight\" && \"divide-y divide-[var(--border)]\"),\n          text,\n          className,\n        )}\n      />\n    </ListContext.Provider>\n  );\n}\n\nexport interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** What is described: \"Opened\", \"IBAN\", \"Net rent\". */\n  term: ReactNode;\n  /** The description itself. */\n  children?: ReactNode;\n  /** The explanation behind a \"?\" beside the term (a {@link FieldHint}) — the same\n   *  meaning `hint` has on `StatTile` and the labelled fields. */\n  hint?: string;\n  /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides\n   *  the list's setting either way. */\n  numeric?: boolean;\n  /** Classes for the `<dd>`. */\n  detailClassName?: string;\n  /** This detail is prose (see {@link DescriptionListProps.prose}); overrides the\n   *  list's setting either way. */\n  prose?: boolean;\n  /**\n   * `stacked`: how many columns this item spans, clamped to the list's `columns` and\n   * to however many the pane has room for; `\"full\"` is the whole row. kastlan's\n   * DetailField `span={2}` for notes and descriptions. `cards`: only `\"full\"` applies,\n   * because a card grid's column count is not known to CSS ahead of layout.\n   */\n  span?: number | \"full\";\n}\n\nconst ROW_PAD: Record<DescriptionListDensity, string> = {\n  comfortable: \"py-2.5\",\n  compact: \"py-1.5\",\n  tight: \"py-px\",\n};\nconst CARD_PAD: Record<DescriptionListDensity, string> = {\n  comfortable: \"px-3 py-2.5\",\n  compact: \"px-2.5 py-1.5\",\n  tight: \"px-2 py-1\",\n};\n\n/** One term and its detail inside a {@link DescriptionList}. */\nexport function DescriptionItem({\n  term,\n  children,\n  hint,\n  numeric: numericProp,\n  prose: proseProp,\n  span,\n  detailClassName,\n  className,\n  ...rest\n}: DescriptionItemProps) {\n  const { layout, numeric: listNumeric, prose: listProse, density, columns } = useContext(ListContext);\n  const numeric = numericProp ?? listNumeric;\n  const prose = proseProp ?? listProse;\n  const cards = layout === \"cards\";\n  const stacked = layout === \"stacked\";\n  const spanClass =\n    span === \"full\"\n      ? \"col-span-full\"\n      : stacked && span !== undefined && span > 1\n        ? STACKED_SPAN[Math.min(Math.floor(span), columns) as DescriptionListColumns]\n        : undefined;\n\n  const termNode = (\n    <dt\n      className={cn(\n        \"flex min-w-0 items-center gap-1 text-[var(--text-muted)]\",\n        cards && (density === \"tight\" ? \"text-[10px] uppercase tracking-wide\" : \"text-xs uppercase tracking-wide\"),\n        // Stacked terms are a step smaller than the detail, as kastlan's dialogs set\n        // them; in a list that is already small they stay the list's own size.\n        stacked && density === \"comfortable\" && \"text-xs\",\n      )}\n    >\n      <span className=\"min-w-0 break-words\">{term}</span>\n      {hint && <FieldHint label={hint} side=\"top\" className=\"shrink-0\" />}\n    </dt>\n  );\n  const detail = (\n    <dd\n      className={cn(\n        \"min-w-0 break-words text-[var(--text-primary)]\",\n        // A stacked figure sits under its term, so it keeps the term's start edge.\n        numeric && (stacked ? \"tabular-nums\" : \"tabular-nums text-end\"),\n        (cards || stacked) && \"mt-0.5 font-medium\",\n        prose && \"font-normal text-[var(--text-secondary)]\",\n        detailClassName,\n      )}\n    >\n      {children}\n    </dd>\n  );\n\n  if (cards) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          CARD_PAD[density],\n          spanClass,\n          className,\n        )}\n      >\n        {termNode}\n        {detail}\n      </div>\n    );\n  }\n\n  if (stacked) {\n    return (\n      <div {...rest} className={cn(\"min-w-0\", spanClass, className)}>\n        {termNode}\n        {detail}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"grid gap-x-4 gap-y-0.5\",\n        numeric\n          ? // Never stacks: a figure is short (see DescriptionListProps.numeric).\n            \"grid-cols-[minmax(0,1fr)_auto] items-baseline\"\n          : \"grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline\",\n        ROW_PAD[density],\n        className,\n      )}\n    >\n      {termNode}\n      {detail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -95,6 +95,13 @@ interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" |
  * tailwind-merged last), which is how a full-screen phone sheet is spelt:
  * `fullBleed className="h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg"`.
  *
+ * ## Kept mounted
+ *
+ * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`
+ * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only
+ * that gate) and gains the exit a caller-driven close otherwise skips. See
+ * {@link ModalProps.open}.
+ *
  * ## What it is not
  *
  * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,