@eifi1/ui-kit 0.9.0 → 0.11.0

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`,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\nexport const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels = { close: \"Close\" };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={[hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined}\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-[var(--border)]\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-[var(--text-primary)]\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-[var(--text-muted)]\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\"dialogFrame\", DEFAULT_DIALOG_FRAME_LABELS, label === undefined ? undefined : { close: label });\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className=\"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-[var(--border)]\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dialog-frame.tsx"],"sourcesContent":["import { useContext, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { Modal, ModalCloseContext } from \"./modal\";\nimport type { ModalProps } from \"./modal\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface DialogFrameLabels {\n  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */\n  close: string;\n}\n\nexport const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels = { close: \"Close\" };\n\n/**\n * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the\n * heading's id is generated inside and never reaches the caller), the content\n * (`children` is the body here, not the whole panel) and `title`, which is the dialog's\n * HEADING and a ReactNode rather than the browser's tooltip string — the collision\n * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,\n * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal`.\n */\nexport interface DialogFrameProps extends Omit<ModalProps, \"labelledBy\" | \"children\" | \"title\"> {\n  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */\n  title: ReactNode;\n  /** The smaller line under the heading; wired to `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * The heading's level. `h2` by default, which is what every dialog in both apps\n   * writes; a prop for a page that nests its demos under a real heading.\n   */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * The row under the body — buttons, in the caller's own order and variants (the two\n   * apps disagree about the cancel button's variant, so the frame has no opinion on\n   * it). Stays put while the body scrolls.\n   *\n   * A FUNCTION receives the panel's animated close: `(close) => <Button\n   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where\n   * calling `onClose` directly unmounts it at once.\n   */\n  actions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Controls that belong to the HEADER rather than to the actions row — an \"Edit\"\n   * toggle, a status badge with a menu, a \"Copy link\" (kastlan). Rendered beside the\n   * title, before the optional X; on a phone, where title and controls do not fit on\n   * one line, they wrap under the title and the X keeps its corner.\n   *\n   * A function receives the animated close, as `actions` does.\n   */\n  headerActions?: ReactNode | ((close: () => void) => ReactNode);\n  /**\n   * Show an X in the header. Off by default: a centred dialog has a backdrop and\n   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes\n   * and has no actions row, where the X is the only visible way out.\n   */\n  closeButton?: boolean;\n  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /** Extra classes for the scrolling body (default spacing `space-y-3`). */\n  bodyClassName?: string;\n  /**\n   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —\n   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share\n   * one gutter.\n   */\n  headerClassName?: string;\n  /**\n   * A rule under the header, the twin of the one over the actions row — for a tall or\n   * full-screen body that scrolls under a header which stays. The body then starts a\n   * step below the rule instead of flush against it.\n   */\n  headerDivider?: boolean;\n  /**\n   * The body. Optional: a dialog whose title, description and actions are the whole\n   * of it (a \"you have unsynced changes\" question) leaves it out, and the frame then\n   * renders no body at all rather than an empty padded one.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A {@link Modal} with the frame every caller was writing by hand: a heading, an\n * optional description, an optional X, a body that scrolls, and an actions row that\n * does not.\n *\n * 34 dialogs across the two apps framed themselves — a heading with an id invented per\n * file (and spelt three ways), four visible type sizes for one thing, ten spellings of\n * one right-aligned button row — and the package's own feedback dialog shipped with no\n * accessible name at all. This makes the name unforgettable: the heading's id comes\n * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot\n * announce as just \"dialog\", and two open instances cannot share an id.\n *\n * ## It wraps, it does not change `Modal`\n *\n * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the\n * frame changes is inside the panel: the panel becomes a flex column with no padding\n * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer\n * bound, so a tall form keeps its heading and its Save button on screen instead of\n * scrolling them away with the fields. A caller's own `className` still wins (it is\n * tailwind-merged last), which is how a full-screen phone sheet is spelt:\n * `fullBleed className=\"h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg\"`.\n *\n * ## Kept mounted\n *\n * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`\n * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only\n * that gate) and gains the exit a caller-driven close otherwise skips. See\n * {@link ModalProps.open}.\n *\n * ## What it is not\n *\n * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,\n * Back handling and a required X, and it already draws a frame of its own. And not a\n * form: submit handling, a pending label and close-on-success stay the caller's.\n * Focus lands on the panel, as `Modal` decides — not on the first field, so opening\n * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the\n * caller's side, and should be a decision rather than a habit.\n */\nexport function DialogFrame({\n  title,\n  description,\n  headingAs: Heading = \"h2\",\n  actions,\n  headerActions,\n  closeButton = false,\n  closeLabel,\n  bodyClassName,\n  headerClassName,\n  headerDivider = false,\n  className,\n  children,\n  \"aria-describedby\": describedBy,\n  ...modal\n}: DialogFrameProps) {\n  const titleId = useId();\n  const descriptionId = useId();\n  const hasDescription = description !== undefined && description !== null;\n  // `false` too, so `{cond && <Body/>}` with a false `cond` means \"no body\".\n  const hasBody = children !== undefined && children !== null && children !== false;\n\n  return (\n    <Modal\n      {...modal}\n      labelledBy={titleId}\n      // The caller's own description (a warning inside the body, say) is ADDED to the\n      // frame's, not traded for it: both are the dialog's.\n      aria-describedby={[hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(\" \") || undefined}\n      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge\n      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move\n      // to the body, which is the only part that should move.\n      className={cn(\"flex flex-col overflow-hidden p-0\", className)}\n    >\n      <div\n        className={cn(\n          // `last:pb-4`: a frame with neither body nor actions closes on its header.\n          \"flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4\",\n          headerDivider && \"border-b border-[var(--border)]\",\n          headerClassName,\n        )}\n      >\n        {/* Title and header actions share a wrapping row of their own, so it is THEY\n            that wrap on a phone — the actions drop under a title that needs its 12rem —\n            while the X stays outside it, pinned to the top-end corner. */}\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2\">\n          <div className=\"min-w-0 grow basis-48\">\n            <Heading id={titleId} className=\"text-lg font-semibold leading-snug text-[var(--text-primary)]\">\n              {title}\n            </Heading>\n            {hasDescription && (\n              <p id={descriptionId} className=\"mt-0.5 text-sm text-[var(--text-muted)]\">\n                {description}\n              </p>\n            )}\n          </div>\n          {headerActions !== undefined && headerActions !== null && headerActions !== false && (\n            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />\n          )}\n        </div>\n        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}\n      </div>\n      {hasBody && (\n        <div\n          className={cn(\n            // `min-h-0` is what lets a flex child shrink below its content and scroll;\n            // `last:pb-4` closes a frame that has no actions row under it.\n            \"min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4\",\n            headerDivider && \"pt-3\",\n            bodyClassName,\n          )}\n        >\n          {children}\n        </div>\n      )}\n      {actions !== undefined && actions !== null && (\n        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />\n      )}\n    </Modal>\n  );\n}\n\n/** The X. A component of its own so it can read the panel's animated close, which\n *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */\nfunction FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  const labels = useKitLabels(\"dialogFrame\", DEFAULT_DIALOG_FRAME_LABELS, label === undefined ? undefined : { close: label });\n  return (\n    <button\n      type=\"button\"\n      onClick={close}\n      aria-label={labels.close}\n      className=\"-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n    >\n      <X aria-hidden className=\"size-5\" />\n    </button>\n  );\n}\n\n/** The header's own controls; a component for the same reason as {@link FrameClose}. */\nfunction FrameHeaderActions({\n  actions,\n  onClose,\n}: {\n  actions: NonNullable<DialogFrameProps[\"headerActions\"]>;\n  onClose: () => void;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    <div data-dialog-header-actions=\"\" className=\"flex shrink-0 flex-wrap items-center gap-2\">\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n\nfunction FrameActions({\n  actions,\n  onClose,\n  divider,\n}: {\n  actions: NonNullable<DialogFrameProps[\"actions\"]>;\n  onClose: () => void;\n  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a\n   *  rule straight under the description would cut the question from its answers. */\n  divider: boolean;\n}) {\n  const close = useContext(ModalCloseContext) ?? onClose;\n  return (\n    // The border marks where the scrolling stops; `flex-wrap` keeps three long\n    // translated labels on a phone from pushing the row wider than the sheet.\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3\",\n        divider && \"border-t border-[var(--border)]\",\n      )}\n    >\n      {typeof actions === \"function\" ? actions(close) : actions}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/disclosure.d.ts

