@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -0,0 +1,261 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
+import { Button } from "./button.js";
+import { FieldBox, useFieldMessages } from "./field-parts.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import {
+  DateField,
+  useDatePickerLabels,
+  useTriggerFormat,
+  withEndHint
+} from "./date-field.js";
+import { PanelCalendar } from "./jump-calendar.js";
+function markedPreset(presets, from, to, activeId, controlled) {
+  const matches = (p) => p.from === from && p.to === to;
+  if (activeId != null) {
+    const byId = presets.findIndex((p) => p.id === activeId && matches(p));
+    if (byId !== -1 || controlled) return byId;
+  } else if (controlled) {
+    return -1;
+  }
+  return presets.findIndex(matches);
+}
+function PresetColumn({
+  presets,
+  marked,
+  label,
+  onPick,
+  sheet
+}) {
+  return (
+    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule
+    // between it and the calendar has to follow it in a right-to-left UI.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-label": label,
+        className: sheet ? "grid grid-cols-2 gap-0.5" : "flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2",
+        children: presets.map((p, i) => {
+          const selected = i === marked;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": selected,
+              "data-preset": p.id,
+              onClick: () => onPick(p),
+              className: cn(
+                "rounded px-2 text-start",
+                // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).
+                sheet ? "min-h-11 py-2 text-sm" : "py-1.5 text-xs",
+                selected ? "bg-active font-medium text-primary" : "text-secondary hover:bg-hover"
+              ),
+              children: p.label
+            },
+            p.id ?? i
+          );
+        })
+      }
+    )
+  );
+}
+function RangePanel({
+  from,
+  to,
+  presets,
+  activeId,
+  controlled,
+  commit,
+  close,
+  frame,
+  sheet,
+  commitRange,
+  calendarProps,
+  labels,
+  renderDraftSummary
+}) {
+  const drafting = commit === "apply";
+  const [draft, setDraft] = useState({
+    from,
+    to,
+    presetId: activeId ?? void 0
+  });
+  const shown = drafting ? draft : { from, to, presetId: activeId ?? void 0 };
+  const marked = presets ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled) : -1;
+  const complete = Boolean(draft.from && draft.to);
+  const summary = drafting && renderDraftSummary ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] }) : null;
+  const picker = /* @__PURE__ */ jsx(
+    PanelCalendar,
+    {
+      ...calendarProps,
+      focusOnOpen: true,
+      from: shown.from,
+      to: shown.to,
+      onSelect: (f, t) => {
+        if (drafting) {
+          setDraft({ from: f, to: t, presetId: void 0 });
+          return;
+        }
+        commitRange(f, t, void 0);
+        if (f && t) close();
+      }
+    }
+  );
+  const calendar = drafting && renderDraftSummary ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    summary != null && /* @__PURE__ */ jsx("div", { "aria-live": "polite", "data-draft-summary": "", className: "text-xs text-muted", children: summary }),
+    picker
+  ] }) : picker;
+  const body = presets && presets.length > 0 ? /* @__PURE__ */ jsxs("div", { className: sheet ? "flex flex-col gap-3" : "flex gap-3", children: [
+    /* @__PURE__ */ jsx(
+      PresetColumn,
+      {
+        sheet,
+        presets,
+        marked,
+        label: labels.presets,
+        onPick: (p) => {
+          if (drafting) {
+            setDraft({ from: p.from, to: p.to, presetId: p.id });
+            return;
+          }
+          commitRange(p.from, p.to, p.id);
+          close();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: calendar })
+  ] }) : calendar;
+  if (!drafting) return frame(body);
+  return frame(
+    body,
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: sheet ? "flex-1" : void 0, onClick: close, children: labels.cancel }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: sheet ? "flex-1" : void 0,
+          disabled: !complete,
+          onClick: () => {
+            if (!complete) return;
+            commitRange(draft.from, draft.to, draft.presetId);
+            close();
+          },
+          children: labels.apply
+        }
+      )
+    ] })
+  );
+}
+function DateRangePicker(props) {
+  const {
+    from,
+    to,
+    onChange,
+    locale: localeProp,
+    placeholder,
+    min,
+    max,
+    formatOptions,
+    formatValue,
+    separator = " \u2013 ",
+    presets,
+    preset,
+    commit = "immediate",
+    renderTrigger,
+    sheetBackCloses,
+    renderDraftSummary,
+    calendarLabels,
+    monthJump,
+    label,
+    clearable,
+    clearLabel,
+    disabled,
+    invalid,
+    hint,
+    error,
+    // The trigger's (API-3).
+    ref,
+    ...rest
+  } = props;
+  const locale = useKitLocale(localeProp);
+  const text = useDatePickerLabels(clearLabel, void 0, void 0);
+  const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
+  const messages = useFieldMessages({
+    hint,
+    error,
+    invalid,
+    describedBy: rest["aria-describedby"],
+    ariaInvalid: rest["aria-invalid"]
+  });
+  const [ownPreset, setOwnPreset] = useState(void 0);
+  const controlled = preset !== void 0;
+  const activeId = controlled ? preset : ownPreset;
+  const a = from ? render(from) : "";
+  const b = to ? render(to) : "";
+  const triggerText = from ? to ? `${a}${separator}${b}` : `${a}${separator}\u2026` : placeholder ?? "";
+  const hasPresets = Boolean(presets && presets.length > 0);
+  const sheet = usePhoneLayout();
+  const commitRange = (f, t, presetId) => {
+    setOwnPreset(presetId);
+    if (presetId === void 0) onChange(f, t);
+    else onChange(f, t, presetId);
+  };
+  const field = /* @__PURE__ */ jsx(
+    DateField,
+    {
+      ...rest,
+      fieldRef: ref,
+      "aria-describedby": messages.describedBy,
+      label,
+      labelHint: messages.labelHint,
+      clearable,
+      clearLabel: text.clear,
+      panelLabel: text.rangePanel,
+      disabled,
+      invalid: messages.isInvalid,
+      width: hasPresets ? "27.5rem" : void 0,
+      hasValue: Boolean(from || to),
+      triggerText,
+      onClear: () => commitRange("", "", void 0),
+      sheet,
+      sheetBackCloses,
+      renderTrigger: renderTrigger && ((triggerProps, valueId) => renderTrigger({
+        triggerProps,
+        valueProps: { id: valueId },
+        open: triggerProps["aria-expanded"],
+        from,
+        to,
+        preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],
+        text: triggerText
+      })),
+      children: (close, frame) => /* @__PURE__ */ jsx(
+        RangePanel,
+        {
+          from,
+          to,
+          presets,
+          activeId,
+          controlled,
+          commit,
+          close,
+          frame,
+          sheet,
+          commitRange,
+          calendarProps: { locale, min, max, labels: calendarLabels, monthJump },
+          labels: text,
+          renderDraftSummary
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: withEndHint(field, label === void 0 ? messages.labelHint : void 0) });
+}
+export {
+  DateRangePicker
+};
+//# sourceMappingURL=date-range-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `commit=\"apply\"` drafts, a\n// custom trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, useFieldMessages } from \"./field-parts\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\n/**\n * 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   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `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-subtle 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-active font-medium text-primary\"\n                : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `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<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\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    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with\n *  `commit=\"apply\"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    commit = \"immediate\",\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    invalid,\n    hint,\n    error,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  const messages = useFieldMessages({\n    hint,\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from\n    ? to\n      ? `${a}${separator}${b}`\n      : `${a}${separator}…`\n    : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\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  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          commit={commit}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {withEndHint(field, label === undefined ? messages.labelHint : undefined)}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,2 @@
+import type { DescriptionListLabels } from "./description-list.js";
+export declare const DEFAULT_DESCRIPTION_LIST_LABELS: DescriptionListLabels;

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

@@ -0,0 +1,8 @@
+"use client";
+const DEFAULT_DESCRIPTION_LIST_LABELS = {
+  empty: "\u2014"
+};
+export {
+  DEFAULT_DESCRIPTION_LIST_LABELS
+};
+//# sourceMappingURL=description-list-labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/description-list-labels.ts"],"sourcesContent":["// The English words of ./description-list, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./description-list re-exports them.\n\nimport type { DescriptionListLabels } from \"./description-list\";\n\nexport const DEFAULT_DESCRIPTION_LIST_LABELS: DescriptionListLabels = {\n  empty: \"—\",\n};\n"],"mappings":";AAMO,MAAM,kCAAyD;AAAA,EACpE,OAAO;AACT;","names":[]}

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

@@ -1,18 +1,17 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { DEFAULT_DESCRIPTION_LIST_LABELS } from "./description-list-labels.js";
 /** The words a {@link DescriptionList} renders on its own behalf. */
-interface DescriptionListLabels {
+export interface DescriptionListLabels {
     /** What an item with no value shows (see {@link DescriptionItemProps.placeholder}).
      *  Default "—", an em dash. */
     empty: string;
 }
-declare const DEFAULT_DESCRIPTION_LIST_LABELS: DescriptionListLabels;
-type DescriptionListLayout = "rows" | "cards" | "stacked";
-type DescriptionListDensity = "comfortable" | "compact" | "tight";
+export { DEFAULT_DESCRIPTION_LIST_LABELS };
+export type DescriptionListLayout = "rows" | "cards" | "stacked";
+export 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"> {
+export type DescriptionListColumns = 1 | 2 | 3 | 4 | 5 | 6;
+export interface DescriptionListProps extends ComponentPropsWithRef<"dl"> {
     /**
      * `rows` (default): term beside detail, a two-column list that stacks the pair
      * when the LIST is narrower than 24rem — a container query, so a detail panel
@@ -76,14 +75,15 @@ 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, prose, density, minCardWidth, columns, placeholder, className, style, ...rest }: DescriptionListProps): react.JSX.Element;
-interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export declare function DescriptionList({ layout, numeric, prose, density, minCardWidth, columns, placeholder, className, style, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export interface DescriptionItemProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
     /** What is described: "Opened", "IBAN", "Net rent". */
     term: ReactNode;
     /** The description itself. */
     children?: ReactNode;
     /** The explanation behind a "?" beside the term (a {@link FieldHint}) — the same
-     *  meaning `hint` has on `StatTile` and the labelled fields. */
+     *  meaning `hint` has on `StatTile` and the labelled fields. At Large and on a touch
+     *  screen it is the term's caption instead, in words (§4 "No fact only in a tooltip"). */
     hint?: string;
     /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides
      *  the list's setting either way. */
@@ -112,6 +112,4 @@ interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div">, "ch
     placeholder?: ReactNode;
 }
 /** One term and its detail inside a {@link DescriptionList}. */
-declare function DescriptionItem({ term, children, hint, numeric: numericProp, prose: proseProp, span, placeholder: placeholderProp, detailClassName, className, ...rest }: DescriptionItemProps): react.JSX.Element;
-
-export { DEFAULT_DESCRIPTION_LIST_LABELS, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListColumns, type DescriptionListDensity, type DescriptionListLabels, type DescriptionListLayout, type DescriptionListProps };
+export declare function DescriptionItem({ term, children, hint, numeric: numericProp, prose: proseProp, span, placeholder: placeholderProp, detailClassName, className, ...rest }: DescriptionItemProps): import("react").JSX.Element;

package/dist/components/description-list.js

@@ -3,10 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { FieldHint } from "./ui.js";
-const DEFAULT_DESCRIPTION_LIST_LABELS = {
-  empty: "\u2014"
-};
+import { FieldHint } from "./field-parts.js";
+import { useInlineHint } from "./field-parts.js";
+import { DEFAULT_DESCRIPTION_LIST_LABELS } from "./description-list-labels.js";
 const ListContext = createContext({
   layout: "rows",
   numeric: false,
@@ -81,7 +80,7 @@ function DescriptionList({
         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)]")
+          cn("@container", density !== "tight" && "divide-y divide-subtle")
         ),
         text,
         className
@@ -129,12 +128,15 @@ function DescriptionItem({
   const prose = proseProp ?? listProse;
   const cards = layout === "cards";
   const stacked = layout === "stacked";
+  const shownHint = useInlineHint(
+    hint ? /* @__PURE__ */ jsx(FieldHint, { label: hint, side: "top", className: "shrink-0" }) : void 0
+  );
   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)]",
+        "flex min-w-0 flex-wrap items-center gap-x-1 text-muted",
         cards && (density === "tight" ? "text-micro 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.
@@ -142,7 +144,11 @@ function DescriptionItem({
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: term }),
-        hint && /* @__PURE__ */ jsx(FieldHint, { label: hint, side: "top", className: "shrink-0" })
+        typeof shownHint === "string" ? (
+          // Its own line under the term, in the reading case of a sentence rather than a
+          // card term's capitals — StatTile's inline hint.
+          /* @__PURE__ */ jsx("span", { "data-slot": "description-hint", className: "basis-full text-caption leading-tight normal-case tracking-normal", children: shownHint })
+        ) : shownHint
       ]
     }
   );
@@ -150,14 +156,14 @@ function DescriptionItem({
     "dd",
     {
       className: cn(
-        "min-w-0 break-words text-[var(--text-primary)]",
+        "min-w-0 break-words text-primary",
         // 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)]",
+        prose && "font-normal text-secondary",
         detailClassName
       ),
-      children: empty && !isEmptyValue(placeholder) ? /* @__PURE__ */ jsx("span", { "data-slot": "description-empty", className: "font-normal text-[var(--text-muted)]", children: placeholder }) : children
+      children: empty && !isEmptyValue(placeholder) ? /* @__PURE__ */ jsx("span", { "data-slot": "description-empty", className: "font-normal text-muted", children: placeholder }) : children
     }
   );
   if (cards) {
@@ -166,7 +172,7 @@ function DescriptionItem({
       {
         ...rest,
         className: cn(
-          "min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          "min-w-0 rounded-md border border-subtle bg-surface",
           CARD_PAD[density],
           spanClass,
           className

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 { useKitLabels } from \"../i18n/kit-labels\";\nimport { FieldHint } from \"./ui\";\n\n/** The words a {@link DescriptionList} renders on its own behalf. */\nexport interface DescriptionListLabels {\n  /** What an item with no value shows (see {@link DescriptionItemProps.placeholder}).\n   *  Default \"—\", an em dash. */\n  empty: string;\n}\n\nexport const DEFAULT_DESCRIPTION_LIST_LABELS: DescriptionListLabels = {\n  empty: \"—\",\n};\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  placeholder?: ReactNode;\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  /** What an item with no value shows, for every item that does not set its own —\n   *  see {@link DescriptionItemProps.placeholder}. */\n  placeholder?: ReactNode;\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  placeholder,\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, placeholder };\n  const text = density === \"tight\" ? \"text-caption 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   * Shown in place of a value that is not there — `children` of `null`, `undefined`,\n   * `false` or `\"\"` (a `0` is a value and is shown). Default: the list's own\n   * `placeholder`, else `descriptionList.empty` from the provider, else \"—\". `null`\n   * shows nothing, as an empty detail did before. kastlan's DetailField put its\n   * `EMPTY_VALUE` into every one of its call sites' values by hand.\n   *\n   * Drawn in the muted ink, so an absent value does not read as a value of \"—\".\n   */\n  placeholder?: ReactNode;\n}\n\nfunction isEmptyValue(node: ReactNode): boolean {\n  return node === undefined || node === null || node === false || node === \"\";\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  placeholder: placeholderProp,\n  detailClassName,\n  className,\n  ...rest\n}: DescriptionItemProps) {\n  const {\n    layout,\n    numeric: listNumeric,\n    prose: listProse,\n    density,\n    columns,\n    placeholder: listPlaceholder,\n  } = useContext(ListContext);\n  const labels = useKitLabels(\"descriptionList\", DEFAULT_DESCRIPTION_LIST_LABELS);\n  const empty = isEmptyValue(children);\n  const placeholder =\n    placeholderProp !== undefined ? placeholderProp : listPlaceholder !== undefined ? listPlaceholder : labels.empty;\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-micro 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      {empty && !isEmptyValue(placeholder) ? (\n        <span data-slot=\"description-empty\" className=\"font-normal text-[var(--text-muted)]\">\n          {placeholder}\n        </span>\n      ) : (\n        children\n      )}\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":[]}
+{"version":3,"sources":["../../src/components/description-list.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { FieldHint } from \"./field-parts\";\nimport { useInlineHint } from \"./field-parts\";\nimport { DEFAULT_DESCRIPTION_LIST_LABELS } from \"./description-list-labels\";\n\n/** The words a {@link DescriptionList} renders on its own behalf. */\nexport interface DescriptionListLabels {\n  /** What an item with no value shows (see {@link DescriptionItemProps.placeholder}).\n   *  Default \"—\", an em dash. */\n  empty: string;\n}\n\n// Defined in ./description-list-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DESCRIPTION_LIST_LABELS };\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  placeholder?: ReactNode;\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 ComponentPropsWithRef<\"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  /** What an item with no value shows, for every item that does not set its own —\n   *  see {@link DescriptionItemProps.placeholder}. */\n  placeholder?: ReactNode;\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  placeholder,\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, placeholder };\n  const text = density === \"tight\" ? \"text-caption 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-subtle\"),\n          text,\n          className,\n        )}\n      />\n    </ListContext.Provider>\n  );\n}\n\nexport interface DescriptionItemProps extends Omit<ComponentPropsWithRef<\"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. At Large and on a touch\n   *  screen it is the term's caption instead, in words (§4 \"No fact only in a tooltip\"). */\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   * Shown in place of a value that is not there — `children` of `null`, `undefined`,\n   * `false` or `\"\"` (a `0` is a value and is shown). Default: the list's own\n   * `placeholder`, else `descriptionList.empty` from the provider, else \"—\". `null`\n   * shows nothing, as an empty detail did before. kastlan's DetailField put its\n   * `EMPTY_VALUE` into every one of its call sites' values by hand.\n   *\n   * Drawn in the muted ink, so an absent value does not read as a value of \"—\".\n   */\n  placeholder?: ReactNode;\n}\n\nfunction isEmptyValue(node: ReactNode): boolean {\n  return node === undefined || node === null || node === false || node === \"\";\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  placeholder: placeholderProp,\n  detailClassName,\n  className,\n  ...rest\n}: DescriptionItemProps) {\n  const {\n    layout,\n    numeric: listNumeric,\n    prose: listProse,\n    density,\n    columns,\n    placeholder: listPlaceholder,\n  } = useContext(ListContext);\n  const labels = useKitLabels(\"descriptionList\", DEFAULT_DESCRIPTION_LIST_LABELS);\n  const empty = isEmptyValue(children);\n  const placeholder =\n    placeholderProp !== undefined ? placeholderProp : listPlaceholder !== undefined ? listPlaceholder : labels.empty;\n  const numeric = numericProp ?? listNumeric;\n  const prose = proseProp ?? listProse;\n  const cards = layout === \"cards\";\n  const stacked = layout === \"stacked\";\n  // A hint is a fact: on a touch screen and at Large it is words under the term, not a\n  // 14 px \"?\" nobody can hover open — the fields' rule (DUP-2, refactor audit 2026-10),\n  // which this string hint had been left out of. Elsewhere the \"?\" as before.\n  const shownHint = useInlineHint(\n    hint ? <FieldHint label={hint} side=\"top\" className=\"shrink-0\" /> : undefined,\n  );\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 flex-wrap items-center gap-x-1 text-muted\",\n        cards && (density === \"tight\" ? \"text-micro 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      {typeof shownHint === \"string\" ? (\n        // Its own line under the term, in the reading case of a sentence rather than a\n        // card term's capitals — StatTile's inline hint.\n        <span data-slot=\"description-hint\" className=\"basis-full text-caption leading-tight normal-case tracking-normal\">\n          {shownHint}\n        </span>\n      ) : (\n        shownHint\n      )}\n    </dt>\n  );\n  const detail = (\n    <dd\n      className={cn(\n        \"min-w-0 break-words 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-secondary\",\n        detailClassName,\n      )}\n    >\n      {empty && !isEmptyValue(placeholder) ? (\n        <span data-slot=\"description-empty\" className=\"font-normal text-muted\">\n          {placeholder}\n        </span>\n      ) : (\n        children\n      )}\n    </dd>\n  );\n\n  if (cards) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"min-w-0 rounded-md border border-subtle 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-labels.d.ts

@@ -0,0 +1,2 @@
+import type { DialogFrameLabels } from "./dialog-frame.js";
+export declare const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels;

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

@@ -0,0 +1,6 @@
+"use client";
+const DEFAULT_DIALOG_FRAME_LABELS = { close: "Close" };
+export {
+  DEFAULT_DIALOG_FRAME_LABELS
+};
+//# sourceMappingURL=dialog-frame-labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog-frame-labels.ts"],"sourcesContent":["// The English words of ./dialog-frame, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./dialog-frame re-exports them.\n\nimport type { DialogFrameLabels } from \"./dialog-frame\";\n\nexport const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels = { close: \"Close\" };\n"],"mappings":";AAMO,MAAM,8BAAiD,EAAE,OAAO,QAAQ;","names":[]}

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

@@ -1,13 +1,11 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { ModalProps } from './modal.js';
-import '../hooks/use-search-param-state.js';
-
-interface DialogFrameLabels {
+import type { ReactNode } from "react";
+import type { ModalProps } from "./modal.js";
+import { DEFAULT_DIALOG_FRAME_LABELS } from "./dialog-frame-labels.js";
+export interface DialogFrameLabels {
     /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */
     close: string;
 }
-declare const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels;
+export { DEFAULT_DIALOG_FRAME_LABELS };
 /**
  * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the
  * heading's id is generated inside and never reaches the caller), the content
@@ -16,7 +14,7 @@ declare const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels;
  * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,
  * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.
  */
-interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
+export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
     /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */
     title: ReactNode;
     /** The smaller line under the heading; wired to `aria-describedby`. */
@@ -112,6 +110,4 @@ interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" |
  * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the
  * caller's side, and should be a decision rather than a habit.
  */
-declare function DialogFrame({ title, description, headingAs: Heading, actions, headerActions, closeButton, closeLabel, bodyClassName, headerClassName, headerDivider, className, children, "aria-describedby": describedBy, ...modal }: DialogFrameProps): react.JSX.Element;
-
-export { DEFAULT_DIALOG_FRAME_LABELS, DialogFrame, type DialogFrameLabels, type DialogFrameProps };
+export declare function DialogFrame({ title, description, headingAs: Heading, actions, headerActions, closeButton, closeLabel, bodyClassName, headerClassName, headerDivider, className, children, "aria-describedby": describedBy, ...modal }: DialogFrameProps): import("react").JSX.Element;