@eifi1/ui-kit 0.32.2 → 0.33.0

package/dist/components/table.js

@@ -241,6 +241,12 @@ function TableRow({ valign, variant = "row", bordered, className, ref: refProp,
         body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
         record && zebra && "even:bg-[var(--bg-surface-2)]",
         record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it
+        // (0.33: the light well is the page colour): it hovers to the card instead, the
+        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at
+        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the
+        // row's own `hover:`.
+        record && zebra && hover && "even:hover:bg-surface",
         ROW_VARIANT[variant],
         // On the row as well, for a raw `<td>` of the caller's, which inherits it.
         valign && VALIGN[valign],

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./choice-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-[var(--border)]\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-[var(--text-muted)]\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-[var(--border-strong)] font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-[var(--bg-surface-2)] font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-[var(--border-strong)] font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-[var(--border)]\",\n        record && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        record && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-[var(--text-muted)]\" : \"text-[var(--text-secondary)]\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-[var(--text-muted)]\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./choice-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to\n   *  the card colour (0.33): the hover tint is too close to the well. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-[var(--border)]\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-[var(--text-muted)]\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-[var(--border-strong)] font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-[var(--bg-surface-2)] font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-[var(--border-strong)] font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-[var(--border)]\",\n        record && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        record && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it\n        // (0.33: the light well is the page colour): it hovers to the card instead, the\n        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at\n        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the\n        // row's own `hover:`.\n        record && zebra && hover && \"even:hover:bg-surface\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-[var(--text-muted)]\" : \"text-[var(--text-secondary)]\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-[var(--text-muted)]\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/text-link.d.ts

@@ -1,19 +1,24 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { e0 as KitLinkComponent } from '../delete-account-setting-Dy4kJgUm.js';
+import { e1 as KitLinkComponent } from '../delete-account-setting-DiPX4Vue.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -25,7 +30,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -37,9 +41,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -55,7 +56,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/time-input.d.ts

@@ -1,18 +1,23 @@
 import * as react from 'react';
-import { dO as InputProps } from '../delete-account-setting-Dy4kJgUm.js';
+import { dP as InputProps } from '../delete-account-setting-DiPX4Vue.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/toggle-group.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode, ReactElement } from 'react';
+import { CommitScope } from './write-lock.js';
 import { DisabledReasonDisplay } from './field-parts.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
@@ -157,7 +158,7 @@ interface ToggleGroupBaseProps<T extends string> extends Omit<ComponentPropsWith
      * must render refused, never live-and-discarding. No provider, or an unlocked one:
      * no effect.
      */
-    commit?: boolean;
+    commit?: CommitScope;
 }
 /**
  * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField

package/dist/components/toggle-group.js

@@ -16,7 +16,7 @@ import {
   useInlineHint
 } from "./field-parts.js";
 import { FOCUS_RING_WIDTH } from "./focus-ring.js";
-const CHROME_PAD = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
+const CHROME_PAD = { md: "pt-5 pb-0.5 large:pt-0.5", sm: "pt-5 pb-1 large:pt-1" };
 const CHROME_SEGMENT = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
 const WRAP_AT_LARGE = "large:flex-wrap";
 const STRIP_SEGMENT = { md: "py-0", sm: "py-0.5" };

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  FIELD_CAPTION_CLASS,\n  hasContent,\n  isTextHint,\n  LabelStrip,\n  useDisabledReasonLine,\n  useInlineHint,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   *\n   * Since 0.32 a group in the field chrome (`label`, the default placement) with four or\n   * more options wraps at Large and Extra large under `\"truncate\"` too, inside its frame:\n   * the type is bigger there and the field would otherwise run past a phone's edge\n   * (docs/text-size-harmonization.md §4). The keyboard is the same either way.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   *\n   * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type\n   * stays, and the field is still 42px — see `CHROME_PAD`.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * `\"strip\"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a\n   * group that stands in a row of fields but is not one (keksdose K2 — the transaction\n   * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group\n   * keeps its own box, and its segments drop their vertical padding so a 16px strip\n   * plus the 26px group is exactly a labelled {@link Input}'s 42px, the label on the\n   * same line as theirs. `error` and `caption` go under the group, as in the other two.\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\" | \"strip\";\n  /**\n   * Classes for the field chrome's own box — the bordered, padded box round the\n   * segments — merged last, so they win. `className` styles the wrapper the chrome sits\n   * in; this reaches the box itself. Only with `label` in the `\"field\"` placement.\n   *\n   * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its\n   * \"group by\" field to the range select on its start edge from `md` up, and squares the\n   * shared corners by hand chrome today — here that is\n   * `chromeClassName=\"md:rounded-s-none\"` with `className=\"md:-ms-px\"` (the wrapper\n   * overlaps the neighbour by the one border they share). A class rather than a\n   * `joined=\"start\"` because every such join keksdose has is responsive: on a phone the\n   * two stack and both keep their corners.\n   */\n  chromeClassName?: string;\n  /**\n   * As on a labelled {@link Select}: a {@link FieldHint} \"?\" on the label line, and plain\n   * text (a string) as a caption under the group. Only with `label`.\n   *\n   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so\n   * `TextSizeSetting`'s hint with `labelPlacement=\"above\"` sat beside the label in body\n   * type, and at Extra large became a column one word wide — on the setting a reader who\n   * needs large text opens first. The label line holds the \"?\" only (`isTextHint`).\n   */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n  /**\n   * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are\n   * self-committing controls like this one, and SaveGuard's native `disabled` took\n   * them out of the tab order so the reason never reached a keyboard).\n   *\n   * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and\n   * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and\n   * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and\n   * describes each segment. The chosen option keeps its fill, as under `disabled`.\n   * Wins over `disabled`, as on Button: passing both keeps the group reachable.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the group (where its caption goes), and\n   * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This group COMMITS — choosing an option saves it. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over a `disabledReason` of its own): *\"everything renders; only\n   * the commit is locked\"* (keksdose dev#496/#497), and a control that is its own commit\n   * must render refused, never live-and-discarding. No provider, or an unlocked one:\n   * no effect.\n   */\n  commit?: boolean;\n}\n\n/**\n * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback\n * #117 that keksdose's hand-built chrome had fixed.\n *\n * In px at Normal, as measured; since 0.32 every term but the two borders is rem\n * (§3.2), so the sum stays a labelled Select's at 125 and 150 % too — the Select's own\n * `pt-4 pb-1` and 1.25rem line grow by the same factor (52 px at Large, 62 at Extra\n * large). The md line was `leading-[18px]` and is `leading-[1.125rem]`.\n *\n * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so\n * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px\n * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the\n * segment — started at 17px (1px border + 16px), 0.75px INSIDE the label's line box:\n * the highlight touched the word above it, exactly what #117's rework had measured and\n * cured with `pt-5`.\n *\n * Now the strip is `pt-5` and the fill starts at 21px, 3.25px clear, and the segment\n * gives the 4px back so the field stays a labelled Select's 42px: `md` sets its 14px\n * text in an 18px line with a 2px moat under it (the bare group's own `p-0.5` moat),\n * `sm` sets 12px text in a 16px line over `pb-1` — keksdose's measured chrome\n * (price-level-picker, reports-filters: `pt-5 pb-1`, `text-xs md:py-0`), byte for byte.\n * Before, `size=\"sm\"` inside the chrome was overridden to the md 20px line.\n *\n *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42\n */\nconst CHROME_PAD: Record<\"sm\" | \"md\", string> = { md: \"pt-5 pb-0.5\", sm: \"pt-5 pb-1\" };\nconst CHROME_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0 leading-[1.125rem]\", sm: \"py-0 leading-4\" };\n\n/**\n * A group at Large and Extra large (0.32,\n * docs/text-size-harmonization.md §4 \"nothing truncates\", §3.3): the segments flow onto a\n * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone\n * is 312 px of Normal type, and \"Month / Quarter / Half-year / Year\" in one row of the\n * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end\n * when a grid or a stretched column asks how small it can get, however its segments\n * truncate. Wrapped, it is as wide as its longest label.\n *\n * Wrap, not a stacked select-like list: a wrapped radio group is the same radio group —\n * one Tab stop, and the arrow keys walk the options in reading order whichever row\n * they are on (←/↑ back, →/↓ on, Home/End) — so nothing about the keyboard changes with\n * the text size. A list in its place would be a second widget with its own keys.\n *\n * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so\n * a wide field at Large stays one row, and a segment shares out what its row leaves\n * (`flex-1`); a label wider than the whole row still truncates as the last resort.\n * A `large:` class, so it costs no render and is right on the first paint.\n * `overflow=\"wrap\"` wraps at every size already.\n *\n * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement but the\n * strip, not only a field of four or more. Since a row breaks only where its labels do\n * not fit, a wrap only ever replaces a truncation — and three options in a card at\n * Extra large on a 360 px phone read \"Syst… Li… D…\". The strip keeps one row: its\n * 26 px group is what lines it up with the 42 px fields beside it (`STRIP_SEGMENT`).\n */\nconst WRAP_AT_LARGE = \"large:flex-wrap\";\n\n/**\n * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px\n * strip — `md`'s 20px text-sm line with no padding, `sm`'s 16px line with 2px either\n * side. See `LABEL_STRIP_PAD` for why 16.\n */\nconst STRIP_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0\", sm: \"py-0.5\" };\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted caption-size text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    chromeClassName,\n    hint,\n    error,\n    disabledReason: ownDisabledReason,\n    disabledReasonDisplay,\n    commit,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const reasonId = useId();\n  const hintCaptionId = useId();\n  // The lock's reason under a locked provider (with `commit`), else the group's own.\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // §4: at Large and on touch the reason is a line under the group, not a bubble.\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;\n  // §4: likewise a FieldHint \"?\" on the label line becomes a caption under the group at\n  // Large and on touch; text is a caption at every size, as Select's (see `hint`).\n  const inlineHint = useInlineHint(hint);\n  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;\n  const labelHint = hintAsCaption === undefined ? hint : undefined;\n  // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —\n  // but stays focusable; `disabled` alone also takes the segments out of the tab order.\n  const dimmed = disabled || locked;\n  const labelled = hasContent(label);\n  // `field` is the chrome; a label placed above or in a strip keeps the bare group's\n  // own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const strip = labelled && labelPlacement === \"strip\";\n  // At Large and Extra large a truncating group wraps instead, the strip excepted (see\n  // WRAP_AT_LARGE).\n  const wrapAtLarge = overflow === \"truncate\" && !strip;\n  const hasError = labelled && hasContent(error);\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = hasContent(captionNode);\n  const choose = (next: T) => {\n    // A locked group swallows the change: it saves on change, and a lock that let the\n    // value move and then discarded it would show a state that was never stored.\n    if (locked) return;\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    // The segments' own parent: the group, or under a lock the tooltip's row inside it.\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    // Locked: the focus walks (each segment says why on arrival), the choice does not.\n    choose(options[next].value);\n  };\n  const segments = options.map((opt, index) => {\n    const active = opt.value === value;\n    return (\n      <button\n        key={opt.value}\n        type=\"button\"\n        role={pressed ? undefined : \"radio\"}\n        aria-checked={pressed ? undefined : active}\n        aria-pressed={pressed ? active : undefined}\n        // A reason wins over `disabled` (as on Button): reachable, and refusing.\n        disabled={disabled && !locked}\n        aria-disabled={locked || undefined}\n        // On each segment rather than the group: the segment is what takes focus, and\n        // a group's description is not read reliably when focus lands inside it.\n        aria-describedby={locked ? reasonId : undefined}\n        tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n        onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n        onClick={() => choose(opt.value)}\n        className={cn(\n          // `truncate` (which carries whitespace-nowrap) rather than letting a\n          // label wrap: a segmented control sizes its whole row to the tallest\n          // option, so one two-word option — Keksdose feedback #147's \"Where I\n          // am\" — silently doubles the height of every segment beside it.\n          //\n          // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n          // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n          // labels' widths — and then splits it EQUALLY, so the short option\n          // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n          // truncated at 1778px of free screen. Basing each segment on its own\n          // content and sharing only the LEFTOVER space keeps a full-width\n          // group's segments near-equal and an auto-width group's exact.\n          //\n          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n          // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n          // 2px of ring over both neighbours and over the container's own border\n          // — and on a phone it appeared on every TAP, because a tap focuses the\n          // button. That is the other half of what live #268's rework saw\n          // overlaying the selected segment's boundary. Inset keeps the ring\n          // inside the segment it belongs to; focus-visible keeps it for the\n          // keyboard, which is the only input that needs it.\n          //\n          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.\n          overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n          \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n          FOCUS_RING_WIDTH,\n          size === \"sm\" && \"px-2 py-1 text-xs\",\n          // In the field chrome: no vertical padding, and the line that makes the\n          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`\n          // keeps its 12px type here (it used to be overridden to the md line).\n          field && CHROME_SEGMENT[size],\n          // In the strip placement: a 26px group under a 16px strip — STRIP_SEGMENT.\n          strip && STRIP_SEGMENT[size],\n          active\n            ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n            : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n          // No hover fill on a group that cannot be changed — a segment that\n          // lights up under the pointer is an offer, and there is none here. Not on\n          // the chosen segment: its fill IS its state, and its inverse text would\n          // vanish on a transparent hover.\n          dimmed && \"cursor-not-allowed\",\n          dimmed && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n          optionClassName,\n          opt.className,\n        )}\n      >\n        {opt.label}\n      </button>\n    );\n  });\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]\n          .filter(Boolean)\n          .join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as on (or `disabled` on) each button: a\n      // radio group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={dimmed || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        wrapAtLarge && WRAP_AT_LARGE,\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        dimmed && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || ((above || strip) && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {locked && !reasonLine ? (\n        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a\n        // wrapper outside it would become the flex or grid item in the caller's row in\n        // the group's place, and a `w-full` / `md:w-auto` on the group would size the\n        // wrong box. This row inherits the group's gap and wrap, so the segments lay out\n        // exactly as they do unlocked, and `:scope > button` above still finds them. A\n        // fragment child, so the Tooltip describes nothing itself — each segment points\n        // at the hidden copy, the way a locked Button does.\n        <Tooltip label={disabledReason} className=\"flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]\">\n          <>\n            {segments}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        segments\n      )}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-caption leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  // §4: the FieldHint's words and the lock's reason, under the group, before the caption\n  // (standing advice first) and the error (the news). The reason line IS what each\n  // segment's `aria-describedby` names.\n  const belowEl =\n    hintAsCaption !== undefined || reasonLine ? (\n      <>\n        {hintAsCaption !== undefined && (\n          <p id={hintCaptionId} className={FIELD_CAPTION_CLASS}>\n            {hintAsCaption}\n          </p>\n        )}\n        {reasonLine && (\n          <p id={reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {disabledReason}\n          </p>\n        )}\n      </>\n    ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={dimmed}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {labelHint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {belowEl}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (strip) {\n    return (\n      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} pad=\"field\" className={className}>\n        {group}\n        {belowEl}\n        {captionEl}\n        {errorEl}\n      </LabelStrip>\n    );\n  }\n  if (!field) {\n    if (!captionEl && !belowEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {belowEl}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={labelHint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 shadow-sm\",\n            CHROME_PAD[size],\n            dimmed && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n            chromeClassName,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {belowEl}\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  FIELD_CAPTION_CLASS,\n  hasContent,\n  isTextHint,\n  LabelStrip,\n  useDisabledReasonLine,\n  useInlineHint,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   *\n   * Since 0.32 a group in the field chrome (`label`, the default placement) with four or\n   * more options wraps at Large and Extra large under `\"truncate\"` too, inside its frame:\n   * the type is bigger there and the field would otherwise run past a phone's edge\n   * (docs/text-size-harmonization.md §4). The keyboard is the same either way.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   *\n   * Honoured inside the field chrome and the strip too (keksdose K1): the 12px type\n   * stays, and the field is still 42px — see `CHROME_PAD`.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * `\"strip\"`: the 11px static label (and `hint`) in a strip OVER the bare group, for a\n   * group that stands in a row of fields but is not one (keksdose K2 — the transaction\n   * row's cleared-status picker, live #288 / #431 / dev#468). No field border: the group\n   * keeps its own box, and its segments drop their vertical padding so a 16px strip\n   * plus the 26px group is exactly a labelled {@link Input}'s 42px, the label on the\n   * same line as theirs. `error` and `caption` go under the group, as in the other two.\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\" | \"strip\";\n  /**\n   * Classes for the field chrome's own box — the bordered, padded box round the\n   * segments — merged last, so they win. `className` styles the wrapper the chrome sits\n   * in; this reaches the box itself. Only with `label` in the `\"field\"` placement.\n   *\n   * For a field JOINED flush to a neighbour (keksdose K1): reports-filters.tsx joins its\n   * \"group by\" field to the range select on its start edge from `md` up, and squares the\n   * shared corners by hand chrome today — here that is\n   * `chromeClassName=\"md:rounded-s-none\"` with `className=\"md:-ms-px\"` (the wrapper\n   * overlaps the neighbour by the one border they share). A class rather than a\n   * `joined=\"start\"` because every such join keksdose has is responsive: on a phone the\n   * two stack and both keep their corners.\n   */\n  chromeClassName?: string;\n  /**\n   * As on a labelled {@link Select}: a {@link FieldHint} \"?\" on the label line, and plain\n   * text (a string) as a caption under the group. Only with `label`.\n   *\n   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so\n   * `TextSizeSetting`'s hint with `labelPlacement=\"above\"` sat beside the label in body\n   * type, and at Extra large became a column one word wide — on the setting a reader who\n   * needs large text opens first. The label line holds the \"?\" only (`isTextHint`).\n   */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n  /**\n   * Why the group cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a group that saves itself on change (keksdose K3: the last `SaveGuard` sites are\n   * self-committing controls like this one, and SaveGuard's native `disabled` took\n   * them out of the tab order so the reason never reached a keyboard).\n   *\n   * The group stays reachable — its segments are `aria-disabled`, not `disabled`, and\n   * a radio group's arrow keys still walk them — but nothing reaches `onChange`, and\n   * the reason shows in the kit {@link Tooltip} over the segments on hover or focus and\n   * describes each segment. The chosen option keeps its fill, as under `disabled`.\n   * Wins over `disabled`, as on Button: passing both keeps the group reachable.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line under the group (where its caption goes), and\n   * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This group COMMITS — choosing an option saves it. Under a locked\n   * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   * reason (which wins over a `disabledReason` of its own): *\"everything renders; only\n   * the commit is locked\"* (keksdose dev#496/#497), and a control that is its own commit\n   * must render refused, never live-and-discarding. No provider, or an unlocked one:\n   * no effect.\n   */\n  commit?: CommitScope;\n}\n\n/**\n * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback\n * #117 that keksdose's hand-built chrome had fixed.\n *\n * In px at Normal, as measured; since 0.32 every term but the two borders is rem\n * (§3.2), so the sum stays a labelled Select's at 125 and 150 % too — the Select's own\n * `pt-4 pb-1` and 1.25rem line grow by the same factor (52 px at Large, 62 at Extra\n * large). The md line was `leading-[18px]` and is `leading-[1.125rem]`.\n *\n * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so\n * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px\n * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the\n * segment — started at 17px (1px border + 16px), 0.75px INSIDE the label's line box:\n * the highlight touched the word above it, exactly what #117's rework had measured and\n * cured with `pt-5`.\n *\n * Now the strip is `pt-5` and the fill starts at 21px, 3.25px clear, and the segment\n * gives the 4px back so the field stays a labelled Select's 42px: `md` sets its 14px\n * text in an 18px line with a 2px moat under it (the bare group's own `p-0.5` moat),\n * `sm` sets 12px text in a 16px line over `pb-1` — keksdose's measured chrome\n * (price-level-picker, reports-filters: `pt-5 pb-1`, `text-xs md:py-0`), byte for byte.\n * Before, `size=\"sm\"` inside the chrome was overridden to the md 20px line.\n *\n *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42\n */\n// At Large the chrome's label stands above it (0.33, §10.17): no strip, the same moat top\n// and bottom.\nconst CHROME_PAD: Record<\"sm\" | \"md\", string> = { md: \"pt-5 pb-0.5 large:pt-0.5\", sm: \"pt-5 pb-1 large:pt-1\" };\nconst CHROME_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0 leading-[1.125rem]\", sm: \"py-0 leading-4\" };\n\n/**\n * A group at Large and Extra large (0.32,\n * docs/text-size-harmonization.md §4 \"nothing truncates\", §3.3): the segments flow onto a\n * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone\n * is 312 px of Normal type, and \"Month / Quarter / Half-year / Year\" in one row of the\n * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end\n * when a grid or a stretched column asks how small it can get, however its segments\n * truncate. Wrapped, it is as wide as its longest label.\n *\n * Wrap, not a stacked select-like list: a wrapped radio group is the same radio group —\n * one Tab stop, and the arrow keys walk the options in reading order whichever row\n * they are on (←/↑ back, →/↓ on, Home/End) — so nothing about the keyboard changes with\n * the text size. A list in its place would be a second widget with its own keys.\n *\n * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so\n * a wide field at Large stays one row, and a segment shares out what its row leaves\n * (`flex-1`); a label wider than the whole row still truncates as the last resort.\n * A `large:` class, so it costs no render and is right on the first paint.\n * `overflow=\"wrap\"` wraps at every size already.\n *\n * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement but the\n * strip, not only a field of four or more. Since a row breaks only where its labels do\n * not fit, a wrap only ever replaces a truncation — and three options in a card at\n * Extra large on a 360 px phone read \"Syst… Li… D…\". The strip keeps one row: its\n * 26 px group is what lines it up with the 42 px fields beside it (`STRIP_SEGMENT`).\n */\nconst WRAP_AT_LARGE = \"large:flex-wrap\";\n\n/**\n * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px\n * strip — `md`'s 20px text-sm line with no padding, `sm`'s 16px line with 2px either\n * side. See `LABEL_STRIP_PAD` for why 16.\n */\nconst STRIP_SEGMENT: Record<\"sm\" | \"md\", string> = { md: \"py-0\", sm: \"py-0.5\" };\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted caption-size text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    chromeClassName,\n    hint,\n    error,\n    disabledReason: ownDisabledReason,\n    disabledReasonDisplay,\n    commit,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const reasonId = useId();\n  const hintCaptionId = useId();\n  // The lock's reason under a locked provider (with `commit`), else the group's own.\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  // §4: at Large and on touch the reason is a line under the group, not a bubble.\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;\n  // §4: likewise a FieldHint \"?\" on the label line becomes a caption under the group at\n  // Large and on touch; text is a caption at every size, as Select's (see `hint`).\n  const inlineHint = useInlineHint(hint);\n  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;\n  const labelHint = hintAsCaption === undefined ? hint : undefined;\n  // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —\n  // but stays focusable; `disabled` alone also takes the segments out of the tab order.\n  const dimmed = disabled || locked;\n  const labelled = hasContent(label);\n  // `field` is the chrome; a label placed above or in a strip keeps the bare group's\n  // own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const strip = labelled && labelPlacement === \"strip\";\n  // At Large and Extra large a truncating group wraps instead, the strip excepted (see\n  // WRAP_AT_LARGE).\n  const wrapAtLarge = overflow === \"truncate\" && !strip;\n  const hasError = labelled && hasContent(error);\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = hasContent(captionNode);\n  const choose = (next: T) => {\n    // A locked group swallows the change: it saves on change, and a lock that let the\n    // value move and then discarded it would show a state that was never stored.\n    if (locked) return;\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    // The segments' own parent: the group, or under a lock the tooltip's row inside it.\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    // Locked: the focus walks (each segment says why on arrival), the choice does not.\n    choose(options[next].value);\n  };\n  const segments = options.map((opt, index) => {\n    const active = opt.value === value;\n    return (\n      <button\n        key={opt.value}\n        type=\"button\"\n        role={pressed ? undefined : \"radio\"}\n        aria-checked={pressed ? undefined : active}\n        aria-pressed={pressed ? active : undefined}\n        // A reason wins over `disabled` (as on Button): reachable, and refusing.\n        disabled={disabled && !locked}\n        aria-disabled={locked || undefined}\n        // On each segment rather than the group: the segment is what takes focus, and\n        // a group's description is not read reliably when focus lands inside it.\n        aria-describedby={locked ? reasonId : undefined}\n        tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n        onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n        onClick={() => choose(opt.value)}\n        className={cn(\n          // `truncate` (which carries whitespace-nowrap) rather than letting a\n          // label wrap: a segmented control sizes its whole row to the tallest\n          // option, so one two-word option — Keksdose feedback #147's \"Where I\n          // am\" — silently doubles the height of every segment beside it.\n          //\n          // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n          // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n          // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n          // labels' widths — and then splits it EQUALLY, so the short option\n          // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n          // truncated at 1778px of free screen. Basing each segment on its own\n          // content and sharing only the LEFTOVER space keeps a full-width\n          // group's segments near-equal and an auto-width group's exact.\n          //\n          // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n          // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n          // 2px of ring over both neighbours and over the container's own border\n          // — and on a phone it appeared on every TAP, because a tap focuses the\n          // button. That is the other half of what live #268's rework saw\n          // overlaying the selected segment's boundary. Inset keeps the ring\n          // inside the segment it belongs to; focus-visible keeps it for the\n          // keyboard, which is the only input that needs it.\n          //\n          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.\n          overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n          \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n          FOCUS_RING_WIDTH,\n          size === \"sm\" && \"px-2 py-1 text-xs\",\n          // In the field chrome: no vertical padding, and the line that makes the\n          // field 42px under a strip that clears the label — see CHROME_PAD. `sm`\n          // keeps its 12px type here (it used to be overridden to the md line).\n          field && CHROME_SEGMENT[size],\n          // In the strip placement: a 26px group under a 16px strip — STRIP_SEGMENT.\n          strip && STRIP_SEGMENT[size],\n          active\n            ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n            : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n          // No hover fill on a group that cannot be changed — a segment that\n          // lights up under the pointer is an offer, and there is none here. Not on\n          // the chosen segment: its fill IS its state, and its inverse text would\n          // vanish on a transparent hover.\n          dimmed && \"cursor-not-allowed\",\n          dimmed && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n          optionClassName,\n          opt.className,\n        )}\n      >\n        {opt.label}\n      </button>\n    );\n  });\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]\n          .filter(Boolean)\n          .join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as on (or `disabled` on) each button: a\n      // radio group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={dimmed || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        wrapAtLarge && WRAP_AT_LARGE,\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        dimmed && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || ((above || strip) && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {locked && !reasonLine ? (\n        // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a\n        // wrapper outside it would become the flex or grid item in the caller's row in\n        // the group's place, and a `w-full` / `md:w-auto` on the group would size the\n        // wrong box. This row inherits the group's gap and wrap, so the segments lay out\n        // exactly as they do unlocked, and `:scope > button` above still finds them. A\n        // fragment child, so the Tooltip describes nothing itself — each segment points\n        // at the hidden copy, the way a locked Button does.\n        <Tooltip label={disabledReason} className=\"flex min-w-0 flex-1 gap-[inherit] [flex-wrap:inherit]\">\n          <>\n            {segments}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        segments\n      )}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-caption leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  // §4: the FieldHint's words and the lock's reason, under the group, before the caption\n  // (standing advice first) and the error (the news). The reason line IS what each\n  // segment's `aria-describedby` names.\n  const belowEl =\n    hintAsCaption !== undefined || reasonLine ? (\n      <>\n        {hintAsCaption !== undefined && (\n          <p id={hintCaptionId} className={FIELD_CAPTION_CLASS}>\n            {hintAsCaption}\n          </p>\n        )}\n        {reasonLine && (\n          <p id={reasonId} className={DISABLED_REASON_LINE_CLASS}>\n            {disabledReason}\n          </p>\n        )}\n      </>\n    ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={dimmed}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {labelHint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {belowEl}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (strip) {\n    return (\n      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} pad=\"field\" className={className}>\n        {group}\n        {belowEl}\n        {captionEl}\n        {errorEl}\n      </LabelStrip>\n    );\n  }\n  if (!field) {\n    if (!captionEl && !belowEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {belowEl}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={labelHint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 shadow-sm\",\n            CHROME_PAD[size],\n            dimmed && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n            chromeClassName,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {belowEl}\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/translation-review-editor.d.ts

