@eifi1/ui-kit 0.12.0 → 0.13.0

package/dist/components/text.d.ts

@@ -14,6 +14,14 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a
  * figure that size, 12px competed with it. Named `md` rather than slotted in order
  * because `sm` was already the default and renaming it would move every caller.
+ *
+ * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred
+ * over each of a pair of facing charts, or over each column of a small-multiples grid.
+ * There the label names a plot, not a section of the page, so `sm` (12px, the page's
+ * section heading) out-ranks the card title above it, and `xs` (10px, a legend's
+ * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a
+ * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page
+ * content.
  */
 type SectionLabelSize = "xs" | "md" | "sm";
 /**
@@ -26,6 +34,19 @@ type SectionLabelSize = "xs" | "md" | "sm";
  * case.
  */
 declare const SECTION_LABEL_CLASS: Record<SectionLabelSize, string>;
+/**
+ * `plain` (default): the label alone, as above.
+ *
+ * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom
+ * border — the day-group header of keksdose's mobile transaction list
+ * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.
+ * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,
+ * not the plain label's semibold muted — so adopting the kit does not restyle a live
+ * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a
+ * `ListItem density="comfortable"` row below it; override it with `className` for a
+ * list at another density. A sticky header is the caller's: add `sticky top-0`.
+ */
+type SectionLabelVariant = "plain" | "band";
 type SectionLabelElement = "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
 interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
     /**
@@ -36,6 +57,9 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
      */
     as?: SectionLabelElement;
     size?: SectionLabelSize;
+    /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group
+     *  header. See {@link SectionLabelVariant}. */
+    variant?: SectionLabelVariant;
     children: ReactNode;
 }
 /**
@@ -45,7 +69,7 @@ interface SectionLabelProps extends ComponentPropsWithoutRef<"h3"> {
  * 10px version on a menu row. One component, the token colour, and the level chosen
  * where the outline is known.
  */