@@ -99,8 +99,14 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      * after the flag, like every other menu row with a sub-list. With `trailing`, the
      * chevron follows it, as on a card. A `card` always has it at the end, so this is
      * ignored there. A `menu` defaults to `end`, like the menu rows around it.
+     *
+     * `after-title` sits it right after the title's text, pointing down and turning up —
+     * "Net profit ⌄ ······ 1,234.50", Lenkbank's result rows, where the far end of the
+     * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron
+     * would push every label off the column the non-expandable rows' labels start on.
+     * Not a card's: its chevron keeps the end.
      */
-    chevronPosition?: "start" | "end";
+    chevronPosition?: "start" | "end" | "after-title";
     /**
      * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern
      * puts the button INSIDE the heading when the disclosure titles a section, so the
@@ -139,8 +145,26 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      * the row under it (a stretched hit area), so clicking the empty space or the
      * card's chevron still toggles, while whatever sits in `trailing` gets its own
      * clicks. With `trailing`, the card's chevron moves after it, to the row's end.
+     *
+     * Unless {@link trailingInTrigger} is set, which moves it INTO the button.
      */
     trailing?: ReactNode;
+    /**
+     * Render {@link trailing} inside the header button instead of beside it, so the
+     * whole row — figure included — is one click target and the figure is part of the
+     * button's accessible name: "Net profit 1,234.50, collapsed" rather than a button
+     * called "Net profit" next to an unexplained number.
+     *
+     * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,
+     * chevron, and the value at the far end, all one `<button>`, because a result row
+     * has nothing else it could mean.
+     *
+     * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button
+     * may not contain another interactive element; an action belongs in the default,
+     * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing
+     * content too (no `div`s).
+     */
+    trailingInTrigger?: boolean;
     /**
      * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden
      * rows of a table, a panel in another column — which this header shows and hides.
@@ -148,6 +172,37 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with
      * `open` / `onOpenChange`: the caller owns the state, since the caller renders what
      * it governs.
+     *
+     * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what
+     * folds is several elements — a budget group's category rows, each its own `<li>`,
+     * siblings of this header (keksdose's budget-mobile-list joins their ids with
+     * `" "`). It may be the EMPTY string: trigger-only mode with nothing to point at yet
+     * (a group whose rows are all filtered away, rows that are not rendered while shut).
+     * The header then carries no `aria-controls` at all rather than an empty one, and
+     * still toggles.
+     *
+     * A table's leading row — keksdose's "Upcoming" toggle over the scheduled rows of
+     * its transactions table — is this mode too: the rows it folds are the TABLE's, so
+     * the disclosure is only the header, and the table renders or drops them from the
+     * same state.
+     *
+     * ```tsx
+     * <DataTable
+     *   rows={showFuture ? [...scheduled, ...posted] : posted}
+     *   leadingRow={
+     *     <Disclosure
+     *       variant="bare"
+     *       title={upcomingLabel}
+     *       open={showFuture}
+     *       onOpenChange={setShowFuture}
+     *       // The scheduled rows' ids while they are rendered; "" while they are not.
+     *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(" ") : ""}
+     *       headerClassName="px-3 py-2"
+     *     />
+     *   }
+     *   …
+     * />
+     * ```
      */
     controls?: string;
     /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */
