@eifi1/ui-kit 0.31.1 → 0.32.1

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

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

package/dist/components/dialog-frame.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useId } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { Modal, ModalCloseContext } from "./modal.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 const DEFAULT_DIALOG_FRAME_LABELS = { close: "Close" };
@@ -82,7 +83,7 @@ function FrameClose({ label, onClose }) {
       type: "button",
       onClick: close,
       "aria-label": labels.close,
-      className: "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+      className: cn("-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]", FOCUS_RING),
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })
     }
   );

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

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

package/dist/components/disclosure.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { prefersReducedMotion } from "../hooks/use-close-transition.js";
 const COLLAPSE_MS = 200;
 function Collapse({ open, keepMounted = false, children, className, style, ...rest }) {
@@ -99,10 +100,10 @@ function Disclosure({
           // card's hover paint on the stretched area / the row, not the text box.
           cn(
             "min-w-0 flex-1 after:absolute after:inset-0 after:content-['']",
-            "focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
+            "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
             card ? cn("after:rounded-lg", joined && "after:rounded-b-none") : !menu && "after:rounded-sm"
           )
-        ) : "focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        ) : FOCUS_RING,
         card ? cn(
           "items-center justify-between rounded-lg p-4",
           trailingBeside ? "pe-0" : "hover:bg-[var(--bg-hover)] focus-visible:ring-inset",

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\n// Read at the moment of closing, as `useCloseTransition` does: the setting can change\n// under a long-lived page.\nimport { prefersReducedMotion } from \"../hooks/use-close-transition\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   *\n   * `after-title` sits it right after the title's text, pointing down and turning up —\n   * \"Net profit ⌄ ······ 1,234.50\", Lenkbank's result rows, where the far end of the\n   * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron\n   * would push every label off the column the non-expandable rows' labels start on.\n   * Not a card's: its chevron keeps the end.\n   */\n  chevronPosition?: \"start\" | \"end\" | \"after-title\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   *\n   * Unless {@link trailingInTrigger} is set, which moves it INTO the button.\n   */\n  trailing?: ReactNode;\n  /**\n   * Render {@link trailing} inside the header button instead of beside it, so the\n   * whole row — figure included — is one click target and the figure is part of the\n   * button's accessible name: \"Net profit 1,234.50, collapsed\" rather than a button\n   * called \"Net profit\" next to an unexplained number.\n   *\n   * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,\n   * chevron, and the value at the far end, all one `<button>`, because a result row\n   * has nothing else it could mean.\n   *\n   * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button\n   * may not contain another interactive element; an action belongs in the default,\n   * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing\n   * content too (no `div`s).\n   */\n  trailingInTrigger?: boolean;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   *\n   * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what\n   * folds is several elements — a budget group's category rows, each its own `<li>`,\n   * siblings of this header (keksdose's budget-mobile-list joins their ids with\n   * `\" \"`). It may be the EMPTY string: trigger-only mode with nothing to point at yet\n   * (a group whose rows are all filtered away, rows that are not rendered while shut).\n   * The header then carries no `aria-controls` at all rather than an empty one, and\n   * still toggles.\n   *\n   * A table's leading row — keksdose's \"Upcoming\" toggle over the scheduled rows of\n   * its transactions table — is this mode too: the rows it folds are the TABLE's, so\n   * the disclosure is only the header, and the table renders or drops them from the\n   * same state.\n   *\n   * ```tsx\n   * <DataTable\n   *   rows={showFuture ? [...scheduled, ...posted] : posted}\n   *   leadingRow={\n   *     <Disclosure\n   *       variant=\"bare\"\n   *       title={upcomingLabel}\n   *       open={showFuture}\n   *       onOpenChange={setShowFuture}\n   *       // The scheduled rows' ids while they are rendered; \"\" while they are not.\n   *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(\" \") : \"\"}\n   *       headerClassName=\"px-3 py-2\"\n   *     />\n   *   }\n   *   …\n   * />\n   * ```\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  trailingInTrigger = false,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAt = card ? \"end\" : (chevronPosition ?? (menu ? \"end\" : \"start\"));\n  const chevronAtEnd = chevronAt === \"end\";\n  const chevronAfterTitle = chevronAt === \"after-title\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n  // `trailing` beside the button, which then stretches under it; inside the button,\n  // the row is simply the button.\n  const trailingInside = hasTrailing && trailingInTrigger;\n  const trailingBeside = hasTrailing && !trailingInTrigger;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=\"\"`.\n      aria-controls={triggerOnly ? controls || undefined : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        trailingBeside\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              trailingBeside ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {chevronAt === \"start\" && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        {chevronAfterTitle ? (\n          // The chevron hugs the text, however long the translation: the text wraps\n          // before the chevron is pushed away from it.\n          <span className=\"flex items-center gap-1\">\n            <span className=\"min-w-0\">{title}</span>\n            <Chevron open={open} small />\n          </span>\n        ) : (\n          <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        )}\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {/* The space is for the accessible name — \"Net profit 1,234.50\", not\n          \"Net profit1,234.50\"; between flex items it renders as nothing. */}\n      {trailingInside && \" \"}\n      {trailingInside && (\n        <span data-disclosure-trailing=\"\" className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n        </span>\n      )}\n      {chevronAtEnd && !trailingBeside && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={trailingBeside ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {trailingBeside ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/disclosure.tsx"],"sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\n// Read at the moment of closing, as `useCloseTransition` does: the setting can change\n// under a long-lived page.\nimport { prefersReducedMotion } from \"../hooks/use-close-transition\";\n\n/** How long the fold takes, in ms. The same number as the `duration-200` below and as\n *  the unmount timer, because they are the same movement. */\nconst COLLAPSE_MS = 200;\n\n/**\n * `extends` the div's props so an `id` (what a trigger's `aria-controls` points at), a\n * `data-tour` anchor or a test id reaches the element that folds.\n */\nexport interface CollapseProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /**\n   * Keep the children mounted while shut (hidden and `inert`) instead of unmounting\n   * them once the fold has finished closing.\n   *\n   * Off by default, and that default is a behaviour contract rather than a\n   * performance note: Lenkbank's disclosure bodies FETCH, and a body that only exists\n   * while open is what stops a closed card asking — without every caller carrying its\n   * own `enabled: open`. On for a body whose state must outlive a close (a half-typed\n   * form) or that must be found by the browser's find-in-page.\n   */\n  keepMounted?: boolean;\n  children: ReactNode;\n}\n\n/**\n * The fold on its own: content that opens and shuts in place, animated to a height\n * nobody measured.\n *\n * THE TECHNIQUE is `AppShell`'s sidebar group's, lifted out so there is one copy of it.\n * A `grid-template-rows` transition from `0fr` to `1fr` is the one way to animate to a\n * content-sized height without measuring it — so a chart that resizes inside it, or a\n * translated line that wraps, is still exactly as tall as it needs. `visibility` rides\n * the same transition, so a shut body leaves the accessibility tree only once it has\n * finished closing; `inert` takes it out of the tab order immediately.\n *\n * THE CHILDREN are unmounted once closed (see {@link CollapseProps.keepMounted}), but\n * only once the track has finished closing: the track is what animates, so the\n * children have to survive the movement that hides them. Under reduced motion they\n * go at once — there is no movement to wait for — and the opening half is silenced by\n * `motion-reduce:transition-none`, since tokens.css only silences the overlay\n * animations by name.\n *\n * Padding and margins belong on a child: on this element, or the clipping one inside\n * it, they would hold the row open by that much.\n */\nexport function Collapse({ open, keepMounted = false, children, className, style, ...rest }: CollapseProps) {\n  // Whether the children are still on their way out. Adjusted DURING render when\n  // `open` flips (React's \"storing information from previous renders\"), so a close\n  // under reduced motion unmounts in the same render that shut it — a test, and a\n  // screen reader, see the body go on the click — and a re-open mid-fold simply\n  // cancels the linger.\n  const [lingering, setLingering] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setLingering(!open && !prefersReducedMotion());\n  }\n  useEffect(() => {\n    if (!lingering) return;\n    const timer = setTimeout(() => setLingering(false), COLLAPSE_MS);\n    return () => clearTimeout(timer);\n  }, [lingering]);\n\n  const mounted = open || lingering || keepMounted;\n\n  return (\n    <div\n      {...rest}\n      inert={!open}\n      className={cn(\n        \"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\",\n        className,\n      )}\n      // Inline rather than `grid-rows-[…]` classes: a caller's `className` must not be\n      // able to pin the track open, and the two values ARE the state.\n      style={{ ...style, gridTemplateRows: open ? \"1fr\" : \"0fr\", visibility: open ? \"visible\" : \"hidden\" }}\n    >\n      <div\n        className={cn(\n          \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n          open ? \"opacity-100\" : \"opacity-0\",\n        )}\n      >\n        {mounted && children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * What {@link DisclosureProps.triggerProps} may put on the header button: its own\n * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —\n * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor\n * `className`, which is {@link DisclosureProps.headerClassName}.\n */\nexport type DisclosureTriggerProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"type\" | \"aria-expanded\" | \"aria-controls\" | \"disabled\" | \"onClick\" | \"children\" | \"className\"\n> & { [data: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * `title` is omitted from the div's own props because this component already owns the\n * name: here it is the header's content (and a ReactNode), not the browser's tooltip.\n * Everything else reaches the outer element.\n */\nexport interface DisclosureProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** What the header says. A node, so a status chip or a count can sit in it. */\n  title: ReactNode;\n  /** The smaller line under the title — what is inside, for a reader deciding whether\n   *  to open it. */\n  hint?: ReactNode;\n  /**\n   * Who decides whether this one is open. Left out, the disclosure decides for itself,\n   * which is what one standing on its own wants. Passed, the caller does — a set of\n   * which one is open at a time, or an open state kept in the URL so the view can be\n   * linked to. There is no accordion component: \"one open at a time\" is a few lines in\n   * the caller and it usually owns a URL parameter, which is app state.\n   */\n  open?: boolean;\n  /** Whether an UNCONTROLLED disclosure starts open. Ignored when `open` is passed. */\n  defaultOpen?: boolean;\n  /** Called with the next state on every toggle, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `card` (default) draws the kit's `Card` surface round header and body, with the\n   * chevron trailing the header and turning over — the \"section that opens\" of a\n   * settings or analysis page. `bare` draws nothing: a leading chevron that turns\n   * down, for an inline \"Show 3 hidden accounts\" inside something that already has\n   * its own surface.\n   *\n   * `menu` is a row of a `HoverMenu`: the top bar's menu-item look\n   * (`TOPBAR_MENU_ITEM_CLASS` — full-width, `px-3 py-2`, regular weight, square, the\n   * hover wash with the text colour left alone), an INSET focus ring so the menu's\n   * clipping edge cannot cut it off, the chevron at the end (`chevronPosition`\n   * defaults to `end` here) and a body with no padding of its own, so the sub-list's\n   * rows sit flush like the rows around them. keksdose's account menu opens its\n   * language sub-list this way, and on `bare` it took four header overrides and a\n   * body one to get there (account-menu.tsx).\n   */\n  variant?: \"card\" | \"bare\" | \"menu\";\n  /**\n   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading\n   * chevron that turns from the reading direction to down. `end` puts it at the far\n   * end of the row, pointing down and turning up as the card's does — keksdose's\n   * account menu, whose language sub-list reads \"Language 🇩🇪 ⌄\" with the chevron\n   * after the flag, like every other menu row with a sub-list. With `trailing`, the\n   * chevron follows it, as on a card. A `card` always has it at the end, so this is\n   * ignored there. A `menu` defaults to `end`, like the menu rows around it.\n   *\n   * `after-title` sits it right after the title's text, pointing down and turning up —\n   * \"Net profit ⌄ ······ 1,234.50\", Lenkbank's result rows, where the far end of the\n   * row belongs to a figure (see {@link trailingInTrigger}) and a leading chevron\n   * would push every label off the column the non-expandable rows' labels start on.\n   * Not a card's: its chevron keeps the end.\n   */\n  chevronPosition?: \"start\" | \"end\" | \"after-title\";\n  /**\n   * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern\n   * puts the button INSIDE the heading when the disclosure titles a section, so the\n   * page's heading outline still lists it. Off by default: an inline \"show more\" is\n   * not a section.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** See {@link CollapseProps.keepMounted}. */\n  keepMounted?: boolean;\n  disabled?: boolean;\n  /** Extra classes for the header button. */\n  headerClassName?: string;\n  /**\n   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as\n   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state\n   * when they depend on it: keksdose's budget table names each group's toggle\n   * \"Expand group Food\" / \"Collapse group Food\", because the visible title is only the\n   * group's name:\n   *\n   * ```tsx\n   * triggerProps={(open) => ({ \"aria-label\": t(open ? \"collapseGroup\" : \"expandGroup\", { name }) })}\n   * ```\n   *\n   * An `aria-label` REPLACES the title as the button's name, so it must still contain\n   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}\n   * for what the disclosure keeps for itself.\n   */\n  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);\n  /** Extra classes for the body's wrapper — where its padding and spacing live. */\n  bodyClassName?: string;\n  /**\n   * Content at the far end of the header row, beside the title: a count, a date, a\n   * status chip, an action button. It is a SIBLING of the header button, never inside\n   * it — a button may not contain another interactive element, and a count inside it\n   * would also be read as part of the button's name. The header button still spans\n   * the row under it (a stretched hit area), so clicking the empty space or the\n   * card's chevron still toggles, while whatever sits in `trailing` gets its own\n   * clicks. With `trailing`, the card's chevron moves after it, to the row's end.\n   *\n   * Unless {@link trailingInTrigger} is set, which moves it INTO the button.\n   */\n  trailing?: ReactNode;\n  /**\n   * Render {@link trailing} inside the header button instead of beside it, so the\n   * whole row — figure included — is one click target and the figure is part of the\n   * button's accessible name: \"Net profit 1,234.50, collapsed\" rather than a button\n   * called \"Net profit\" next to an unexplained number.\n   *\n   * Lenkbank's result rows (features/steering/results-panel.tsx) are the case: label,\n   * chevron, and the value at the far end, all one `<button>`, because a result row\n   * has nothing else it could mean.\n   *\n   * ⚠️ Only for NON-interactive content — a count, a figure, a status chip. A button\n   * may not contain another interactive element; an action belongs in the default,\n   * sibling `trailing`. The content is rendered in a `<span>`, so keep it phrasing\n   * content too (no `div`s).\n   */\n  trailingInTrigger?: boolean;\n  /**\n   * Trigger-only mode: the id of an element the CALLER renders elsewhere — the hidden\n   * rows of a table, a panel in another column — which this header shows and hides.\n   * The header's `aria-controls` points at it and the disclosure renders no body of\n   * its own (`children`, `bodyClassName` and `keepMounted` are ignored). Pair it with\n   * `open` / `onOpenChange`: the caller owns the state, since the caller renders what\n   * it governs.\n   *\n   * It is an IDREF LIST, as `aria-controls` is: several space-separated ids when what\n   * folds is several elements — a budget group's category rows, each its own `<li>`,\n   * siblings of this header (keksdose's budget-mobile-list joins their ids with\n   * `\" \"`). It may be the EMPTY string: trigger-only mode with nothing to point at yet\n   * (a group whose rows are all filtered away, rows that are not rendered while shut).\n   * The header then carries no `aria-controls` at all rather than an empty one, and\n   * still toggles.\n   *\n   * A table's leading row — keksdose's \"Upcoming\" toggle over the scheduled rows of\n   * its transactions table — is this mode too: the rows it folds are the TABLE's, so\n   * the disclosure is only the header, and the table renders or drops them from the\n   * same state.\n   *\n   * ```tsx\n   * <DataTable\n   *   rows={showFuture ? [...scheduled, ...posted] : posted}\n   *   leadingRow={\n   *     <Disclosure\n   *       variant=\"bare\"\n   *       title={upcomingLabel}\n   *       open={showFuture}\n   *       onOpenChange={setShowFuture}\n   *       // The scheduled rows' ids while they are rendered; \"\" while they are not.\n   *       controls={showFuture ? scheduled.map((tx) => `row-s${tx.id}`).join(\" \") : \"\"}\n   *       headerClassName=\"px-3 py-2\"\n   *     />\n   *   }\n   *   …\n   * />\n   * ```\n   */\n  controls?: string;\n  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */\n  children?: ReactNode;\n}\n\n/**\n * A section that opens in place: a header button with `aria-expanded` and\n * `aria-controls`, and a {@link Collapse} under it.\n *\n * Both apps had written this by hand — Lenkbank as a shared `CollapsibleCard` with ten\n * importers, Keksdose three separate times (accounts, twice; the support panel) — and\n * the copies had drifted: none of Keksdose's animated, and all three swapped a\n * `ChevronRight` for a `ChevronDown` rather than turning one. Here the chevron is one\n * icon that rotates, so the change of state is one element moving rather than two\n * trading places.\n *\n * The body is unmounted while shut; see {@link CollapseProps.keepMounted} for why that\n * is the default and when to opt out.\n */\nexport function Disclosure({\n  title,\n  hint,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  variant = \"card\",\n  chevronPosition,\n  headingAs: Heading,\n  keepMounted,\n  disabled,\n  headerClassName,\n  triggerProps,\n  bodyClassName,\n  trailing,\n  trailingInTrigger = false,\n  controls,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [own, setOwn] = useState(defaultOpen);\n  const open = controlled ?? own;\n  const bodyId = useId();\n  const card = variant === \"card\";\n  const menu = variant === \"menu\";\n  // The card's chevron trails always; a menu row's unless asked otherwise; a bare\n  // one only when asked to.\n  const chevronAt = card ? \"end\" : (chevronPosition ?? (menu ? \"end\" : \"start\"));\n  const chevronAtEnd = chevronAt === \"end\";\n  const chevronAfterTitle = chevronAt === \"after-title\";\n  const triggerOnly = controls !== undefined;\n  // The card's header squares its lower corners only when a body opens under it.\n  const joined = open && !triggerOnly;\n  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;\n  // `trailing` beside the button, which then stretches under it; inside the button,\n  // the row is simply the button.\n  const trailingInside = hasTrailing && trailingInTrigger;\n  const trailingBeside = hasTrailing && !trailingInTrigger;\n\n  const toggle = () => {\n    const next = !open;\n    if (controlled === undefined) setOwn(next);\n    onOpenChange?.(next);\n  };\n\n  const extraTriggerProps = typeof triggerProps === \"function\" ? triggerProps(open) : triggerProps;\n\n  const button = (\n    <button\n      {...extraTriggerProps}\n      type=\"button\"\n      aria-expanded={open}\n      // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=\"\"`.\n      aria-controls={triggerOnly ? controls || undefined : bodyId}\n      disabled={disabled}\n      onClick={toggle}\n      data-disclosure-trigger=\"\"\n      className={cn(\n        \"flex w-full gap-2 text-start outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        trailingBeside\n          ? // Stretched over the whole header row (the row is `relative`), so the space\n            // round `trailing` and the card's chevron still toggle; the ring and the\n            // card's hover paint on the stretched area / the row, not the text box.\n            cn(\n              \"min-w-0 flex-1 after:absolute after:inset-0 after:content-['']\",\n              \"focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]\",\n              card ? cn(\"after:rounded-lg\", joined && \"after:rounded-b-none\") : !menu && \"after:rounded-sm\",\n            )\n          : FOCUS_RING,\n        card\n          ? cn(\n              \"items-center justify-between rounded-lg p-4\",\n              trailingBeside ? \"pe-0\" : \"hover:bg-[var(--bg-hover)] focus-visible:ring-inset\",\n              joined && \"rounded-b-none\",\n            )\n          : menu\n            ? // TOPBAR_MENU_ITEM_CLASS's row, spelled out rather than imported: a\n              // component does not reach up into the shell. A test holds the two to\n              // the same classes.\n              \"items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] focus-visible:ring-inset\"\n            : \"items-center rounded-sm text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n        headerClassName,\n      )}\n    >\n      {chevronAt === \"start\" && <Chevron open={open} leading />}\n      {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits\n          at the header's far edge. */}\n      <span className=\"min-w-0 flex-1\">\n        {chevronAfterTitle ? (\n          // The chevron hugs the text, however long the translation: the text wraps\n          // before the chevron is pushed away from it.\n          <span className=\"flex items-center gap-1\">\n            <span className=\"min-w-0\">{title}</span>\n            <Chevron open={open} small />\n          </span>\n        ) : (\n          <span className={cn(\"block\", card && \"text-sm font-semibold text-[var(--text-primary)]\")}>{title}</span>\n        )}\n        {hint !== undefined && (\n          <span className=\"mt-0.5 block text-xs font-normal text-[var(--text-muted)]\">{hint}</span>\n        )}\n      </span>\n      {/* The space is for the accessible name — \"Net profit 1,234.50\", not\n          \"Net profit1,234.50\"; between flex items it renders as nothing. */}\n      {trailingInside && \" \"}\n      {trailingInside && (\n        <span data-disclosure-trailing=\"\" className=\"flex shrink-0 items-center gap-2\">\n          {trailing}\n        </span>\n      )}\n      {chevronAtEnd && !trailingBeside && <Chevron open={open} small={!card} />}\n    </button>\n  );\n\n  // Preflight already makes h1–h6 inherit size and weight, so the heading adds\n  // structure and nothing visible.\n  const header = Heading ? <Heading className={trailingBeside ? \"min-w-0 flex-1\" : undefined}>{button}</Heading> : button;\n\n  return (\n    <div\n      {...rest}\n      className={cn(card && \"rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm\", className)}\n    >\n      {trailingBeside ? (\n        <div\n          className={cn(\n            \"relative flex items-center gap-2\",\n            card &&\n              cn(\n                \"rounded-lg pe-4 has-[[data-disclosure-trigger]:enabled:hover]:bg-[var(--bg-hover)]\",\n                joined && \"rounded-b-none\",\n              ),\n          )}\n        >\n          {header}\n          {/* Positioned, so it paints over the stretched button and takes its own\n              clicks; the chevron is not, so a click on it lands on the button. */}\n          <div className=\"relative flex shrink-0 items-center gap-2\">{trailing}</div>\n          {chevronAtEnd && <Chevron open={open} small={!card} />}\n        </div>\n      ) : (\n        header\n      )}\n      {!triggerOnly && (\n        <Collapse id={bodyId} open={open} keepMounted={keepMounted}>\n          <div className={cn(card ? \"space-y-3 px-4 pb-4\" : !menu && \"space-y-2 pt-2\", bodyClassName)}>{children}</div>\n        </Collapse>\n      )}\n    </div>\n  );\n}\n\n/**\n * One icon for both variants, turned rather than swapped. `leading` (bare) points it\n * along the reading direction while shut — right in LTR, left in RTL — and down when\n * open; trailing (card) points down while shut and up when open, which is the card\n * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle\n * and no `scale` composing with the turn.\n */\nfunction Chevron({\n  open,\n  leading = false,\n  small = leading,\n}: {\n  open: boolean;\n  leading?: boolean;\n  /** The bare variant's size, which a bare chevron keeps at either end of its row. */\n  small?: boolean;\n}) {\n  return (\n    <ChevronDown\n      aria-hidden\n      className={cn(\n        \"shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n        small ? \"size-3.5\" : \"size-4\",\n        leading ? !open && \"-rotate-90 rtl:rotate-90\" : open && \"rotate-180\",\n      )}\n    />\n  );\n}\n"],"mappings":";AAuFM,cA+RI,YA/RJ;AAvFN,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAG3B,SAAS,4BAA4B;AAIrC,MAAM,cAAc;AA2Cb,SAAS,SAAS,EAAE,MAAM,cAAc,OAAO,UAAU,WAAW,OAAO,GAAG,KAAK,GAAkB;AAM1G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC;AAAA,EAC/C;AACA,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAChB,UAAM,QAAQ,WAAW,MAAM,aAAa,KAAK,GAAG,WAAW;AAC/D,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAU,QAAQ,aAAa;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,CAAC;AAAA,MACR,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAGA,OAAO,EAAE,GAAG,OAAO,kBAAkB,OAAO,QAAQ,OAAO,YAAY,OAAO,YAAY,SAAS;AAAA,MAEnG;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,OAAO,gBAAgB;AAAA,UACzB;AAAA,UAEC,qBAAW;AAAA;AAAA,MACd;AAAA;AAAA,EACF;AAEJ;AAyLO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,WAAW;AAC1C,QAAM,OAAO,cAAc;AAC3B,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,YAAY;AACzB,QAAM,OAAO,YAAY;AAGzB,QAAM,YAAY,OAAO,QAAS,oBAAoB,OAAO,QAAQ;AACrE,QAAM,eAAe,cAAc;AACnC,QAAM,oBAAoB,cAAc;AACxC,QAAM,cAAc,aAAa;AAEjC,QAAM,SAAS,QAAQ,CAAC;AACxB,QAAM,cAAc,aAAa,UAAa,aAAa,QAAQ,aAAa;AAGhF,QAAM,iBAAiB,eAAe;AACtC,QAAM,iBAAiB,eAAe,CAAC;AAEvC,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,QAAI,eAAe,OAAW,QAAO,IAAI;AACzC,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,oBAAoB,OAAO,iBAAiB,aAAa,aAAa,IAAI,IAAI;AAEpF,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe;AAAA,MAEf,iBAAe,cAAc,YAAY,SAAY;AAAA,MACrD;AAAA,MACA,SAAS;AAAA,MACT,2BAAwB;AAAA,MACxB,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,UAII;AAAA,YACE;AAAA,YACA;AAAA,YACA,OAAO,GAAG,oBAAoB,UAAU,sBAAsB,IAAI,CAAC,QAAQ;AAAA,UAC7E;AAAA,YACA;AAAA,QACJ,OACI;AAAA,UACE;AAAA,UACA,iBAAiB,SAAS;AAAA,UAC1B,UAAU;AAAA,QACZ,IACA;AAAA;AAAA;AAAA;AAAA,UAIE;AAAA,YACA;AAAA,QACN;AAAA,MACF;AAAA,MAEC;AAAA,sBAAc,WAAW,oBAAC,WAAQ,MAAY,SAAO,MAAC;AAAA,QAGvD,qBAAC,UAAK,WAAU,kBACb;AAAA;AAAA;AAAA;AAAA,YAGC,qBAAC,UAAK,WAAU,2BACd;AAAA,kCAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,cACjC,oBAAC,WAAQ,MAAY,OAAK,MAAC;AAAA,eAC7B;AAAA,cAEA,oBAAC,UAAK,WAAW,GAAG,SAAS,QAAQ,kDAAkD,GAAI,iBAAM;AAAA,UAElG,SAAS,UACR,oBAAC,UAAK,WAAU,6DAA6D,gBAAK;AAAA,WAEtF;AAAA,QAGC,kBAAkB;AAAA,QAClB,kBACC,oBAAC,UAAK,4BAAyB,IAAG,WAAU,oCACzC,oBACH;AAAA,QAED,gBAAgB,CAAC,kBAAkB,oBAAC,WAAQ,MAAY,OAAO,CAAC,MAAM;AAAA;AAAA;AAAA,EACzE;AAKF,QAAM,SAAS,UAAU,oBAAC,WAAQ,WAAW,iBAAiB,mBAAmB,QAAY,kBAAO,IAAa;AAEjH,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,QAAQ,6EAA6E,SAAS;AAAA,MAE3G;AAAA,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,QACE;AAAA,gBACE;AAAA,gBACA,UAAU;AAAA,cACZ;AAAA,YACJ;AAAA,YAEC;AAAA;AAAA,cAGD,oBAAC,SAAI,WAAU,6CAA6C,oBAAS;AAAA,cACpE,gBAAgB,oBAAC,WAAQ,MAAY,OAAO,CAAC,MAAM;AAAA;AAAA;AAAA,QACtD,IAEA;AAAA,QAED,CAAC,eACA,oBAAC,YAAS,IAAI,QAAQ,MAAY,aAChC,8BAAC,SAAI,WAAW,GAAG,OAAO,wBAAwB,CAAC,QAAQ,kBAAkB,aAAa,GAAI,UAAS,GACzG;AAAA;AAAA;AAAA,EAEJ;AAEJ;AASA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AACV,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,aAAa;AAAA,QACrB,UAAU,CAAC,QAAQ,6BAA6B,QAAQ;AAAA,MAC1D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/dropdown.d.ts

@@ -22,7 +22,7 @@ import { ComponentPropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'r
  * while it is up, so the rule is the hook's rather than each caller's. `backCloses`
  * is for the ONE case where a second entry would be wrong: a caller whose panel is
  * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
- * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.
+ * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.
  *
  * ## One outside-click rule for the whole package
  *

package/dist/components/dropdown.js

@@ -7,6 +7,8 @@ import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { cn } from "../lib/cn.js";
+import { FIELD_TOUCH_TEXT } from "./ui.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
 function useDropdown({
   backCloses = true,
@@ -88,7 +90,11 @@ function DropdownSearchHeader({
               "aria-controls": listboxId,
               "aria-activedescendant": activeId,
               "aria-autocomplete": listboxId ? "list" : void 0,
-              className: "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+              className: cn(
+                "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
+                FOCUS_RING,
+                FIELD_TOUCH_TEXT
+              )
             }
           )
         ]

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        className=\"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting.\n   *  `start`/`end` follow the trigger's reading direction — `end` is the right edge\n   *  in a left-to-right form and the left one in a right-to-left form — and are what\n   *  the kit's own pickers pass; `left`/`right` stay physical. Default `end`, which\n   *  is the old `right` in a left-to-right page. */\n  align?: \"left\" | \"right\" | \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  // The portal leaves the subtree the trigger's `dir` came from, so it is read off\n  // the trigger — for the alignment here, and for the panel's own `dir` below,\n  // without which a right-to-left form got a left-to-right list.\n  const physical =\n    align === \"start\" ? (dir === \"rtl\" ? \"right\" : \"left\") : align === \"end\" ? (dir === \"rtl\" ? \"left\" : \"right\") : align;\n  const wanted = physical === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      dir={dir}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so those five values are the panel's own.\n      style={{ ...style, position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting.\n   *  `start`/`end` follow the trigger's reading direction — `end` is the right edge\n   *  in a left-to-right form and the left one in a right-to-left form — and are what\n   *  the kit's own pickers pass; `left`/`right` stay physical. Default `end`, which\n   *  is the old `right` in a left-to-right page. */\n  align?: \"left\" | \"right\" | \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  // The portal leaves the subtree the trigger's `dir` came from, so it is read off\n  // the trigger — for the alignment here, and for the panel's own `dir` below,\n  // without which a right-to-left form got a left-to-right list.\n  const physical =\n    align === \"start\" ? (dir === \"rtl\" ? \"right\" : \"left\") : align === \"end\" ? (dir === \"rtl\" ? \"left\" : \"right\") : align;\n  const wanted = physical === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      dir={dir}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so those five values are the panel's own.\n      style={{ ...style, position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

package/dist/components/facing-pair.d.ts

@@ -6,18 +6,20 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../delete-account-setting-CpIhzxxZ.js';
+import '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.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';
@@ -85,6 +87,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -98,14 +103,17 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';
+import './chart-height.js';
 
 /** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
 type FacingSide = "left" | "right";
 /** The two sides, in the order the columns stand. */
 declare const FACING_SIDES: readonly FacingSide[];
 /** The whole band a facing y axis occupies: its ticks, and the strip the rotated title
- *  is drawn in — whether or not this chart is the one that spends it. */
+ *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:
+ *  it is also the right axis' declared `width`, which the chart scales with the text
+ *  (see {@link facingHeadingPad} for a heading's). */
 declare function facingBand(tickWidth?: number): number;
 /**
  * The y axis of one chart of a facing pair.
@@ -126,7 +134,12 @@ declare function facingAxes({ side, title, format, tickWidth, domain, color, }:
 }): SeriesChartAxis[];
 /** What a column heading is padded by to sit over the PLOT rather than the column: the
  *  axis band, on the side that column's axis stands on. Physical padding on purpose —
- *  the chart under it does not flip in RTL, so neither may the heading's offset. */
-declare function facingHeadingPad(side: FacingSide, tickWidth?: number): Pick<CSSProperties, "paddingLeft" | "paddingRight">;
+ *  the chart under it does not flip in RTL, so neither may the heading's offset.
+ *
+ *  `scale` is the text size's (`useTextSize().scale`): the chart draws its bands that
+ *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading
+ *  passes the same factor to stay over its plot. Both sides by the same factor, as the
+ *  chart does. */
+declare function facingHeadingPad(side: FacingSide, tickWidth?: number, scale?: number): Pick<CSSProperties, "paddingLeft" | "paddingRight">;
 
 export { FACING_SIDES, type FacingSide, facingAxes, facingBand, facingHeadingPad };

package/dist/components/facing-pair.js

@@ -28,8 +28,9 @@ function facingAxes({
   }
   return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];
 }
-function facingHeadingPad(side, tickWidth = AXIS_TICK_WIDTH) {
-  return side === "left" ? { paddingLeft: facingBand(tickWidth) } : { paddingRight: facingBand(tickWidth) };
+function facingHeadingPad(side, tickWidth = AXIS_TICK_WIDTH, scale = 1) {
+  const band = axisBandWidth(tickWidth, true, scale);
+  return side === "left" ? { paddingLeft: band } : { paddingRight: band };
 }
 export {
   FACING_SIDES,

package/dist/components/facing-pair.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/facing-pair.ts"],"sourcesContent":["// Two series charts side by side that are MIRROR IMAGES of each other — the two sides\n// of a symmetric system, read against each other — and the arithmetic that keeps their\n// plots the same width. Lifted out of lenkbank, where four hand-assembled copies of\n// these rules had already drifted apart.\n//\n// The rules:\n//  * The ticks stand on the OUTSIDE: the left chart's on its left, the right chart's on\n//    its right. The two plots meet in the middle with nothing between them, and neither\n//    column of numbers stands between a picture and the one it is compared with.\n//  * The quantity is named ONCE, on the left chart; the right title would be the same\n//    words twice.\n//  * The untitled right axis still RESERVES the title's strip. Reserve only what its\n//    ticks need and its plot comes out `AXIS_TITLE_STRIP` px wider than its neighbour's\n//    — inside one shared x window, the same abscissa then lands on different pixels.\n//  * A heading sits over the PLOT, not over the column, padded by the axis band on the\n//    side that column's axis stands on.\n//\n// Only the geometry is here. The grid the pair stands in — column widths, where the\n// legend goes, the chart height — is a screen's layout, and stays with the screen.\nimport type { CSSProperties } from \"react\";\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom\";\nimport { AXIS_TICK_WIDTH, axisBandWidth, type SeriesChartAxis } from \"./series-chart\";\n\n/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */\nexport type FacingSide = \"left\" | \"right\";\n\n/** The two sides, in the order the columns stand. */\nexport const FACING_SIDES: readonly FacingSide[] = [\"left\", \"right\"];\n\n/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title\n *  is drawn in — whether or not this chart is the one that spends it. */\nexport function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {\n  return axisBandWidth(tickWidth, true);\n}\n\n/**\n * The y axis of one chart of a facing pair.\n *\n * The left one carries the row's quantity and the ticks' own width; the right one has\n * no title, stands on the right and reserves the whole band, so the two plots come out\n * the same width. Both may be pinned to one `domain` — whether they are is a statement\n * about the measurement, so it is the caller's.\n */\nexport function facingAxes({\n  side,\n  title,\n  format,\n  tickWidth = AXIS_TICK_WIDTH,\n  domain,\n  color,\n}: {\n  side: FacingSide;\n  /** The row's quantity, with its unit. Drawn on the left chart only. */\n  title: string;\n  format?: (value: number) => string;\n  tickWidth?: number;\n  domain?: [number, number];\n  color?: string;\n}): SeriesChartAxis[] {\n  if (side === \"right\") {\n    return [\n      {\n        id: DEFAULT_Y_AXIS,\n        orientation: \"right\",\n        width: facingBand(tickWidth),\n        title: \"\",\n        format,\n        domain,\n        color,\n      },\n    ];\n  }\n  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];\n}\n\n/** What a column heading is padded by to sit over the PLOT rather than the column: the\n *  axis band, on the side that column's axis stands on. Physical padding on purpose —\n *  the chart under it does not flip in RTL, so neither may the heading's offset. */\nexport function facingHeadingPad(\n  side: FacingSide,\n  tickWidth: number = AXIS_TICK_WIDTH,\n): Pick<CSSProperties, \"paddingLeft\" | \"paddingRight\"> {\n  return side === \"left\"\n    ? { paddingLeft: facingBand(tickWidth) }\n    : { paddingRight: facingBand(tickWidth) };\n}\n"],"mappings":";AAoBA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,qBAA2C;AAM9D,MAAM,eAAsC,CAAC,QAAQ,OAAO;AAI5D,SAAS,WAAW,YAAoB,iBAAyB;AACtE,SAAO,cAAc,WAAW,IAAI;AACtC;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO,WAAW,SAAS;AAAA,QAC3B,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,EAAE,IAAI,gBAAgB,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAChF;AAKO,SAAS,iBACd,MACA,YAAoB,iBACiC;AACrD,SAAO,SAAS,SACZ,EAAE,aAAa,WAAW,SAAS,EAAE,IACrC,EAAE,cAAc,WAAW,SAAS,EAAE;AAC5C;","names":[]}
+{"version":3,"sources":["../../src/components/facing-pair.ts"],"sourcesContent":["// Two series charts side by side that are MIRROR IMAGES of each other — the two sides\n// of a symmetric system, read against each other — and the arithmetic that keeps their\n// plots the same width. Lifted out of lenkbank, where four hand-assembled copies of\n// these rules had already drifted apart.\n//\n// The rules:\n//  * The ticks stand on the OUTSIDE: the left chart's on its left, the right chart's on\n//    its right. The two plots meet in the middle with nothing between them, and neither\n//    column of numbers stands between a picture and the one it is compared with.\n//  * The quantity is named ONCE, on the left chart; the right title would be the same\n//    words twice.\n//  * The untitled right axis still RESERVES the title's strip. Reserve only what its\n//    ticks need and its plot comes out `AXIS_TITLE_STRIP` px wider than its neighbour's\n//    — inside one shared x window, the same abscissa then lands on different pixels.\n//  * A heading sits over the PLOT, not over the column, padded by the axis band on the\n//    side that column's axis stands on.\n//\n// Only the geometry is here. The grid the pair stands in — column widths, where the\n// legend goes, the chart height — is a screen's layout, and stays with the screen.\nimport type { CSSProperties } from \"react\";\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom\";\nimport { AXIS_TICK_WIDTH, axisBandWidth, type SeriesChartAxis } from \"./series-chart\";\n\n/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */\nexport type FacingSide = \"left\" | \"right\";\n\n/** The two sides, in the order the columns stand. */\nexport const FACING_SIDES: readonly FacingSide[] = [\"left\", \"right\"];\n\n/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title\n *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:\n *  it is also the right axis' declared `width`, which the chart scales with the text\n *  (see {@link facingHeadingPad} for a heading's). */\nexport function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {\n  return axisBandWidth(tickWidth, true);\n}\n\n/**\n * The y axis of one chart of a facing pair.\n *\n * The left one carries the row's quantity and the ticks' own width; the right one has\n * no title, stands on the right and reserves the whole band, so the two plots come out\n * the same width. Both may be pinned to one `domain` — whether they are is a statement\n * about the measurement, so it is the caller's.\n */\nexport function facingAxes({\n  side,\n  title,\n  format,\n  tickWidth = AXIS_TICK_WIDTH,\n  domain,\n  color,\n}: {\n  side: FacingSide;\n  /** The row's quantity, with its unit. Drawn on the left chart only. */\n  title: string;\n  format?: (value: number) => string;\n  tickWidth?: number;\n  domain?: [number, number];\n  color?: string;\n}): SeriesChartAxis[] {\n  if (side === \"right\") {\n    return [\n      {\n        id: DEFAULT_Y_AXIS,\n        orientation: \"right\",\n        width: facingBand(tickWidth),\n        title: \"\",\n        format,\n        domain,\n        color,\n      },\n    ];\n  }\n  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];\n}\n\n/** What a column heading is padded by to sit over the PLOT rather than the column: the\n *  axis band, on the side that column's axis stands on. Physical padding on purpose —\n *  the chart under it does not flip in RTL, so neither may the heading's offset.\n *\n *  `scale` is the text size's (`useTextSize().scale`): the chart draws its bands that\n *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading\n *  passes the same factor to stay over its plot. Both sides by the same factor, as the\n *  chart does. */\nexport function facingHeadingPad(\n  side: FacingSide,\n  tickWidth: number = AXIS_TICK_WIDTH,\n  scale = 1,\n): Pick<CSSProperties, \"paddingLeft\" | \"paddingRight\"> {\n  const band = axisBandWidth(tickWidth, true, scale);\n  return side === \"left\" ? { paddingLeft: band } : { paddingRight: band };\n}\n"],"mappings":";AAoBA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,qBAA2C;AAM9D,MAAM,eAAsC,CAAC,QAAQ,OAAO;AAM5D,SAAS,WAAW,YAAoB,iBAAyB;AACtE,SAAO,cAAc,WAAW,IAAI;AACtC;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO,WAAW,SAAS;AAAA,QAC3B,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,EAAE,IAAI,gBAAgB,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAChF;AAUO,SAAS,iBACd,MACA,YAAoB,iBACpB,QAAQ,GAC6C;AACrD,QAAM,OAAO,cAAc,WAAW,MAAM,KAAK;AACjD,SAAO,SAAS,SAAS,EAAE,aAAa,KAAK,IAAI,EAAE,cAAc,KAAK;AACxE;","names":[]}