-declare function SectionLabel({ as, size, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
+declare function SectionLabel({ as, size, variant, className, children, ...rest }: SectionLabelProps): react.JSX.Element;
 /**
  * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`
  * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a
@@ -67,4 +91,4 @@ interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
  */
 declare function Caption({ as, className, children, ...rest }: CaptionProps): react.JSX.Element;
 
-export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize };
+export { CAPTION_CLASS, Caption, type CaptionProps, SECTION_LABEL_CLASS, SectionLabel, type SectionLabelProps, type SectionLabelSize, type SectionLabelVariant };

package/dist/components/text.js

@@ -6,9 +6,23 @@ const SECTION_LABEL_CLASS = {
   md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
   sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
 };
-function SectionLabel({ as = "h3", size = "sm", className, children, ...rest }) {
+const SECTION_LABEL_BAND_CLASS = {
+  xs: "text-[10px]",
+  md: "text-[11px]",
+  sm: "text-xs"
+};
+const BAND = "block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]";
+function SectionLabel({
+  as = "h3",
+  size = "sm",
+  variant = "plain",
+  className,
+  children,
+  ...rest
+}) {
   const Tag = as;
-  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(SECTION_LABEL_CLASS[size], className), children });
+  const type = variant === "band" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cn(type, className), children });
 }
 const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
 function Caption({ as = "p", className, children, ...rest }) {

package/dist/components/text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({ as = \"h3\", size = \"sm\", className, children, ...rest }: SectionLabelProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(SECTION_LABEL_CLASS[size], className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AA4DI;AA3DJ,SAAS,UAAU;AA6BZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuBO,SAAS,aAAa,EAAE,KAAK,MAAM,OAAO,MAAM,WAAW,UAAU,GAAG,KAAK,GAAsB;AACxG,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,oBAAoB,IAAI,GAAG,SAAS,GAC9D,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/text.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── SectionLabel ─────────────────────────────────────────────────────────── */\n\n/**\n * `xs` is 10px — the size `LegendGroup`'s title and the top-bar menus' heading row draw;\n * `sm` (default) is 12px — the size `StatTile`'s label and lenkbank's section headings\n * (control-page.tsx:119/123/127) draw. Two sizes because the label sits either inside a\n * dense panel (a legend, a menu) or above a block of page content, and one size looked\n * wrong in the other place.\n *\n * `md` (0.11.0) is 11px, the rung between them: keksdose's budget-summary card labels\n * its figures (\"Assigned\", \"Activity\", \"Upcoming\", \"Available\" —\n * budget-summary-card:258/264/286/297) and its support thread its day divider and a message's meta line\n * (support-thread:153/223) at `text-[11px]` by hand — 10px read as a footnote under a\n * figure that size, 12px competed with it. Named `md` rather than slotted in order\n * because `sm` was already the default and renaming it would move every caller.\n *\n * `md` is also the heading over a CHART COLUMN (lenkbank P9): the small label centred\n * over each of a pair of facing charts, or over each column of a small-multiples grid.\n * There the label names a plot, not a section of the page, so `sm` (12px, the page's\n * section heading) out-ranks the card title above it, and `xs` (10px, a legend's\n * title) sinks below the axis ticks it sits beside. Rule of thumb: `xs` inside a\n * control (legend, menu), `md` over a figure or a plot, `sm` over a block of page\n * content.\n */\nexport type SectionLabelSize = \"xs\" | \"md\" | \"sm\";\n\n/**\n * The small, uppercase, tracked, muted label — as a class string, per size.\n *\n * Exported because `LegendGroup` and `StatTile` already draw it inline, and a class a\n * caller has to position itself (a `<th>`, a `<legend>`, a menu `<li>`) is better\n * reached as a string than wrapped in a component that only takes a `className`. The\n * uppercase is CSS, so a screen reader reads the text as written: write it in normal\n * case.\n */\nexport const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  md: \"text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n  sm: \"text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n};\n\n/**\n * `plain` (default): the label alone, as above.\n *\n * `band` (0.13, keksdose F5): the label on a full-width `surface-2` bar with a bottom\n * border — the day-group header of keksdose's mobile transaction list\n * (mobile-transaction-list.tsx:171), which separates one day's rows from the next.\n * Its type is kept as keksdose drew it — `font-medium` in the SECONDARY text colour,\n * not the plain label's semibold muted — so adopting the kit does not restyle a live\n * list: the bar already sets the label apart, and needs no extra weight. The padding (`px-4 py-2`) lines the text up with a\n * `ListItem density=\"comfortable\"` row below it; override it with `className` for a\n * list at another density. A sticky header is the caller's: add `sticky top-0`.\n */\nexport type SectionLabelVariant = \"plain\" | \"band\";\n\n/** The band's own type and box, per size — spelled out rather than merged over\n *  {@link SECTION_LABEL_CLASS}, so the result does not hang on tailwind-merge telling\n *  a font-size `text-[…]` from a colour `text-[var(…)]`. */\nconst SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {\n  xs: \"text-[10px]\",\n  md: \"text-[11px]\",\n  sm: \"text-xs\",\n};\nconst BAND =\n  \"block border-b border-[var(--border)] bg-[var(--bg-surface-2)] px-4 py-2 font-medium uppercase tracking-wide text-[var(--text-secondary)]\";\n\ntype SectionLabelElement = \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"div\" | \"legend\";\n\nexport interface SectionLabelProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * The element — which is the heading LEVEL, and so is the caller's to pick: the kit\n   * cannot know where in the outline the label sits. Default `h3`, which is what\n   * lenkbank's control page writes under its `h2` card title. Pass `span` or `p` for a\n   * label that is not a heading at all (a legend group's title).\n   */\n  as?: SectionLabelElement;\n  size?: SectionLabelSize;\n  /** `band` draws the label on a `surface-2` bar with a bottom border — a list's group\n   *  header. See {@link SectionLabelVariant}. */\n  variant?: SectionLabelVariant;\n  children: ReactNode;\n}\n\n/**\n * A section's small uppercase label. lenkbank spells\n * `text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400`\n * on every `<h3>` of its control page and more; keksdose's budget switcher writes the\n * 10px version on a menu row. One component, the token colour, and the level chosen\n * where the outline is known.\n */\nexport function SectionLabel({\n  as = \"h3\",\n  size = \"sm\",\n  variant = \"plain\",\n  className,\n  children,\n  ...rest\n}: SectionLabelProps) {\n  const Tag = as as ElementType;\n  const type = variant === \"band\" ? cn(SECTION_LABEL_BAND_CLASS[size], BAND) : SECTION_LABEL_CLASS[size];\n  return (\n    <Tag {...rest} className={cn(type, className)}>\n      {children}\n    </Tag>\n  );\n}\n\n/* ── Caption ──────────────────────────────────────────────────────────────── */\n\n/**\n * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`\n * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a\n * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.\n * Exported for the same reason lenkbank's is a string: every caller positions it\n * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the\n * type, not the box.\n */\nexport const CAPTION_CLASS = \"text-[11px] leading-snug text-[var(--text-muted)]\";\n\nexport interface CaptionProps extends ComponentPropsWithoutRef<\"p\"> {\n  /** Default `p`; `span` for a caption inside a line of other content. */\n  as?: \"p\" | \"span\" | \"div\";\n  children: ReactNode;\n}\n\n/**\n * The small grey sentence under a field, a table or a button — prose ABOUT the thing\n * above it. Not `FieldHint`, which hides behind a field label's \"?\" so a paragraph does\n * not make one field taller than its neighbour (lenkbank feedback #27).\n */\nexport function Caption({ as = \"p\", className, children, ...rest }: CaptionProps) {\n  const Tag = as as ElementType;\n  return (\n    <Tag {...rest} className={cn(CAPTION_CLASS, className)}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";AAwGI;AAvGJ,SAAS,UAAU;AAqCZ,MAAM,sBAAwD;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAmBA,MAAM,2BAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,OACJ;AA0BK,SAAS,aAAa;AAAA,EAC3B,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM;AACZ,QAAM,OAAO,YAAY,SAAS,GAAG,yBAAyB,IAAI,GAAG,IAAI,IAAI,oBAAoB,IAAI;AACrG,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,MAAM,SAAS,GACzC,UACH;AAEJ;AAYO,MAAM,gBAAgB;AAatB,SAAS,QAAQ,EAAE,KAAK,KAAK,WAAW,UAAU,GAAG,KAAK,GAAiB;AAChF,QAAM,MAAM;AACZ,SACE,oBAAC,OAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD,UACH;AAEJ;","names":[]}

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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { aw as InputProps } from '../kit-labels-v3biUF1L.js';
+import { ay as InputProps } from '../kit-labels-Mz8zZHIF.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

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

@@ -96,6 +96,25 @@ type ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);
 /** The group as it has always been: one option is always the answer. */
 interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {
     allowEmpty?: false;
+    /**
+     * What the options ARE to a screen reader, separately from whether the group can be
+     * emptied (kastlan feedback #47).
+     *
+     *  - `"radio"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the
+     *    choice. Right for a choice between answers ("Monthly / Yearly").
+     *  - `"pressed"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,
+     *    Space/Enter to press; still one option always pressed. Right for a row that reads
+     *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the
+     *    selection on focus would be a surprise.
+     *
+     * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second
+     * press clear the choice — so kastlan took the clearable shape and threw the `null`
+     * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would
+     * unpress what it would not. Here a press on the pressed option re-sends its value, as
+     * the radio shape does, and nothing is ever unpressed. A clearable group
+     * (`allowEmpty`) is always `"pressed"`: a radio cannot be unchecked by activating it.
+     */
+    semantics?: "radio" | "pressed";
     value: T;
     onChange: (value: T) => void;
     /** See {@link ToggleGroupCaption}. */
@@ -113,6 +132,9 @@ interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProp
  */
 interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {
     allowEmpty: true;
+    /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so
+     *  a wrapper can forward one `semantics` to either shape. */
+    semantics?: "pressed";
     value: T | null;
     onChange: (value: T | null) => void;
     /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */

package/dist/components/toggle-group.js

@@ -26,7 +26,7 @@ function ToggleGroup(props) {
   const field = labelled && labelPlacement === "field";
   const above = labelled && labelPlacement === "above";
   const hasError = labelled && error !== void 0 && error !== null && error !== false && error !== "";
-  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, ...rest } = restWithMode;
+  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;
   const outsideInvalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
   const captionId = useId();
   const captionIsLive = typeof caption === "function";
@@ -36,7 +36,7 @@ function ToggleGroup(props) {
     if (props.allowEmpty) props.onChange(next === value ? null : next);
     else props.onChange(next);
   };
-  const clearable = props.allowEmpty === true;
+  const pressed = props.allowEmpty === true || props.semantics === "pressed";
   const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;
   const onRadioKey = (e, index) => {
     const last = options.length - 1;
@@ -58,7 +58,7 @@ function ToggleGroup(props) {
     "div",
     {
       ...rest,
-      role: clearable ? "group" : "radiogroup",
+      role: pressed ? "group" : "radiogroup",
       "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,
@@ -95,12 +95,12 @@ function ToggleGroup(props) {
           "button",
           {
             type: "button",
-            role: clearable ? void 0 : "radio",
-            "aria-checked": clearable ? void 0 : active,
-            "aria-pressed": clearable ? active : void 0,
+            role: pressed ? void 0 : "radio",
+            "aria-checked": pressed ? void 0 : active,
+            "aria-pressed": pressed ? active : void 0,
             disabled,
-            tabIndex: clearable ? void 0 : opt.value === tabStop ? 0 : -1,
-            onKeyDown: clearable ? void 0 : (e) => onRadioKey(e, index),
+            tabIndex: pressed ? void 0 : opt.value === tabStop ? 0 : -1,
+            onKeyDown: pressed ? void 0 : (e) => onRadioKey(e, index),
             onClick: () => choose(opt.value),
             className: cn(
               // `truncate` (which carries whitespace-nowrap) rather than letting a

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\";\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   * @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  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   * 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\";\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\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  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  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    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const labelled = label !== undefined && label !== null && label !== false && label !== \"\";\n  // `field` is the chrome; a label placed above keeps the bare group's own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const hasError = labelled && error !== undefined && error !== null && error !== false && 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, ...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 = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  const clearable = props.allowEmpty === true;\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 clearable mode is a\n  // row of toggle 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    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\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={clearable ? \"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 `disabled` on each button: a radio\n      // 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={disabled || 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        // 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        disabled && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || (above && 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      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={clearable ? undefined : \"radio\"}\n            aria-checked={clearable ? undefined : active}\n            aria-pressed={clearable ? active : undefined}\n            disabled={disabled}\n            tabIndex={clearable ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={clearable ? 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              \"min-w-0 flex-1 basis-auto truncate 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 a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\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.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\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={disabled}\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 (!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 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\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\";\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   * @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  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   * 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\";\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\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    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const labelled = label !== undefined && label !== null && label !== false && label !== \"\";\n  // `field` is the chrome; a label placed above keeps the bare group's own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const hasError = labelled && error !== undefined && error !== null && error !== false && 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 = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\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    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\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 `disabled` on each button: a radio\n      // 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={disabled || 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        // 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        disabled && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || (above && 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      {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            disabled={disabled}\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              \"min-w-0 flex-1 basis-auto truncate 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 a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\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.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\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={disabled}\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 (!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 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -59,6 +59,23 @@ interface LegendEntry {
      * "today"). Decorative: it is wrapped `aria-hidden`, and the label is the name.
      */
     icon?: ReactNode;
+    /**
+     * `"end"`: push this entry to the legend's inline END — the far right in LTR, the far
+     * left in RTL — with everything before it kept at the start. kastlan's lease gantt
+     * (feedback #49) keys its bars at the start and its "today" hairline at the end, over
+     * the time axis whose end "today" is nearest, and wrote it as
+     * `className="[&>li:last-child]:ms-auto"` — a selector that breaks the moment the
+     * entries are reordered and that reaches into the legend's markup.
+     *
+     * An auto inline-start margin, so it is logical (RTL mirrors it) and it takes only the
+     * row's LEFTOVER space: on a narrow screen where the row wraps, the entry wraps with it
+     * and sits at the end of its own line rather than overflowing. Give it to the LAST
+     * entry — auto margins push everything after them too, so an end entry in the middle
+     * drags the rest over with it (which is also how to end-align a GROUP: mark its first).
+     * In a vertical legend it sits at the column's inline end. Honoured by both
+     * {@link StaticLegend} and {@link ToggleLegend}, which share this entry type.
+     */
+    align?: "start" | "end";
 }
 interface ToggleLegendProps {
     entries: LegendEntry[];

package/dist/components/toggle-legend.js

@@ -52,7 +52,8 @@ function ToggleLegend({
             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)]",
-              off && "opacity-35"
+              off && "opacity-35",
+              entry.align === "end" && "ms-auto"
             ),
             children: [
               /* @__PURE__ */ jsx(LegendMark, { entry, off }),
@@ -86,7 +87,10 @@ function StaticLegend({
       children: entries.map((entry) => /* @__PURE__ */ jsxs(
         "li",
         {
-          className: "flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]",
+          className: cn(
+            "flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]",
+            entry.align === "end" && "ms-auto"
+          ),
           children: [
             /* @__PURE__ */ jsx(LegendMark, { entry, off: false }),
             entry.label

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\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            )}\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  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  className,\n  labels: labelsProp,\n}: StaticLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length === 0) return null;\n  return (\n    <ul\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        <li\n          key={entry.key}\n          className=\"flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]\"\n        >\n          <LegendMark entry={entry} off={false} />\n          {entry.label}\n        </li>\n      ))}\n    </ul>\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 { 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  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  className,\n  labels: labelsProp,\n}: StaticLegendProps) {\n  const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, labelsProp);\n  if (entries.length === 0) return null;\n  return (\n    <ul\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        <li\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        </li>\n      ))}\n    </ul>\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":[]}

package/dist/components/tooltip.d.ts

@@ -31,6 +31,19 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
      * what they were before the default existed.
      */
     portal?: boolean;
+    /**
+     * Mount the IN-PLACE bubble only while it is up (hovered or focused, not dismissed),
+     * instead of always. It still sits next to its trigger and is still placed by CSS
+     * alone; what changes is that, while closed, it is not in the DOM — so it is not in
+     * `getAllByRole("tooltip")`, not in an ancestor's `textContent` and not in an
+     * ancestor's accessible name. The trigger is described (`aria-describedby`) while
+     * the bubble is up, exactly as a portalled one is. See "Lazy in place" on
+     * {@link Tooltip} for why this exists (keksdose F6) and why it is not the default.
+     *
+     * Has no effect on a bubble that is portalled (`portal`, or auto-portalled inside a
+     * clipping container) — that one is already mounted only while up.
+     */
+    lazy?: boolean;
     /** Tag the bubble `data-private`, for a label that repeats the user's own data. */
     redact?: boolean;
     children: ReactNode;
@@ -109,8 +122,45 @@ interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
  * Why not simply portal everything? Because the in-place bubble is the one existing
  * app tests rely on (it is in the DOM without a hover), and because it follows its
  * trigger through a scroll or an animation for free — the portalled one re-measures.
+ *
+ * ⚠️ **Lazy in place: `lazy` keeps the bubble next to its trigger but out of the DOM
+ * until it is up (keksdose F6).** `data-clips` cured the doubled text for tooltips
+ * inside a table; it did nothing for the ones outside any clipping container, where the
+ * always-mounted bubble is still a real `role="tooltip"` node full of text. About seven
+ * keksdose sites — column-header tooltips, a direction toggle, an fx-estimate row, a
+ * FlagBadge, a toast inside a `<button>` — still pinned `portal` for that alone: their
+ * tests found two tooltips with `getAllByRole("tooltip")`, read the label twice in a
+ * `textContent`, or got a button whose accessible name had the bubble's sentence glued
+ * on. `portal` fixed the test and cost the browser the measured, re-positioning bubble
+ * for no reason. `lazy` is the in-place bubble with the portalled one's lifetime: it is
+ * rendered only while hovered or focused (and not dismissed), in the same slot, with the
+ * same classes, so it looks and sits exactly as the default one does when it is up.
+ *
+ * Why unmount rather than hide? Hiding was the other option — keep the bubble mounted
+ * with `hidden` (or `aria-hidden` plus `display: none` until `:hover` / `:focus-within`)
+ * and let `aria-describedby` go on pointing at it, which the accname algorithm allows:
+ * a node referenced directly by `aria-describedby` contributes its text even while
+ * hidden. That would take the bubble out of the role queries and out of an ancestor's
+ * accessible name — but NOT out of `textContent`, which is plain DOM and counts hidden
+ * text too, and `textContent` is one of the three things F6 lists. Only a bubble that
+ * is not there solves all three. The cost is the portalled variant's: the trigger is
+ * described while the bubble is up rather than always. Focusing the trigger IS what
+ * puts it up, and React commits the `aria-describedby` in the same task as that focus
+ * event, so a screen reader landing on the control still hears it; what goes is the description
+ * of a trigger that is read in browse mode without ever being focused.
+ *
+ * Escape still dismisses it — here by unmounting it, which takes it off the screen and
+ * out of the accessibility tree at once — and the next hover or focus brings it back.
+ * There is no fade to lose: neither in-place bubble has ever had a transition, only the
+ * `opacity` switch, so appearing on a state change looks the same as appearing on
+ * `:hover`.
+ *
+ * Why opt-in rather than the new default? Because the always-mounted bubble is the one
+ * existing app tests find without a hover (see above): flipping it would turn every
+ * `getByRole("tooltip")` written against 0.12 into a failure in all three apps at once.
+ * Reach for `lazy` wherever a `portal` was pinned only to keep a test's DOM clean.
  */
-declare function Tooltip({ label, side, className, portal, redact, children, ...rest }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, side, className, portal, lazy, redact, children, ...rest }: TooltipProps): react.JSX.Element;
 interface TooltipSize {
     width: number;
     height: number;