@@ -167,6 +222,6 @@ interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
  * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that
  * is the default and when to opt out.
  */
-declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, chevronPosition, headingAs: Heading, keepMounted, disabled, headerClassName, triggerProps, bodyClassName, trailing, controls, className, children, ...rest }: DisclosureProps): react.JSX.Element;
+declare function Disclosure({ title, hint, open: controlled, defaultOpen, onOpenChange, variant, chevronPosition, headingAs: Heading, keepMounted, disabled, headerClassName, triggerProps, bodyClassName, trailing, trailingInTrigger, controls, className, children, ...rest }: DisclosureProps): react.JSX.Element;
 
 export { Collapse, type CollapseProps, Disclosure, type DisclosureProps, type DisclosureTriggerProps };

package/dist/components/disclosure.js

@@ -3,10 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { prefersReducedMotion } from "../hooks/use-close-transition.js";
 const COLLAPSE_MS = 200;
-function prefersReducedMotion() {
-  return typeof window === "undefined" || typeof window.matchMedia !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function Collapse({ open, keepMounted = false, children, className, style, ...rest }) {
   const [lingering, setLingering] = useState(false);
   const [prevOpen, setPrevOpen] = useState(open);
@@ -58,6 +56,7 @@ function Disclosure({
   triggerProps,
   bodyClassName,
   trailing,
+  trailingInTrigger = false,
   controls,
   className,
   children,
@@ -68,10 +67,14 @@ function Disclosure({
   const bodyId = useId();
   const card = variant === "card";
   const menu = variant === "menu";
-  const chevronAtEnd = card || (chevronPosition ?? (menu ? "end" : "start")) === "end";
+  const chevronAt = card ? "end" : chevronPosition ?? (menu ? "end" : "start");
+  const chevronAtEnd = chevronAt === "end";
+  const chevronAfterTitle = chevronAt === "after-title";
   const triggerOnly = controls !== void 0;
   const joined = open && !triggerOnly;
   const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
+  const trailingInside = hasTrailing && trailingInTrigger;
+  const trailingBeside = hasTrailing && !trailingInTrigger;
   const toggle = () => {
     const next = !open;
     if (controlled === void 0) setOwn(next);
@@ -84,13 +87,13 @@ function Disclosure({
       ...extraTriggerProps,
       type: "button",
       "aria-expanded": open,
-      "aria-controls": triggerOnly ? controls : bodyId,
+      "aria-controls": triggerOnly ? controls || void 0 : bodyId,
       disabled,
       onClick: toggle,
       "data-disclosure-trigger": "",
       className: cn(
         "flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        hasTrailing ? (
+        trailingBeside ? (
           // Stretched over the whole header row (the row is `relative`), so the space
           // round `trailing` and the card's chevron still toggle; the ring and the
           // card's hover paint on the stretched area / the row, not the text box.
@@ -102,7 +105,7 @@ function Disclosure({
         ) : "focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
         card ? cn(
           "items-center justify-between rounded-lg p-4",
-          hasTrailing ? "pe-0" : "hover:bg-[var(--bg-hover)] focus-visible:ring-inset",
+          trailingBeside ? "pe-0" : "hover:bg-[var(--bg-hover)] focus-visible:ring-inset",
           joined && "rounded-b-none"
         ) : menu ? (
           // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a
@@ -113,23 +116,32 @@ function Disclosure({
         headerClassName
       ),
       children: [
-        !chevronAtEnd && /* @__PURE__ */ jsx(Chevron, { open, leading: true }),
+        chevronAt === "start" && /* @__PURE__ */ jsx(Chevron, { open, leading: true }),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("span", { className: cn("block", card && "text-sm font-semibold text-[var(--text-primary)]"), children: title }),
+          chevronAfterTitle ? (
+            // The chevron hugs the text, however long the translation: the text wraps
+            // before the chevron is pushed away from it.
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0", children: title }),
+              /* @__PURE__ */ jsx(Chevron, { open, small: true })
+            ] })
+          ) : /* @__PURE__ */ jsx("span", { className: cn("block", card && "text-sm font-semibold text-[var(--text-primary)]"), children: title }),
           hint !== void 0 && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs font-normal text-[var(--text-muted)]", children: hint })
         ] }),
-        chevronAtEnd && !hasTrailing && /* @__PURE__ */ jsx(Chevron, { open, small: !card })
+        trailingInside && " ",
+        trailingInside && /* @__PURE__ */ jsx("span", { "data-disclosure-trailing": "", className: "flex shrink-0 items-center gap-2", children: trailing }),
+        chevronAtEnd && !trailingBeside && /* @__PURE__ */ jsx(Chevron, { open, small: !card })
       ]
     }
   );
-  const header = Heading ? /* @__PURE__ */ jsx(Heading, { className: hasTrailing ? "min-w-0 flex-1" : void 0, children: button }) : button;
+  const header = Heading ? /* @__PURE__ */ jsx(Heading, { className: trailingBeside ? "min-w-0 flex-1" : void 0, children: button }) : button;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
       className: cn(card && "rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm", className),
       children: [
-        hasTrailing ? /* @__PURE__ */ jsxs(
+        trailingBeside ? /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/** Read at the moment of closing, like `useCloseTransition` does: the setting can\n *  change under a long-lived page, and jsdom/SSR have no `matchMedia` — where \"no\n *  animation\" is also the only correct answer, since nothing is painting. */\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\" ||\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   */\n  chevronPosition?: \"start\" | \"end\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   */\n  trailing?: ReactNode;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAtEnd = card || (chevronPosition ?? (menu ? \"end\" : \"start\")) === \"end\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      aria-controls={triggerOnly ? controls : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        hasTrailing\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              hasTrailing ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {!chevronAtEnd && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {chevronAtEnd && !hasTrailing && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={hasTrailing ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {hasTrailing ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\n// Read at the moment of closing, as `useCloseTransition` does: the setting can change\n// under a long-lived page.\nimport { prefersReducedMotion } from \"../hooks/use-close-transition\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   *\n   * `after-title` sits it right after the title's text, pointing down and turning up —\n   * \"Net profit ⌄ ······ 1,234.50\", Lenkbank's result rows, where the far end of the\n   * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron\n   * would push every label off the column the non-expandable rows' labels start on.\n   * Not a card's: its chevron keeps the end.\n   */\n  chevronPosition?: \"start\" | \"end\" | \"after-title\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   *\n   * Unless {@link trailingInTrigger} is set, which moves it INTO the button.\n   */\n  trailing?: ReactNode;\n  /**\n   * Render {@link trailing} inside the header button instead of beside it, so the\n   * whole row — figure included — is one click target and the figure is part of the\n   * button's accessible name: \"Net profit 1,234.50, collapsed\" rather than a button\n   * called \"Net profit\" next to an unexplained number.\n   *\n   * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,\n   * chevron, and the value at the far end, all one `<button>`, because a result row\n   * has nothing else it could mean.\n   *\n   * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button\n   * may not contain another interactive element; an action belongs in the default,\n   * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing\n   * content too (no `div`s).\n   */\n  trailingInTrigger?: boolean;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   *\n   * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what\n   * folds is several elements — a budget group's category rows, each its own `<li>`,\n   * siblings of this header (keksdose's budget-mobile-list joins their ids with\n   * `\" \"`). It may be the EMPTY string: trigger-only mode with nothing to point at yet\n   * (a group whose rows are all filtered away, rows that are not rendered while shut).\n   * The header then carries no `aria-controls` at all rather than an empty one, and\n   * still toggles.\n   *\n   * A table's leading row — keksdose's \"Upcoming\" toggle over the scheduled rows of\n   * its transactions table — is this mode too: the rows it folds are the TABLE's, so\n   * the disclosure is only the header, and the table renders or drops them from the\n   * same state.\n   *\n   * ```tsx\n   * <DataTable\n   *   rows={showFuture ? [...scheduled, ...posted] : posted}\n   *   leadingRow={\n   *     <Disclosure\n   *       variant=\"bare\"\n   *       title={upcomingLabel}\n   *       open={showFuture}\n   *       onOpenChange={setShowFuture}\n   *       // The scheduled rows' ids while they are rendered; \"\" while they are not.\n   *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(\" \") : \"\"}\n   *       headerClassName=\"px-3 py-2\"\n   *     />\n   *   }\n   *   …\n   * />\n   * ```\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  trailingInTrigger = false,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAt = card ? \"end\" : (chevronPosition ?? (menu ? \"end\" : \"start\"));\n  const chevronAtEnd = chevronAt === \"end\";\n  const chevronAfterTitle = chevronAt === \"after-title\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n  // `trailing` beside the button, which then stretches under it; inside the button,\n  // the row is simply the button.\n  const trailingInside = hasTrailing && trailingInTrigger;\n  const trailingBeside = hasTrailing && !trailingInTrigger;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=\"\"`.\n      aria-controls={triggerOnly ? controls || undefined : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        trailingBeside\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              trailingBeside ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {chevronAt === \"start\" && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        {chevronAfterTitle ? (\n          // The chevron hugs the text, however long the translation: the text wraps\n          // before the chevron is pushed away from it.\n          <span className=\"flex items-center gap-1\">\n            <span className=\"min-w-0\">{title}</span>\n            <Chevron open={open} small />\n          </span>\n        ) : (\n          <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        )}\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {/* The space is for the accessible name — \"Net profit 1,234.50\", not\n          \"Net profit1,234.50\"; between flex items it renders as nothing. */}\n      {trailingInside && \" \"}\n      {trailingInside && (\n        <span data-disclosure-trailing=\"\" className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n        </span>\n      )}\n      {chevronAtEnd && !trailingBeside && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={trailingBeside ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {trailingBeside ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/field.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** What a `Field` hands its render-prop children, to spread on the control. */
+interface FieldControlProps {
+    /** The id the label's `htmlFor` points at. */
+    id: string;
+    /** The ids of the hint and the error that are rendered, or `undefined` when
+     *  neither is. */
+    "aria-describedby": string | undefined;
+    /** `true` while the field has an error, `undefined` otherwise. */
+    "aria-invalid": true | undefined;
+    /** `true` when the field is `required`. The label's star is `aria-hidden`; this
+     *  is what a screen reader hears instead. */
+    "aria-required": true | undefined;
+}
+interface FieldProps {
+    /** The label above the control. Omit it for a group whose control is labelled
+     *  some other way; the hint and error still render. */
+    label?: ReactNode;
+    /** Draws the kit's required mark after the label, and sets `aria-required` on the
+     *  render-prop control. */
+    required?: boolean;
+    /** Muted helper text below the control. */
+    hint?: ReactNode;
+    /** The error below the control. `null`, `false` and `""` are no error — what a
+     *  `touched && errors.x` evaluates to on the happy path. */
+    error?: ReactNode;
+    /** The control's id. Defaults to a generated one; set it when the control carries
+     *  its own id (plain children). */
+    htmlFor?: string;
+    /** Dims the label with its control. */
+    disabled?: boolean;
+    /** The label's size: `sm` for a dense row, `md` otherwise. */
+    labelSize?: "sm" | "md";
+    /** Wrapper className. */
+    className?: string;
+    /** The control. A function receives {@link FieldControlProps} to spread on it. */
+    children: ReactNode | ((control: FieldControlProps) => ReactNode);
+}
+declare function Field({ label, required, hint, error, htmlFor, disabled, labelSize, className, children, }: FieldProps): react.JSX.Element;
+
+export { Field, type FieldControlProps, type FieldProps };

package/dist/components/field.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/cn.js";
+import { Label } from "./ui.js";
+const isShown = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+function Field({
+  label,
+  required,
+  hint,
+  error,
+  htmlFor,
+  disabled,
+  labelSize,
+  className,
+  children
+}) {
+  const generated = useId();
+  const id = htmlFor ?? `${generated}-control`;
+  const hintId = `${generated}-hint`;
+  const errorId = `${generated}-error`;
+  const hasHint = isShown(hint);
+  const hasError = isShown(error);
+  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(" ");
+  const control = {
+    id,
+    "aria-describedby": describedBy || void 0,
+    "aria-invalid": hasError || void 0,
+    "aria-required": required || void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "field", className: cn("grid gap-1.5", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id,
+        required,
+        disabled,
+        size: labelSize,
+        "data-error": hasError || void 0,
+        className: "data-[error=true]:text-[var(--danger)]",
+        children: label
+      }
+    ),
+    typeof children === "function" ? children(control) : children,
+    hasHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+    hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-[11px] leading-tight text-[var(--danger)]", children: error })
+  ] });
+}
+export {
+  Field
+};
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field.tsx"],"sourcesContent":["/**\n * A field group with its label ABOVE the control: label, control, hint, error.\n *\n * ```tsx\n * <Field label=\"IBAN\" required hint=\"22 characters\" error={errors.iban}>\n *   {(ids) => <Input {...ids} value={iban} onChange={…} />}\n * </Field>\n * ```\n *\n * The kit's `Input` and `Select` float their label inside the field, and the pickers\n * draw theirs the same way. That is the wrong shape for a control the kit did not\n * render, a radio group, a range slider, or a form that sets its labels above the\n * fields throughout — which is what kastlan's wizards are, and why it kept its own\n * `WizardField` after the kit dropped the one it had never rendered. This is that\n * group, with the wiring the old one left to the caller: the label names the control\n * through `htmlFor`, and the control is described by the hint and the error that are\n * actually on screen.\n *\n * ## Wiring\n *\n * Pass a function as `children` and it receives {@link FieldControlProps} — `id`,\n * `aria-describedby`, `aria-invalid` and `aria-required` — to spread on the control.\n * Plain children render as they are, for a control that wires itself (a checkbox that\n * carries its own label, a group with `aria-labelledby`); `htmlFor` then points the\n * label at the control's own id, and the hint and error are on screen but describe\n * nothing — the same as the `WizardField` this replaces.\n *\n * ## Decoupled\n *\n * Deliberately knows neither the wizard nor react-hook-form: `error` is a plain\n * value. Pass `wizard.fieldErrors.iban`, a step-local error, or\n * `fieldState.error?.message` from a `FormField` render — the markup is the same\n * whichever of them gates the step, so a step can move between them without its\n * fields changing. (Inside a react-hook-form form, `FormItem` + `FormLabel` from\n * `@eifi1/ui-kit/rhf` do the same job with the ids taken from the form.)\n *\n * The error is NOT `role=\"alert\"`, for the reason the kit's `error` prop gives (see\n * `useFieldError` in components/ui.tsx): it is read when focus reaches the control.\n */\nimport { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Label } from \"./ui\";\n\n/** What a `Field` hands its render-prop children, to spread on the control. */\nexport interface FieldControlProps {\n  /** The id the label's `htmlFor` points at. */\n  id: string;\n  /** The ids of the hint and the error that are rendered, or `undefined` when\n   *  neither is. */\n  \"aria-describedby\": string | undefined;\n  /** `true` while the field has an error, `undefined` otherwise. */\n  \"aria-invalid\": true | undefined;\n  /** `true` when the field is `required`. The label's star is `aria-hidden`; this\n   *  is what a screen reader hears instead. */\n  \"aria-required\": true | undefined;\n}\n\nexport interface FieldProps {\n  /** The label above the control. Omit it for a group whose control is labelled\n   *  some other way; the hint and error still render. */\n  label?: ReactNode;\n  /** Draws the kit's required mark after the label, and sets `aria-required` on the\n   *  render-prop control. */\n  required?: boolean;\n  /** Muted helper text below the control. */\n  hint?: ReactNode;\n  /** The error below the control. `null`, `false` and `\"\"` are no error — what a\n   *  `touched && errors.x` evaluates to on the happy path. */\n  error?: ReactNode;\n  /** The control's id. Defaults to a generated one; set it when the control carries\n   *  its own id (plain children). */\n  htmlFor?: string;\n  /** Dims the label with its control. */\n  disabled?: boolean;\n  /** The label's size: `sm` for a dense row, `md` otherwise. */\n  labelSize?: \"sm\" | \"md\";\n  /** Wrapper className. */\n  className?: string;\n  /** The control. A function receives {@link FieldControlProps} to spread on it. */\n  children: ReactNode | ((control: FieldControlProps) => ReactNode);\n}\n\nconst isShown = (node: ReactNode) =>\n  node !== undefined && node !== null && node !== false && node !== \"\";\n\nexport function Field({\n  label,\n  required,\n  hint,\n  error,\n  htmlFor,\n  disabled,\n  labelSize,\n  className,\n  children,\n}: FieldProps) {\n  const generated = useId();\n  const id = htmlFor ?? `${generated}-control`;\n  const hintId = `${generated}-hint`;\n  const errorId = `${generated}-error`;\n  const hasHint = isShown(hint);\n  const hasError = isShown(error);\n  const describedBy = [hasHint && hintId, hasError && errorId].filter(Boolean).join(\" \");\n  const control: FieldControlProps = {\n    id,\n    \"aria-describedby\": describedBy || undefined,\n    \"aria-invalid\": hasError || undefined,\n    \"aria-required\": required || undefined,\n  };\n  return (\n    <div data-slot=\"field\" className={cn(\"grid gap-1.5\", className)}>\n      {label !== undefined && (\n        <Label\n          htmlFor={id}\n          required={required}\n          disabled={disabled}\n          size={labelSize}\n          data-error={hasError || undefined}\n          className=\"data-[error=true]:text-[var(--danger)]\"\n        >\n          {label}\n        </Label>\n      )}\n      {typeof children === \"function\" ? children(control) : children}\n      {hasHint && (\n        <p id={hintId} className=\"text-[11px] leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className=\"text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8GI,SAEI,KAFJ;AAvEJ,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,aAAa;AAyCtB,MAAM,UAAU,CAAC,SACf,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAE7D,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,MAAM;AACxB,QAAM,KAAK,WAAW,GAAG,SAAS;AAClC,QAAM,SAAS,GAAG,SAAS;AAC3B,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,UAAU,QAAQ,IAAI;AAC5B,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,cAAc,CAAC,WAAW,QAAQ,YAAY,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrF,QAAM,UAA6B;AAAA,IACjC;AAAA,IACA,oBAAoB,eAAe;AAAA,IACnC,gBAAgB,YAAY;AAAA,IAC5B,iBAAiB,YAAY;AAAA,EAC/B;AACA,SACE,qBAAC,SAAI,aAAU,SAAQ,WAAW,GAAG,gBAAgB,SAAS,GAC3D;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,cAAY,YAAY;AAAA,QACxB,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAED,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;AAAA,IACrD,WACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,sDACtB,gBACH;AAAA,IAED,YACC,oBAAC,OAAE,IAAI,SAAS,WAAU,kDACvB,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/file-button.d.ts

@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
 import { Button } from './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * A button that opens the file picker — the shape all three apps kept writing by hand

package/dist/components/file-dropzone.d.ts

@@ -4,6 +4,7 @@ import { FileRejection, FilePickHandler, FilePickerLabels } from './file-button.
 import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * Where a refused file's message goes.
@@ -85,10 +86,9 @@ interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onInv
      * carries the reason and the translated message as well.
      *
      * Its existence used to be what switched the toast off, and it still does (see
-     * {@link rejectionFeedback}). The toast is a dynamic `import("sonner")` on the
-     * failure path only: `sonner` is an OPTIONAL peer, and a static import here once
-     * broke `import { Button }` for every app without it (see
-     * `optional-peer-imports.test.tsx`).
+     * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`
+     * lazily: it is an OPTIONAL peer, and a static import here once broke
+     * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).
      */
     onInvalid?: (file: File) => void;
     /** Every refused file of one pick, with its reason and message. */