@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/toggle-group.js

@@ -6,9 +6,19 @@ import { horizontalStep } from "../lib/direction.js";
 import { FIELD_INVALID, FloatingField, Label } from "./ui.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
-import { hasContent, LabelStrip } from "./field-parts.js";
+import {
+  DISABLED_REASON_LINE_CLASS,
+  FIELD_CAPTION_CLASS,
+  hasContent,
+  isTextHint,
+  LabelStrip,
+  useDisabledReasonLine,
+  useInlineHint
+} from "./field-parts.js";
+import { FOCUS_RING_WIDTH } from "./focus-ring.js";
 const CHROME_PAD = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
-const CHROME_SEGMENT = { md: "py-0 leading-[18px]", sm: "py-0 leading-4" };
+const CHROME_SEGMENT = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
+const WRAP_AT_LARGE = "large:flex-wrap";
 const STRIP_SEGMENT = { md: "py-0", sm: "py-0.5" };
 function ToggleGroup(props) {
   const {
@@ -26,6 +36,7 @@ function ToggleGroup(props) {
     hint,
     error,
     disabledReason: ownDisabledReason,
+    disabledReasonDisplay,
     commit,
     "aria-label": ariaLabelAttr,
     ...restWithMode
@@ -33,13 +44,19 @@ function ToggleGroup(props) {
   const labelId = useId();
   const errorId = useId();
   const reasonId = useId();
+  const hintCaptionId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
+  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
+  const inlineHint = useInlineHint(hint);
+  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : void 0;
+  const labelHint = hintAsCaption === void 0 ? hint : void 0;
   const dimmed = disabled || locked;
   const labelled = hasContent(label);
   const field = labelled && labelPlacement === "field";
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
+  const wrapAtLarge = overflow === "truncate" && !strip;
   const hasError = labelled && hasContent(error);
   const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;
   const outsideInvalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
@@ -108,8 +125,11 @@ function ToggleGroup(props) {
           // overlaying the selected segment's boundary. Inset keeps the ring
           // inside the segment it belongs to; focus-visible keeps it for the
           // keyboard, which is the only input that needs it.
+          //
+          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.
           overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
-          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          FOCUS_RING_WIDTH,
           size === "sm" && "px-2 py-1 text-xs",
           // In the field chrome: no vertical padding, and the line that makes the
           // field 42px under a strip that clears the label — see CHROME_PAD. `sm`
@@ -140,7 +160,7 @@ function ToggleGroup(props) {
       "aria-label": ariaLabelAttr ?? ariaLabel,
       "aria-labelledby": labelled && ariaLabelAttr === void 0 && ariaLabel === void 0 ? labelId : rest["aria-labelledby"],
       "aria-invalid": hasError || rest["aria-invalid"] || void 0,
-      "aria-describedby": [rest["aria-describedby"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
+      "aria-describedby": [rest["aria-describedby"], hintAsCaption !== void 0 && hintCaptionId, hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || void 0,
       "aria-disabled": dimmed || void 0,
       className: cn(
         // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment
@@ -157,6 +177,7 @@ function ToggleGroup(props) {
         // phone does see is the focus ring — see the segment's own note below.)
         "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
         overflow === "wrap" && "flex-wrap",
+        wrapAtLarge && WRAP_AT_LARGE,
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -168,7 +189,7 @@ function ToggleGroup(props) {
         field && "border-0 bg-transparent p-0 shadow-none opacity-100",
         !labelled && className
       ),
-      children: locked ? (
+      children: locked && !reasonLine ? (
         // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a
         // wrapper outside it would become the flex or grid item in the caller's row in
         // the group's place, and a `w-full` / `md:w-auto` on the group would size the
@@ -188,11 +209,15 @@ function ToggleGroup(props) {
     {
       id: captionId,
       "aria-live": captionIsLive ? "polite" : void 0,
-      className: cn("text-[11px] leading-snug text-[var(--text-muted)]", hasCaption && "mt-1"),
+      className: cn("text-caption leading-snug text-[var(--text-muted)]", hasCaption && "mt-1"),
       children: hasCaption ? captionNode : null
     }
   ) : null;
-  const errorEl = hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: error }) : null;
+  const errorEl = hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-caption leading-tight text-[var(--danger)]", children: error }) : null;
+  const belowEl = hintAsCaption !== void 0 || reasonLine ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    hintAsCaption !== void 0 && /* @__PURE__ */ jsx("p", { id: hintCaptionId, className: FIELD_CAPTION_CLASS, children: hintAsCaption }),
+    reasonLine && /* @__PURE__ */ jsx("p", { id: reasonId, className: DISABLED_REASON_LINE_CLASS, children: disabledReason })
+  ] }) : null;
   if (above) {
     return /* @__PURE__ */ jsxs("div", { className: cn("relative grid min-w-0 gap-1.5", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -206,26 +231,29 @@ function ToggleGroup(props) {
             children: label
           }
         ),
-        hint
+        labelHint
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         group,
+        belowEl,
         captionEl,
         errorEl
       ] })
     ] });
   }
   if (strip) {
-    return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint, disabled: dimmed, pad: "field", className, children: [
+    return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint: labelHint, disabled: dimmed, pad: "field", className, children: [
       group,
+      belowEl,
       captionEl,
       errorEl
     ] });
   }
   if (!field) {
-    if (!captionEl) return group;
+    if (!captionEl && !belowEl) return group;
     return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       group,
+      belowEl,
       captionEl
     ] });
   }