@@ -58,6 +58,10 @@ interface TranslationReviewEditorProps {
  * Every action waits for its callback: the buttons hold while the promise is out, a
  * resolution closes the editor through `onClose`, and a rejection keeps it open with what
  * was typed and the error under the buttons.
+ *
+ * Each verdict is a `commit` exempt from billing (`COMMIT_EXCEPT_BILLING`, 0.33): a review
+ * is an admin route, which a lapsed plan never locks (docs/billing-harmonization.md
+ * §12.13, §12.36); a demo's lock still holds it.
  */
 declare function TranslationReviewEditor({ row, referenceLabel, localeLabel, onSave, onClear, onClose, readOnly, focusWording, formatDate: formatDateProp, formatError, className, labels: labelsProp, }: TranslationReviewEditorProps): react.JSX.Element;
 

package/dist/components/translation-review-editor.js

@@ -9,6 +9,7 @@ import { AlertBanner } from "./alert-banner.js";
 import { Caption, SectionLabel } from "./text.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels.js";
 import { Button, Textarea } from "./ui.js";
+import { COMMIT_EXCEPT_BILLING } from "./write-lock.js";
 function Then({ label, text }) {
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 min-w-0", children: [
     /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: label }),
@@ -128,7 +129,7 @@ function TranslationReviewEditor({
           Button,
           {
             variant: "primary",
-            commit: true,
+            commit: COMMIT_EXCEPT_BILLING,
             pending: busy === "approve",
             disabled: busy !== null,
             onClick: () => save("APPROVED"),
@@ -139,7 +140,7 @@ function TranslationReviewEditor({
           Button,
           {
             variant: missing ? "primary" : "danger",
-            commit: true,
+            commit: COMMIT_EXCEPT_BILLING,
             pending: busy === "flag",
             disabled: busy !== null || !canFlag,
             onClick: () => save("NEEDS_CHANGE"),
@@ -150,7 +151,7 @@ function TranslationReviewEditor({
           Button,
           {
             variant: "ghost",
-            commit: true,
+            commit: COMMIT_EXCEPT_BILLING,
             pending: busy === "clear",
             disabled: busy !== null,
             onClick: () => void run("clear", () => onClear({ locale: row.locale, key: row.key })),