@@ -239,7 +267,7 @@ function ToggleGroup(props) {
           className: "flex flex-1 flex-col",
           label: /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
           staticLabel: true,
-          hint,
+          hint: labelHint,
           children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -255,6 +283,7 @@ function ToggleGroup(props) {
           )
         }
       ),
+      belowEl,
       captionEl,
       errorEl
     ] })

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

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

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

@@ -84,7 +84,10 @@ interface ToggleLegendProps {
     onToggle: (key: string) => void;
     /** `vertical` is for a legend standing BESIDE the charts rather than under them —
      *  what a row of charts sharing one legend wants, since under two charts there is
-     *  no "under", and putting it under one says it belongs to that one. */
+     *  no "under", and putting it under one says it belongs to that one.
+     *
+     *  From Large up a vertical legend moves under the charts and lays its entries
+     *  across (0.32, docs/text-size-harmonization.md §4) — see {@link LegendColumn}. */
     orientation?: "horizontal" | "vertical";
     /**
      * Draw a legend of ONE entry rather than nothing.
@@ -157,6 +160,12 @@ declare function StaticLegend({ entries, orientation, "aria-label": ariaLabel, a
  * that stretches it — and stacks whatever it is given, which is what a panel showing
  * two legends at once needs. The width is the caller's: how wide a legend column is
  * is a fact about that screen's layout.
+ *
+ * **From Large up it goes UNDER the charts** (0.32, docs/text-size-harmonization.md
+ * §4): a row of its own in a grid, a line of its own in a flex row (see
+ * `UNDER_THE_CHART_AT_LARGE`), with what it holds laid across and wrapping. A
+ * caller's own `max-sm:flex-row …` for the phone keeps working; the caller's width
+ * (`sm:w-40`) gives way to the full row, because a size wins over a breakpoint.
  */
 declare function LegendColumn({ children, className }: {
     children: ReactNode;

package/dist/components/toggle-legend.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
 const STROKE_PATTERNS = [
@@ -20,6 +21,8 @@ function toggleHidden(hidden, key) {
   if (!next.delete(key)) next.add(key);
   return next;
 }
+const UNDER_THE_CHART_AT_LARGE = "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
+const VERTICAL_AT_LARGE = "large:flex-row large:flex-wrap large:items-center large:justify-start";
 function ToggleLegend({
   entries,
   hidden,
@@ -38,7 +41,7 @@ function ToggleLegend({
       "aria-label": labels.legend,
       className: cn(
         "flex gap-x-3 gap-y-1",
-        orientation === "vertical" ? "flex-col items-start justify-center" : "mt-2 flex-wrap items-center",
+        orientation === "vertical" ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE) : "mt-2 flex-wrap items-center",
         className
       ),
       children: entries.map((entry) => {
@@ -50,8 +53,8 @@ function ToggleLegend({
             "aria-pressed": !off,
             onClick: () => onToggle(entry.key),
             className: cn(
-              "flex items-center gap-1.5 rounded text-start text-[11px] text-[var(--text-secondary)] transition-opacity hover:opacity-80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+              "flex items-center gap-1.5 rounded text-start text-caption text-[var(--text-secondary)] transition-opacity hover:opacity-80",
+              FOCUS_RING,
               off && "opacity-35",
               entry.align === "end" && "ms-auto"
             ),
@@ -85,14 +88,14 @@ function StaticLegend({
       "aria-label": ariaLabel ?? labels.legend,
       className: cn(
         "m-0 flex list-none gap-x-3 gap-y-1 p-0",
-        orientation === "vertical" ? "flex-col items-start justify-center" : "mt-2 flex-wrap items-center",
+        orientation === "vertical" ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE) : "mt-2 flex-wrap items-center",
         className
       ),
       children: entries.map((entry) => /* @__PURE__ */ jsxs(
         Item,
         {
           className: cn(
-            "flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]",
+            "flex items-center gap-1.5 text-caption text-[var(--text-secondary)]",
             entry.align === "end" && "ms-auto"
           ),
           children: [
@@ -106,11 +109,22 @@ function StaticLegend({
   );
 }
 function LegendColumn({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex h-full flex-col justify-center gap-3", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col justify-center gap-3",
+        UNDER_THE_CHART_AT_LARGE,
+        "large:h-auto large:flex-row large:flex-wrap large:items-start large:justify-start large:gap-x-6",
+        className
+      ),
+      children
+    }
+  );
 }
 function LegendGroup({ title, children }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col items-start gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: title }),
+    /* @__PURE__ */ jsx("span", { className: "text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-y-0.5", children })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-legend.tsx"],"sourcesContent":["// A legend whose entries are SWITCHES — and the stroke table it shares with\n// `SeriesChart`. Lifted out of lenkbank's measurement plots, where ten legends over\n// thirteen charts took channels on and off the picture.\n//\n// No recharts in this module: a legend of switches is plain buttons, and it is as\n// useful under a chart the consumer drew by hand as under `SeriesChart`.\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from \"./series-chart-labels\";\n\n/**\n * The strokes a reader can tell apart, in the order they are handed out.\n *\n * For the charts where the colour is already spoken for: a comparison draws each\n * measurement in its own colour, so a chart carrying several CHANNELS of each has\n * nothing left but the stroke — and \"solid versus dashed\" only gets you two.\n *\n * **Five, and the fifth is the last one.** They are the draughtsman's line types, in\n * the draughtsman's order — continuous, dashed, dotted, dash-dot, dash-dot-dot — the\n * one family of five a century of drawings has already proved legible at a hair's\n * width. A sixth is not distinguishable from one of these at two pixels wide, so a\n * chart needing one is a chart that should be split.\n *\n * Kept here, beside the legend's own mark, and read by `SeriesChart` from here — so\n * the key under a chart and the lines on it cannot disagree.\n */\nexport const STROKE_PATTERNS: readonly (string | undefined)[] = [\n  undefined,\n  \"5 4\",\n  \"1 3\",\n  \"9 3 2 3\",\n  \"9 3 2 3 2 3\",\n];\n\n/** The dash array for the nth pattern, wrapping past the fifth. */\nexport function strokeDash(order: number): string | undefined {\n  const n = STROKE_PATTERNS.length;\n  return STROKE_PATTERNS[((Math.trunc(order) % n) + n) % n];\n}\n\n/** Which of the patterns a `step` series is drawn in.\n *\n *  A whole-number channel that jumps rather than travels is drawn dashed, and it has\n *  to be one of {@link STROKE_PATTERNS} rather than a dash array written out at the\n *  call site: a legend entry says its pattern by index, so a step line drawn in\n *  anything else would be a legend promising a solid line for a dashed one. */\nexport const STEP_DASH = 1;\n\n/**\n * One key switched, as a new hidden set.\n *\n * Every caller writes `onToggle={(key) => setHidden(toggleHidden(hidden, key))}`. A\n * new set rather than a mutated one, because the state is read during render and a\n * mutation of something a component already holds is invisible to React.\n */\nexport function toggleHidden(hidden: ReadonlySet<string>, key: string): ReadonlySet<string> {\n  const next = new Set(hidden);\n  if (!next.delete(key)) next.add(key);\n  return next;\n}\n\nexport interface LegendEntry {\n  key: string;\n  label: ReactNode;\n  /** Any CSS colour — `paletteFor(i)` for the kit's own ramp. */\n  color: string;\n  /**\n   * What the entry's mark looks like. `swatch` — a filled square, the default — says\n   * WHICH MEASUREMENT. `stroke` says WHICH QUANTITY, for the charts that carry both at\n   * once and tell them apart by colour and by dash. `dot` is a round mark, for a\n   * MARKER on the chart (a point, an event) rather than a series.\n   */\n  marker?: \"swatch\" | \"stroke\" | \"dot\";\n  /** Which of {@link STROKE_PATTERNS}, when the marker is a stroke — the same index\n   *  `SeriesChartSeries.dash` takes, so a legend cannot promise a dot-dash the plot\n   *  draws dashed. Or the same custom `stroke-dasharray` string the series draws with\n   *  (keksdose's `\"4 3\"`). */\n  dash?: number | string;\n  /**\n   * A mark of the caller's own, drawn in place of {@link marker} — for a key whose\n   * mark is not a colour at all (a fading bar for \"open-ended\", a hairline for\n   * \"today\"). Decorative: it is wrapped `aria-hidden`, and the label is the name.\n   */\n  icon?: ReactNode;\n  /**\n   * `\"end\"`: push this entry to the legend's inline END — the far right in LTR, the far\n   * left in RTL — with everything before it kept at the start. kastlan's lease gantt\n   * (feedback #49) keys its bars at the start and its \"today\" hairline at the end, over\n   * the time axis whose end \"today\" is nearest, and wrote it as\n   * `className=\"[&>li:last-child]:ms-auto\"` — a selector that breaks the moment the\n   * entries are reordered and that reaches into the legend's markup.\n   *\n   * An auto inline-start margin, so it is logical (RTL mirrors it) and it takes only the\n   * row's LEFTOVER space: on a narrow screen where the row wraps, the entry wraps with it\n   * and sits at the end of its own line rather than overflowing. Give it to the LAST\n   * entry — auto margins push everything after them too, so an end entry in the middle\n   * drags the rest over with it (which is also how to end-align a GROUP: mark its first).\n   * In a vertical legend it sits at the column's inline end. Honoured by both\n   * {@link StaticLegend} and {@link ToggleLegend}, which share this entry type.\n   */\n  align?: \"start\" | \"end\";\n}\n\nexport interface ToggleLegendProps {\n  entries: LegendEntry[];\n  /** The keys currently off the chart. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** `vertical` is for a legend standing BESIDE the charts rather than under them —\n   *  what a row of charts sharing one legend wants, since under two charts there is\n   *  no \"under\", and putting it under one says it belongs to that one. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Draw a legend of ONE entry rather than nothing.\n   *\n   * A single line's legend is usually noise. It is not where the legend is the only\n   * SWITCH that line has — a series that starts hidden and has no entry to bring it\n   * back is gone for good.\n   */\n  showSingle?: boolean;\n  className?: string;\n  /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */\n  labels?: Partial<SeriesChartLabels>;\n}\n\n/**\n * A legend whose entries are switches.\n *\n * `ChartLegendContent` with `onItemClick`/`activeKey` is the other kind: clicking an\n * entry HIGHLIGHTS it and dims the rest, which is right when every series belongs on\n * the chart and one of them is momentarily interesting. This is for the opposite —\n * three coordinates on one axis where y runs to 800 and z barely moves, and the only\n * way to see z is to take y off the chart entirely. Any number may be off at once.\n *\n * A hidden entry keeps its mark and its place. Removing it would reflow the legend on\n * every click and lose the one thing it is for: saying what COULD be shown.\n *\n * Each entry is a real `<button>` with `aria-pressed` — pressed means \"on the chart\" —\n * so Tab reaches every switch and Space/Enter flips it.\n */\nexport function ToggleLegend({\n  entries,\n  hidden,\n  onToggle,\n  orientation = \"horizontal\",\n  showSingle = false,\n  className,\n  labels: labelsProp,\n}: ToggleLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length < (showSingle ? 1 : 2)) return null;\n  return (\n    <div\n      role=\"group\"\n      aria-label={labels.legend}\n      className={cn(\n        \"flex gap-x-3 gap-y-1\",\n        orientation === \"vertical\"\n          ? \"flex-col items-start justify-center\"\n          : \"mt-2 flex-wrap items-center\",\n        className,\n      )}\n    >\n      {entries.map((entry) => {\n        const off = hidden.has(entry.key);\n        return (\n          <button\n            key={entry.key}\n            type=\"button\"\n            // Pressed rather than a checkbox: it is a control over what the chart\n            // draws, and \"not pressed\" is the same sentence the dimmed mark says.\n            aria-pressed={!off}\n            onClick={() => onToggle(entry.key)}\n            className={cn(\n              \"flex items-center gap-1.5 rounded text-start text-[11px] text-[var(--text-secondary)] transition-opacity hover:opacity-80\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n              off && \"opacity-35\",\n              entry.align === \"end\" && \"ms-auto\",\n            )}\n          >\n            <LegendMark entry={entry} off={off} />\n            {entry.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface StaticLegendProps {\n  entries: LegendEntry[];\n  /** See {@link ToggleLegendProps.orientation}. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The list's accessible name. Default: the `seriesChart.legend` label. */\n  \"aria-label\"?: string;\n  /**\n   * `ul` (default): a list — \"list, 4 items\", walked with the list keys. Its entries are\n   * `listitem`s, so a host test that counts `getAllByRole(\"listitem\")` on a page with\n   * the legend on it counts the legend too: scope it (`within(...)`) or use `div`.\n   *\n   * `div`: a named `role=\"group\"` of plain entries, for a legend set inside something\n   * that is already a list or a table row, where a list in a list reads as nesting that\n   * is not there, or where the entries are too few for \"list, 2 items\" to help. The\n   * entries are read in order either way; only the list framing goes.\n   */\n  as?: \"ul\" | \"div\";\n  className?: string;\n  /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */\n  labels?: Partial<SeriesChartLabels>;\n}\n\n/**\n * A legend that is a KEY, not a control: the same entries and marks as\n * {@link ToggleLegend} — swatch, stroke (with the chart's own dash), dot, or a mark of\n * the caller's own — but nothing to press.\n *\n * A separate component rather than `ToggleLegend` without `onToggle`, because the two\n * are different things to a screen reader: a group of switches announces a pressed\n * state on every entry, a key is a LIST, read as \"list, 4 items\" and walked with the\n * list keys, and costs no tab stops. The apps drew this by hand under the charts that\n * say what a colour or a dash means without letting you switch it (kastlan's lease\n * timeline, keksdose's cash buffer).\n *\n * Unlike `ToggleLegend` it draws a single entry: a key with one line still says what\n * the one mark on the chart means.\n */\nexport function StaticLegend({\n  entries,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  as = \"ul\",\n  className,\n  labels: labelsProp,\n}: StaticLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length === 0) return null;\n  const List = as;\n  const Item = as === \"ul\" ? \"li\" : \"div\";\n  return (\n    <List\n      // A `div` takes `group`: a name on a role-less div is one ARIA forbids and\n      // screen readers drop, and the name is what says these marks are a key.\n      role={as === \"div\" ? \"group\" : undefined}\n      aria-label={ariaLabel ?? labels.legend}\n      className={cn(\n        \"m-0 flex list-none gap-x-3 gap-y-1 p-0\",\n        orientation === \"vertical\"\n          ? \"flex-col items-start justify-center\"\n          : \"mt-2 flex-wrap items-center\",\n        className,\n      )}\n    >\n      {entries.map((entry) => (\n        <Item\n          key={entry.key}\n          className={cn(\n            \"flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]\",\n            entry.align === \"end\" && \"ms-auto\",\n          )}\n        >\n          <LegendMark entry={entry} off={false} />\n          {entry.label}\n        </Item>\n      ))}\n    </List>\n  );\n}\n\n/**\n * The column a vertical legend stands in: beside the charts, on their horizontal\n * centre line. `h-full` + `justify-center`, so it centres in a grid cell or a flex row\n * that stretches it — and stacks whatever it is given, which is what a panel showing\n * two legends at once needs. The width is the caller's: how wide a legend column is\n * is a fact about that screen's layout.\n */\nexport function LegendColumn({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn(\"flex h-full flex-col justify-center gap-3\", className)}>{children}</div>\n  );\n}\n\n/**\n * A legend and what it is a legend OF, as a headed column.\n *\n * For legends that are several vocabularies at once — which measurement and which\n * channel — so the entries are read down a group and the groups across. Wrapped rows\n * would put the second half of one group on a line under the first half of the next.\n */\nexport function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"flex min-w-0 flex-col items-start gap-1\">\n      <span className=\"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n        {title}\n      </span>\n      <div className=\"flex flex-col items-start gap-y-0.5\">{children}</div>\n    </div>\n  );\n}\n\n/** The entry's mark: a square for a measurement, a stroke for a quantity. A hidden one\n *  keeps its outline — a mark that vanished would leave a line of text with nothing in\n *  front of it.\n *\n *  A stroke is an SVG line with the chart's own `strokeDasharray`, not a CSS gradient\n *  approximating it: a gradient can say \"solid or dashed\" and nothing more.\n *\n *  A hidden stroke is NOT faded here: the button around it already is (`opacity-35`),\n *  and the line used to take its own 0.35 on top — 0.35 × 0.35, about 12 %, a mark\n *  gone rather than dimmed, while the square beside it read at the full 35 %. */\nfunction LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {\n  if (entry.icon != null) {\n    return (\n      <span aria-hidden className=\"inline-flex shrink-0 items-center\">\n        {entry.icon}\n      </span>\n    );\n  }\n  if (entry.marker === \"dot\") {\n    return (\n      <span\n        aria-hidden\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{\n          backgroundColor: off ? \"transparent\" : entry.color,\n          boxShadow: `inset 0 0 0 1.5px ${entry.color}`,\n        }}\n      />\n    );\n  }\n  if (entry.marker === \"stroke\") {\n    return (\n      <svg aria-hidden viewBox=\"0 0 20 2\" className=\"h-0.5 w-5 shrink-0 overflow-visible\">\n        <line\n          x1={0}\n          y1={1}\n          x2={20}\n          y2={1}\n          stroke={entry.color}\n          strokeWidth={2}\n          strokeDasharray={typeof entry.dash === \"string\" ? entry.dash : strokeDash(entry.dash ?? 0)}\n        />\n      </svg>\n    );\n  }\n  return (\n    <span\n      aria-hidden\n      className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n      style={{\n        backgroundColor: off ? \"transparent\" : entry.color,\n        boxShadow: `inset 0 0 0 1.5px ${entry.color}`,\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/toggle-legend.tsx"],"sourcesContent":["// A legend whose entries are SWITCHES — and the stroke table it shares with\n// `SeriesChart`. Lifted out of lenkbank's measurement plots, where ten legends over\n// thirteen charts took channels on and off the picture.\n//\n// No recharts in this module: a legend of switches is plain buttons, and it is as\n// useful under a chart the consumer drew by hand as under `SeriesChart`.\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from \"./series-chart-labels\";\n\n/**\n * The strokes a reader can tell apart, in the order they are handed out.\n *\n * For the charts where the colour is already spoken for: a comparison draws each\n * measurement in its own colour, so a chart carrying several CHANNELS of each has\n * nothing left but the stroke — and \"solid versus dashed\" only gets you two.\n *\n * **Five, and the fifth is the last one.** They are the draughtsman's line types, in\n * the draughtsman's order — continuous, dashed, dotted, dash-dot, dash-dot-dot — the\n * one family of five a century of drawings has already proved legible at a hair's\n * width. A sixth is not distinguishable from one of these at two pixels wide, so a\n * chart needing one is a chart that should be split.\n *\n * Kept here, beside the legend's own mark, and read by `SeriesChart` from here — so\n * the key under a chart and the lines on it cannot disagree.\n */\nexport const STROKE_PATTERNS: readonly (string | undefined)[] = [\n  undefined,\n  \"5 4\",\n  \"1 3\",\n  \"9 3 2 3\",\n  \"9 3 2 3 2 3\",\n];\n\n/** The dash array for the nth pattern, wrapping past the fifth. */\nexport function strokeDash(order: number): string | undefined {\n  const n = STROKE_PATTERNS.length;\n  return STROKE_PATTERNS[((Math.trunc(order) % n) + n) % n];\n}\n\n/** Which of the patterns a `step` series is drawn in.\n *\n *  A whole-number channel that jumps rather than travels is drawn dashed, and it has\n *  to be one of {@link STROKE_PATTERNS} rather than a dash array written out at the\n *  call site: a legend entry says its pattern by index, so a step line drawn in\n *  anything else would be a legend promising a solid line for a dashed one. */\nexport const STEP_DASH = 1;\n\n/**\n * One key switched, as a new hidden set.\n *\n * Every caller writes `onToggle={(key) => setHidden(toggleHidden(hidden, key))}`. A\n * new set rather than a mutated one, because the state is read during render and a\n * mutation of something a component already holds is invisible to React.\n */\nexport function toggleHidden(hidden: ReadonlySet<string>, key: string): ReadonlySet<string> {\n  const next = new Set(hidden);\n  if (!next.delete(key)) next.add(key);\n  return next;\n}\n\n/**\n * Where a legend that stands BESIDE a chart goes from Large up: UNDER it\n * (docs/text-size-harmonization.md §4). Beside a chart, a legend column takes a third of\n * a row whose plot needs all of it once the text is 25–50 % larger; under it, the row\n * is the plot's and the legend wraps across the width.\n *\n * Pure CSS (`large:`), so a legend moves with the text size alone, whatever drew the\n * row around it:\n * - in a GRID it spans a row of its own (`col-span-full`) after the charts\n *   (`order-last`) — Kurvenschmiede's facing pairs;\n * - in a FLEX row it takes a line of its own (`basis-full`), and its row is allowed to\n *   wrap for it (`[*:has(>&)]:flex-wrap` sets `flex-wrap` on the PARENT — the one rule\n *   here that reaches outside the legend, because a row that may not wrap would squeeze\n *   the chart to nothing beside a full-width legend) — Kurvenschmiede's chart rows.\n *\n * A caller that places its legend itself and wants it kept beside the chart at every\n * size overrides with `large:col-auto large:basis-auto`.\n */\nconst UNDER_THE_CHART_AT_LARGE =\n  \"large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap\";\n\n/** A vertical legend's entries from Large up: across, wrapping — it is under the chart\n *  now (see {@link UNDER_THE_CHART_AT_LARGE}), where a column of entries would be a\n *  screenful of one-word lines. */\nconst VERTICAL_AT_LARGE = \"large:flex-row large:flex-wrap large:items-center large:justify-start\";\n\nexport interface LegendEntry {\n  key: string;\n  label: ReactNode;\n  /** Any CSS colour — `paletteFor(i)` for the kit's own ramp. */\n  color: string;\n  /**\n   * What the entry's mark looks like. `swatch` — a filled square, the default — says\n   * WHICH MEASUREMENT. `stroke` says WHICH QUANTITY, for the charts that carry both at\n   * once and tell them apart by colour and by dash. `dot` is a round mark, for a\n   * MARKER on the chart (a point, an event) rather than a series.\n   */\n  marker?: \"swatch\" | \"stroke\" | \"dot\";\n  /** Which of {@link STROKE_PATTERNS}, when the marker is a stroke — the same index\n   *  `SeriesChartSeries.dash` takes, so a legend cannot promise a dot-dash the plot\n   *  draws dashed. Or the same custom `stroke-dasharray` string the series draws with\n   *  (keksdose's `\"4 3\"`). */\n  dash?: number | string;\n  /**\n   * A mark of the caller's own, drawn in place of {@link marker} — for a key whose\n   * mark is not a colour at all (a fading bar for \"open-ended\", a hairline for\n   * \"today\"). Decorative: it is wrapped `aria-hidden`, and the label is the name.\n   */\n  icon?: ReactNode;\n  /**\n   * `\"end\"`: push this entry to the legend's inline END — the far right in LTR, the far\n   * left in RTL — with everything before it kept at the start. kastlan's lease gantt\n   * (feedback #49) keys its bars at the start and its \"today\" hairline at the end, over\n   * the time axis whose end \"today\" is nearest, and wrote it as\n   * `className=\"[&>li:last-child]:ms-auto\"` — a selector that breaks the moment the\n   * entries are reordered and that reaches into the legend's markup.\n   *\n   * An auto inline-start margin, so it is logical (RTL mirrors it) and it takes only the\n   * row's LEFTOVER space: on a narrow screen where the row wraps, the entry wraps with it\n   * and sits at the end of its own line rather than overflowing. Give it to the LAST\n   * entry — auto margins push everything after them too, so an end entry in the middle\n   * drags the rest over with it (which is also how to end-align a GROUP: mark its first).\n   * In a vertical legend it sits at the column's inline end. Honoured by both\n   * {@link StaticLegend} and {@link ToggleLegend}, which share this entry type.\n   */\n  align?: \"start\" | \"end\";\n}\n\nexport interface ToggleLegendProps {\n  entries: LegendEntry[];\n  /** The keys currently off the chart. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** `vertical` is for a legend standing BESIDE the charts rather than under them —\n   *  what a row of charts sharing one legend wants, since under two charts there is\n   *  no \"under\", and putting it under one says it belongs to that one.\n   *\n   *  From Large up a vertical legend moves under the charts and lays its entries\n   *  across (0.32, docs/text-size-harmonization.md §4) — see {@link LegendColumn}. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Draw a legend of ONE entry rather than nothing.\n   *\n   * A single line's legend is usually noise. It is not where the legend is the only\n   * SWITCH that line has — a series that starts hidden and has no entry to bring it\n   * back is gone for good.\n   */\n  showSingle?: boolean;\n  className?: string;\n  /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */\n  labels?: Partial<SeriesChartLabels>;\n}\n\n/**\n * A legend whose entries are switches.\n *\n * `ChartLegendContent` with `onItemClick`/`activeKey` is the other kind: clicking an\n * entry HIGHLIGHTS it and dims the rest, which is right when every series belongs on\n * the chart and one of them is momentarily interesting. This is for the opposite —\n * three coordinates on one axis where y runs to 800 and z barely moves, and the only\n * way to see z is to take y off the chart entirely. Any number may be off at once.\n *\n * A hidden entry keeps its mark and its place. Removing it would reflow the legend on\n * every click and lose the one thing it is for: saying what COULD be shown.\n *\n * Each entry is a real `<button>` with `aria-pressed` — pressed means \"on the chart\" —\n * so Tab reaches every switch and Space/Enter flips it.\n */\nexport function ToggleLegend({\n  entries,\n  hidden,\n  onToggle,\n  orientation = \"horizontal\",\n  showSingle = false,\n  className,\n  labels: labelsProp,\n}: ToggleLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length < (showSingle ? 1 : 2)) return null;\n  return (\n    <div\n      role=\"group\"\n      aria-label={labels.legend}\n      className={cn(\n        \"flex gap-x-3 gap-y-1\",\n        orientation === \"vertical\"\n          ? cn(\"flex-col items-start justify-center\", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)\n          : \"mt-2 flex-wrap items-center\",\n        className,\n      )}\n    >\n      {entries.map((entry) => {\n        const off = hidden.has(entry.key);\n        return (\n          <button\n            key={entry.key}\n            type=\"button\"\n            // Pressed rather than a checkbox: it is a control over what the chart\n            // draws, and \"not pressed\" is the same sentence the dimmed mark says.\n            aria-pressed={!off}\n            onClick={() => onToggle(entry.key)}\n            className={cn(\n              \"flex items-center gap-1.5 rounded text-start text-caption text-[var(--text-secondary)] transition-opacity hover:opacity-80\",\n              FOCUS_RING,\n              off && \"opacity-35\",\n              entry.align === \"end\" && \"ms-auto\",\n            )}\n          >\n            <LegendMark entry={entry} off={off} />\n            {entry.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface StaticLegendProps {\n  entries: LegendEntry[];\n  /** See {@link ToggleLegendProps.orientation}. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The list's accessible name. Default: the `seriesChart.legend` label. */\n  \"aria-label\"?: string;\n  /**\n   * `ul` (default): a list — \"list, 4 items\", walked with the list keys. Its entries are\n   * `listitem`s, so a host test that counts `getAllByRole(\"listitem\")` on a page with\n   * the legend on it counts the legend too: scope it (`within(...)`) or use `div`.\n   *\n   * `div`: a named `role=\"group\"` of plain entries, for a legend set inside something\n   * that is already a list or a table row, where a list in a list reads as nesting that\n   * is not there, or where the entries are too few for \"list, 2 items\" to help. The\n   * entries are read in order either way; only the list framing goes.\n   */\n  as?: \"ul\" | \"div\";\n  className?: string;\n  /** Per-instance strings over `<UiKitProvider labels={{ seriesChart }}>`. */\n  labels?: Partial<SeriesChartLabels>;\n}\n\n/**\n * A legend that is a KEY, not a control: the same entries and marks as\n * {@link ToggleLegend} — swatch, stroke (with the chart's own dash), dot, or a mark of\n * the caller's own — but nothing to press.\n *\n * A separate component rather than `ToggleLegend` without `onToggle`, because the two\n * are different things to a screen reader: a group of switches announces a pressed\n * state on every entry, a key is a LIST, read as \"list, 4 items\" and walked with the\n * list keys, and costs no tab stops. The apps drew this by hand under the charts that\n * say what a colour or a dash means without letting you switch it (kastlan's lease\n * timeline, keksdose's cash buffer).\n *\n * Unlike `ToggleLegend` it draws a single entry: a key with one line still says what\n * the one mark on the chart means.\n */\nexport function StaticLegend({\n  entries,\n  orientation = \"horizontal\",\n  \"aria-label\": ariaLabel,\n  as = \"ul\",\n  className,\n  labels: labelsProp,\n}: StaticLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length === 0) return null;\n  const List = as;\n  const Item = as === \"ul\" ? \"li\" : \"div\";\n  return (\n    <List\n      // A `div` takes `group`: a name on a role-less div is one ARIA forbids and\n      // screen readers drop, and the name is what says these marks are a key.\n      role={as === \"div\" ? \"group\" : undefined}\n      aria-label={ariaLabel ?? labels.legend}\n      className={cn(\n        \"m-0 flex list-none gap-x-3 gap-y-1 p-0\",\n        orientation === \"vertical\"\n          ? cn(\"flex-col items-start justify-center\", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)\n          : \"mt-2 flex-wrap items-center\",\n        className,\n      )}\n    >\n      {entries.map((entry) => (\n        <Item\n          key={entry.key}\n          className={cn(\n            \"flex items-center gap-1.5 text-caption text-[var(--text-secondary)]\",\n            entry.align === \"end\" && \"ms-auto\",\n          )}\n        >\n          <LegendMark entry={entry} off={false} />\n          {entry.label}\n        </Item>\n      ))}\n    </List>\n  );\n}\n\n/**\n * The column a vertical legend stands in: beside the charts, on their horizontal\n * centre line. `h-full` + `justify-center`, so it centres in a grid cell or a flex row\n * that stretches it — and stacks whatever it is given, which is what a panel showing\n * two legends at once needs. The width is the caller's: how wide a legend column is\n * is a fact about that screen's layout.\n *\n * **From Large up it goes UNDER the charts** (0.32, docs/text-size-harmonization.md\n * §4): a row of its own in a grid, a line of its own in a flex row (see\n * `UNDER_THE_CHART_AT_LARGE`), with what it holds laid across and wrapping. A\n * caller's own `max-sm:flex-row …` for the phone keeps working; the caller's width\n * (`sm:w-40`) gives way to the full row, because a size wins over a breakpoint.\n */\nexport function LegendColumn({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"flex h-full flex-col justify-center gap-3\",\n        UNDER_THE_CHART_AT_LARGE,\n        \"large:h-auto large:flex-row large:flex-wrap large:items-start large:justify-start large:gap-x-6\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * A legend and what it is a legend OF, as a headed column.\n *\n * For legends that are several vocabularies at once — which measurement and which\n * channel — so the entries are read down a group and the groups across. Wrapped rows\n * would put the second half of one group on a line under the first half of the next.\n */\nexport function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"flex min-w-0 flex-col items-start gap-1\">\n      <span className=\"text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n        {title}\n      </span>\n      <div className=\"flex flex-col items-start gap-y-0.5\">{children}</div>\n    </div>\n  );\n}\n\n/** The entry's mark: a square for a measurement, a stroke for a quantity. A hidden one\n *  keeps its outline — a mark that vanished would leave a line of text with nothing in\n *  front of it.\n *\n *  A stroke is an SVG line with the chart's own `strokeDasharray`, not a CSS gradient\n *  approximating it: a gradient can say \"solid or dashed\" and nothing more.\n *\n *  A hidden stroke is NOT faded here: the button around it already is (`opacity-35`),\n *  and the line used to take its own 0.35 on top — 0.35 × 0.35, about 12 %, a mark\n *  gone rather than dimmed, while the square beside it read at the full 35 %. */\nfunction LegendMark({ entry, off }: { entry: LegendEntry; off: boolean }) {\n  if (entry.icon != null) {\n    return (\n      <span aria-hidden className=\"inline-flex shrink-0 items-center\">\n        {entry.icon}\n      </span>\n    );\n  }\n  if (entry.marker === \"dot\") {\n    return (\n      <span\n        aria-hidden\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{\n          backgroundColor: off ? \"transparent\" : entry.color,\n          boxShadow: `inset 0 0 0 1.5px ${entry.color}`,\n        }}\n      />\n    );\n  }\n  if (entry.marker === \"stroke\") {\n    return (\n      <svg aria-hidden viewBox=\"0 0 20 2\" className=\"h-0.5 w-5 shrink-0 overflow-visible\">\n        <line\n          x1={0}\n          y1={1}\n          x2={20}\n          y2={1}\n          stroke={entry.color}\n          strokeWidth={2}\n          strokeDasharray={typeof entry.dash === \"string\" ? entry.dash : strokeDash(entry.dash ?? 0)}\n        />\n      </svg>\n    );\n  }\n  return (\n    <span\n      aria-hidden\n      className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n      style={{\n        backgroundColor: off ? \"transparent\" : entry.color,\n        boxShadow: `inset 0 0 0 1.5px ${entry.color}`,\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -72,7 +72,7 @@ function TranslationReviewEditor({
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-3 text-sm", className), children: [
     /* @__PURE__ */ jsx("code", { className: "block break-all text-xs text-[var(--text-muted)]", children: row.key }),
-    /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx(SectionLabel, { as: "span", size: "xs", children: referenceLabel }),
         /* @__PURE__ */ jsx("p", { className: "mt-1 whitespace-pre-line break-words text-[var(--text-secondary)]", children: row.reference })