@eifi1/ui-kit 0.15.0 → 0.15.2

package/dist/index.d.ts

@@ -70,7 +70,7 @@ export { Autocomplete, AutocompleteProps } from './components/autocomplete.js';
 export { DEFAULT_MEASURED_GRID_LABELS, MeasuredGrid, MeasuredGridColumn, MeasuredGridLabels, MeasuredGridProps, MeasuredGridView, MeasuredRows, UseMeasuredRowsOptions, useMeasuredRows } from './components/measured-grid.js';
 export { WindowedRows, useWindowedRows } from './hooks/use-windowed-rows.js';
 export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
-export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesLegendAxes, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
 export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomAxesSetting, ZoomBinding, ZoomDrag, ZoomFitSeries, ZoomFitSource, ZoomRow, ZoomSelection, ZoomState, ZoomTarget, axisExtent, defaultZoomAxes, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
 export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, StaticLegend, StaticLegendProps, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
 export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
@@ -151,6 +151,7 @@ export { DEFAULT_UI_KIT_LABELS } from './i18n/defaults.js';
 export { AccountSettingsLabels, DEFAULT_ACCOUNT_SETTINGS_LABELS, PasskeysSettingLabels, PasswordSettingLabels, ProfileSettingLabels, TwoFactorSettingLabels } from './components/account-settings-labels.js';
 export { CLIPS_ATTRIBUTE } from './lib/clipping.js';
 export { ComboClearValue, ComboOption } from './components/combobox-core.js';
+export { SeriesChartAxisBudget } from './components/series-chart-budget.js';
 export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'clsx';
 import 'zustand';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/alert-banner.tsx

@@ -267,8 +267,17 @@ export function AlertBanner({
   // phone a long message plus an action would otherwise squeeze the text into a narrow
   // column, so the action drops under it instead. A box may wrap its text, so it
   // top-aligns and nudges the glyph onto the first line.
+  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box
+  // squeezed "Please confirm your email address…" into a ~100px column beside a
+  // "Resend verification email" button. There the action takes a line of its own under
+  // the message, and the × stays at the top end; from sm up the box is one row as before.
+  const boxWraps = !inline && !strip && action !== undefined && action !== null;
   const row = cn(
-    inlineRow ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
+    inlineRow
+      ? "inline-flex items-center"
+      : strip
+        ? "flex flex-wrap items-center gap-y-1"
+        : cn("flex items-start", boxWraps && "max-sm:flex-wrap max-sm:gap-y-2"),
     sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm",
   );
   // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,
@@ -324,7 +333,15 @@ export function AlertBanner({
   // `relative z-10` so it stays clickable over a whole-row banner's stretched target.
   const trailing =
     action !== undefined && action !== null ? (
-      <div className={cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inlineRow && "self-center", strip && "ms-auto")}>
+      <div
+        className={cn(
+          "relative z-10 flex shrink-0 items-center gap-2",
+          !strip && !inlineRow && "self-center",
+          strip && "ms-auto",
+          // Last, on a line of its own, lined up with the message (past the glyph).
+          boxWraps && cn("max-sm:order-last max-sm:basis-full", glyph && (sm ? "max-sm:ps-5" : "max-sm:ps-6")),
+        )}
+      >
         {action}
       </div>
     ) : null;

package/src/components/chart.tsx

@@ -297,7 +297,11 @@ export function ChartTooltipContent({
     <div
       ref={tipRef}
       style={boundaryRef ? { transform: flip ? "translateX(calc(-100% - 12px))" : "translateX(12px)" } : undefined}
-      className="min-w-[9rem] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl"
+      // Capped at the viewport: six long series names (lenkbank's German motion
+      // labels) made the box wider than a 390px chart, and recharts, which keeps a box
+      // inside the plot only when it fits, let it run off the edge with the values cut.
+      // Names wrap inside the cap; the values never do.
+      className="min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl"
     >
       {!hideLabel && label != null && (
         <div className="mb-1.5 font-medium text-[var(--text-primary)]">
@@ -333,8 +337,11 @@ export function ChartTooltipContent({
                 )}
                 style={{ backgroundColor: color }}
               />
-              <span className="text-[var(--text-muted)]">{name}</span>
-              <span data-private className="ms-auto font-mono font-medium tabular-nums text-[var(--text-primary)]">
+              <span className="min-w-0 break-words text-[var(--text-muted)]">{name}</span>
+              <span
+                data-private
+                className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
+              >
                 {shown}
               </span>
             </div>

package/src/components/series-chart-budget.ts

@@ -0,0 +1,121 @@
+// The axis budget of a series chart: which of its y axes are drawn, when there are more
+// than the width can carry. Pure, and apart from the chart, so the rule is tested on
+// numbers rather than on a jsdom that has no layout to measure.
+//
+// lenkbank's curve plot declares four visible axes — velocity, position and acceleration
+// on the left, loads on the right — and every one reserves its band of ticks and title.
+// At 1280 px that is a quarter of the card; at 390 px it is all of it, and the plot the
+// axes are for is ten pixels wide. An axis over budget is drawn the way a `hide: true`
+// one always was: it still scales its lines (and the zoom still refits it), but it draws
+// no ticks, no title, and reserves no width.
+
+/**
+ * How many y axes a chart draws. A number caps the TOTAL; `{ left, right }` caps each
+ * side (a side left out is not capped). Axes over the cap are hidden in declaration
+ * order — the first of each side is the last to go, see {@link budgetedAxes}.
+ */
+export type SeriesChartAxisBudget = number | { left?: number; right?: number };
+
+/** The part of an axis the budget reads. */
+interface BudgetAxis {
+  id: string;
+  orientation?: "left" | "right";
+  hide?: boolean;
+  title?: string;
+  width?: number;
+}
+
+/**
+ * The narrowest the plot may get before the automatic budget steps in, in px.
+ *
+ * About a phone's plot with one axis a side (390 px viewport, card padding, two bands
+ * of 48 + 16), where a curve's shape still reads. It is the point below which the chart
+ * is already broken today — a plot the width of a thumb between four columns of numbers
+ * — so the rule changes nothing that was working.
+ */
+export const MIN_PLOT_WIDTH = 160;
+
+/** The budget the automatic rule applies: one axis a side. */
+export const NARROW_AXIS_BUDGET: SeriesChartAxisBudget = { left: 1, right: 1 };
+
+/** The plot's margin on a side no axis band covers — `SeriesPlot`'s own. */
+const BARE_SIDE_MARGIN = 10;
+
+const sideOf = (axis: BudgetAxis) => axis.orientation ?? "left";
+
+/**
+ * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither
+ * counted nor returned. Empty for no budget.
+ *
+ * Kept, in order of priority: the first visible axis of each side (in declaration order,
+ * so the axis a caller lists first — the one the grid hangs its rules off — always
+ * stays), then the rest in declaration order, until the cap. Per side, that is simply the
+ * first `left` left-hand axes and the first `right` right-hand ones.
+ */
+export function budgetedAxes(
+  axes: readonly BudgetAxis[],
+  budget: SeriesChartAxisBudget | undefined,
+): string[] {
+  if (budget === undefined) return [];
+  const visible = axes.filter((axis) => !axis.hide);
+  if (typeof budget === "number") {
+    const cap = Math.max(0, Math.floor(budget));
+    const firsts = new Set<string>();
+    const seen = new Set<string>();
+    for (const axis of visible) {
+      if (!seen.has(sideOf(axis))) firsts.add(axis.id);
+      seen.add(sideOf(axis));
+    }
+    const priority = [
+      ...visible.filter((axis) => firsts.has(axis.id)),
+      ...visible.filter((axis) => !firsts.has(axis.id)),
+    ];
+    const kept = new Set(priority.slice(0, cap).map((axis) => axis.id));
+    return visible.filter((axis) => !kept.has(axis.id)).map((axis) => axis.id);
+  }
+  const used = { left: 0, right: 0 };
+  const out: string[] = [];
+  for (const axis of visible) {
+    const side = sideOf(axis);
+    const cap = budget[side];
+    if (cap !== undefined && used[side] >= Math.max(0, Math.floor(cap))) out.push(axis.id);
+    else used[side] += 1;
+  }
+  return out;
+}
+
+/**
+ * The automatic budget for a chart `width` px wide: {@link NARROW_AXIS_BUDGET} when the
+ * visible axes' bands would leave the plot under {@link MIN_PLOT_WIDTH} AND some side
+ * draws more than one axis — the only case one-a-side gives anything back. `undefined`
+ * otherwise, and for a width that is not known (no layout, no `ResizeObserver`).
+ *
+ * Decided on the CHART's width and the axes as declared, never on the plot the budget
+ * produced, so hiding an axis cannot widen the plot back over the line and bring it
+ * back: the rule has no feedback to oscillate on.
+ */
+export function autoAxisBudget(
+  axes: readonly BudgetAxis[],
+  width: number | undefined,
+  bandWidth: (axis: BudgetAxis) => number,
+): SeriesChartAxisBudget | undefined {
+  if (width === undefined || !(width > 0)) return undefined;
+  const visible = axes.filter((axis) => !axis.hide);
+  const left = visible.filter((axis) => sideOf(axis) === "left");
+  const right = visible.filter((axis) => sideOf(axis) === "right");
+  if (left.length <= 1 && right.length <= 1) return undefined;
+  const bands = visible.reduce((sum, axis) => sum + bandWidth(axis), 0);
+  const margins = (left.length ? 0 : BARE_SIDE_MARGIN) + (right.length ? 0 : BARE_SIDE_MARGIN);
+  return width - bands - margins < MIN_PLOT_WIDTH ? NARROW_AXIS_BUDGET : undefined;
+}
+
+/**
+ * The unit an axis' series say when the axis is not drawn: its `unit`, or else the
+ * parenthesised tail of its title — "Load (N)" says "N", which is how the apps write
+ * every axis title. `undefined` when neither says one.
+ */
+export function axisUnit(axis: { unit?: string; title?: string }): string | undefined {
+  if (axis.unit !== undefined) return axis.unit || undefined;
+  const tail = /\(([^()]+)\)\s*$/.exec(axis.title ?? "");
+  return tail?.[1].trim() || undefined;
+}

package/src/components/series-chart.tsx

@@ -26,7 +26,13 @@
 // "category"`) or real dates (`x.type: "time"`) instead of a number the app had to
 // invent. What each of those does to the zoom is decided in one place,
 // `defaultZoomAxes` in `chart-zoom.tsx`.
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+//
+// **An axis budget (0.15.1).** Every visible axis reserves its band, and four of them
+// leave a phone nothing to plot. A chart draws at most `maxVisibleAxes`, and — on its
+// own, when it is too narrow for the ones it has — one a side; the rest go hidden,
+// still scaling their lines, and their series say the unit the title no longer does.
+// The rule is `series-chart-budget.ts`.
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode, RefObject } from "react";
 import {
   Area,
@@ -58,6 +64,9 @@ import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-ch
 import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit, type TimeTickUnit } from "./series-chart-ticks";
 // The tick module stays internal; the one type of it a public prop names is re-exported.
 export type { TimeTickUnit } from "./series-chart-ticks";
+import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } from "./series-chart-budget";
+// The rule stays internal, like the ticks; the one type a public prop names is re-exported.
+export type { SeriesChartAxisBudget } from "./series-chart-budget";
 import { paletteFor } from "../theme/chart-palette";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
@@ -193,6 +202,15 @@ interface SeriesChartAxisShape {
   color?: string;
   /** What the TICKS need, in px. The title's strip is added on top. Default 48. */
   width?: number;
+  /**
+   * The unit, bare — `"mm/s"`. The title says it while the axis is drawn; when it is not
+   * (`hide`, or over the chart's axis budget — see {@link SeriesChartProps.maxVisibleAxes})
+   * the series on it say it instead, as "Velocity (mm/s)": in the tooltip of a chart
+   * whose budget hid the axis, and in the legend {@link seriesLegendEntries} builds when
+   * handed the axes. Default: the parenthesised tail of `title` ("Load (N)" → "N").
+   * `""` for a quantity with no unit whose title merely ends in brackets.
+   */
+  unit?: string;
   /**
    * Pin the scale instead of fitting it to this chart's data. For a ROW of charts
    * read against each other: auto-fitted, a 200 N loop and a 2000 N one draw the
@@ -511,6 +529,37 @@ export interface SeriesChartProps {
   /** Where the tooltip may go: for a chart inside a scroll wrapper. See
    *  {@link SeriesChartTooltip}. */
   tooltip?: SeriesChartTooltip;
+  /**
+   * The most y axes the chart DRAWS: a total, or `{ left, right }` per side. Axes over it
+   * are drawn as `hide: true` ones are — they still scale their lines and the zoom still
+   * refits them, but they draw no ticks or title and reserve no width — in declaration
+   * order, so the first axis of each side is the last to go (`series-chart-budget.ts`).
+   * The series on a hidden axis say its unit instead (see {@link SeriesChartAxis.unit}).
+   * Default: no cap — only the automatic one of `axisBudget`.
+   */
+  maxVisibleAxes?: SeriesChartAxisBudget;
+  /**
+   * `"auto"` (the default): a chart so narrow that its axes' bands would leave the plot
+   * under 160 px (`MIN_PLOT_WIDTH`) draws ONE axis a side — lenkbank's four-axis curve
+   * plot on a phone, whose plot was 10 px wide. Measured on the chart's own box
+   * (`ResizeObserver`), and applied on top of `maxVisibleAxes`.
+   *
+   * On by default because it cannot touch a layout that works: it needs a side with two
+   * or more axes AND a plot that would otherwise be under 160 px — a four-axis chart
+   * below about 440 px, a two-left-axis one below about 300. A chart with at most one
+   * axis a side (every facing pair, every single-axis chart) is never budgeted, at any
+   * width. `"off"` keeps every declared axis whatever the width: for a stack of
+   * multi-axis charts that must keep identical bands, or a caller budgeting itself.
+   * Without layout (jsdom, SSR) nothing is measured and nothing is hidden.
+   */
+  axisBudget?: "auto" | "off";
+  /**
+   * The ids of the axes the budget hid (not those declared `hide`), every time that set
+   * changes — for a legend that says their units: pass it to {@link seriesLegendEntries}
+   * as `budgeted`. Called after the render that hid them; empty once the chart is wide
+   * again.
+   */
+  onAxisBudget?: (hidden: readonly string[]) => void;
   /** Supplied by `withChartZoom` and by nothing else. */
   zoom?: ZoomBinding;
   /** Per-chart strings over `<UiKitProvider labels={{ seriesChart }}>`. */
@@ -695,13 +744,49 @@ export function visibleSeries(
     .filter((entry) => !hidden.has(entry.key));
 }
 
+/** A series' name with its unit after it: "Velocity (mm/s)" — unless the name already
+ *  ends with it. lenkbank's motion series carry "(mm/s)" in their label for the desktop
+ *  tooltip, where every axis is drawn; the budget then read "… (mm/s) (mm/s)" (0.15.1).
+ *  A label that says its unit keeps saying it once, whichever of the two an app chose. */
+function withUnit(label: ReactNode, unit: string | undefined): ReactNode {
+  if (!unit) return label;
+  if (typeof label === "string" || typeof label === "number") {
+    const text = String(label);
+    return text.trimEnd().endsWith(`(${unit})`) ? label : `${text} (${unit})`;
+  }
+  return (
+    <>
+      {label} ({unit})
+    </>
+  );
+}
+
+/** Where a legend learns which axes are not drawn — see {@link seriesLegendEntries}. */
+export interface SeriesLegendAxes {
+  /** The chart's axes. A series on one that is `hide`, or `budgeted`, says its unit. */
+  axes?: readonly SeriesChartAxis[];
+  /** What the chart's `onAxisBudget` last said. */
+  budgeted?: readonly string[];
+}
+
 /**
  * The `ToggleLegend` entries for a chart's FULL series list — colours resolved the way
  * the chart resolves them, and a stroke mark for a line drawn in a pattern (dashed,
  * step) so the key promises the stroke the plot draws. A bar or an area is a swatch.
  * Pair with {@link visibleSeries} for the chart itself.
+ *
+ * Handed the chart's `axes` (and the `budgeted` ids its `onAxisBudget` reports), a
+ * series whose axis is not drawn says the unit that axis would have: "Velocity (mm/s)"
+ * — see {@link SeriesChartAxis.unit}. Without them, the labels are as given.
  */
-export function seriesLegendEntries(series: readonly SeriesChartSeries[]): LegendEntry[] {
+export function seriesLegendEntries(
+  series: readonly SeriesChartSeries[],
+  { axes, budgeted }: SeriesLegendAxes = {},
+): LegendEntry[] {
+  const undrawn = new Map<string, string | undefined>();
+  for (const axis of axes ?? []) {
+    if (axis.hide || budgeted?.includes(axis.id)) undrawn.set(axis.id, axisUnit(axis));
+  }
   return series.map((entry, index) => {
     // A custom dash array goes to the legend as it is, so the swatch draws what the plot does.
     const own = entry.dash ?? (entry.dashed ? 1 : 0);
@@ -709,7 +794,7 @@ export function seriesLegendEntries(series: readonly SeriesChartSeries[]): Legen
     const line = (entry.type ?? "line") === "line";
     return {
       key: entry.key,
-      label: entry.label,
+      label: withUnit(entry.label, undrawn.get(entry.axis ?? DEFAULT_Y_AXIS)),
       color: entry.color ?? paletteFor(index),
       ...(line && dash !== 0 ? { marker: "stroke" as const, dash } : {}),
     };
@@ -1077,6 +1162,9 @@ function SeriesPlot({
   locale: localeProp,
   className,
   minBarLength,
+  maxVisibleAxes,
+  axisBudget = "auto",
+  onAxisBudget,
 }: PlotProps) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
@@ -1086,6 +1174,44 @@ function SeriesPlot({
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
 
+  // The chart's own width, for the automatic axis budget. Its box, not the plot's: the
+  // box does not change when an axis is hidden, so the rule cannot oscillate. Nothing
+  // measured (jsdom, the first frame) is no automatic budget.
+  const [box, setBox] = useState<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState<number | undefined>(undefined);
+  useLayoutEffect(() => {
+    if (!box || axisBudget === "off" || typeof ResizeObserver === "undefined") return;
+    const measure = () => setWidth(box.getBoundingClientRect().width || undefined);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [box, axisBudget]);
+  // The caller's cap first, then — on what is left — the automatic one.
+  const capped = budgetedAxes(axes, maxVisibleAxes);
+  const afterCap = capped.length
+    ? axes.map((axis) => (capped.includes(axis.id) ? { ...axis, hide: true as const } : axis))
+    : axes;
+  const auto =
+    axisBudget === "off"
+      ? []
+      : budgetedAxes(
+          afterCap,
+          autoAxisBudget(afterCap, width, (axis) =>
+            axisBandWidth(axis.width, Boolean(axis.title)),
+          ),
+        );
+  const budgeted = [...capped, ...auto];
+  const budgetKey = budgeted.join("\n");
+  // Reported when the SET changes, not on every render — an inline callback is a new
+  // function each time, and the guard keeps it from being called again for nothing.
+  const reported = useRef("");
+  useEffect(() => {
+    if (budgetKey === reported.current) return;
+    reported.current = budgetKey;
+    onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
+  }, [budgetKey, onAxisBudget]);
+
   // A number is pixels, set inline; a string is a class. Either way the one value
   // sizes both the chart and its empty state.
   const heightClass = typeof height === "string" ? height : undefined;
@@ -1113,18 +1239,30 @@ function SeriesPlot({
   const xKey = model.plotKey;
   const plotted = model.rows;
   const rows = model.source;
+  // What the budget took off the chart: an axis drawn as `hide` — and its unit, which
+  // the tooltip names now that no title says it. Axes the caller hid keep their series'
+  // labels as given, as they always did.
+  const drawnAxes = budgeted.length
+    ? axes.map((axis) => (budgeted.includes(axis.id) ? { ...axis, hide: true as const } : axis))
+    : axes;
+  const lostUnit = new Map(
+    axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)]),
+  );
   const config: ChartConfig = Object.fromEntries(
     series.map((entry, index) => [
       entry.key,
-      { label: entry.label, color: entry.color ?? paletteFor(index) },
+      {
+        label: withUnit(entry.label, lostUnit.get(entry.axis ?? DEFAULT_Y_AXIS)),
+        color: entry.color ?? paletteFor(index),
+      },
     ]),
   );
-  const visible = axes.filter((axis) => !axis.hide);
+  const visible = drawnAxes.filter((axis) => !axis.hide);
   // The grid hangs its horizontal rules off ONE y axis, and recharts looks for the one
   // whose id is its own default (`0`). Every axis here is named, so without saying
   // which, it finds none and draws no horizontal rules at all. The first visible axis,
   // because those are the ticks a reader puts a ruler on.
-  const gridAxis = (visible[0] ?? axes[0])?.id ?? DEFAULT_Y_AXIS;
+  const gridAxis = (visible[0] ?? drawnAxes[0])?.id ?? DEFAULT_Y_AXIS;
   const onLeft = visible.some((axis) => (axis.orientation ?? "left") === "left");
   const onRight = visible.some((axis) => axis.orientation === "right");
   // The margins are what is left once the axes have their bands: an axis band IS the
@@ -1359,6 +1497,8 @@ function SeriesPlot({
 
   return (
     <ChartContainer
+      ref={setBox}
+      data-axis-budget={budgeted.length ? budgetKey.replace(/\n/g, " ") : undefined}
       config={config}
       className={cn("w-full", heightClass, className, onPointClick && "cursor-pointer")}
       style={heightStyle}
@@ -1422,7 +1562,7 @@ function SeriesPlot({
             />
           )}
         </XAxis>
-        {axes.map((axis) => {
+        {drawnAxes.map((axis) => {
           const domain = fittedY(axis);
           const zoomed = anchored(axis)
             ? zoom?.xDomain !== undefined
@@ -1439,7 +1579,11 @@ function SeriesPlot({
               }
               allowDataOverflow={zoomed}
               orientation={axis.orientation ?? "left"}
-              width={axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide)}
+              // Nothing for a hidden axis. An axis that turns hidden on a MOUNTED chart —
+              // what the budget does on every resize across its threshold — kept its old
+              // width in recharts' stacking of that side, and pushed the axes still drawn
+              // off the chart's edge. A zero width leaves nothing stale to count.
+              width={axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title))}
               tickLine={false}
               axisLine={false}
               tickFormatter={axis.format ?? number}

package/src/components/slider.tsx

@@ -243,7 +243,11 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         // cursor turns to no-drop and the thumb stops following the pointer for the
         // rest of the gesture. The readout is only made unselectable when it is plain
         // text — a NumberInput in that slot has to stay selectable to be editable.
-        <div className="flex items-center gap-2">
+        // `flex-wrap`: a readout wider than the room beside the label (a value plus a
+        // link button, "0 / 60 / 120 km/h · Alle Geschwindigkeiten") used to print on
+        // top of it at 390px (lenkbank L1). Each keeps its own width, so the readout
+        // drops to a line of its own, still at the end, only when the two don't fit.
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
           {label !== undefined && (
             <label
               htmlFor={inputId}
@@ -256,7 +260,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
           {readout !== undefined && (
             <span
               className={cn(
-                "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-primary)]",
+                "ms-auto max-w-full text-xs tabular-nums text-[var(--text-primary)]",
                 plainReadout && "select-none",
               )}
             >

package/src/components/table.tsx

@@ -161,8 +161,33 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
    * row can still say otherwise with {@link TableRowProps.bordered}.
    */
   rowDividers?: boolean;
+  /**
+   * `"phone"`: below `sm` each body row becomes a block — its first cell the row's
+   * title, every further cell under its column's header as a small label — and the
+   * head row is visually hidden (still read by screen readers). For tables of PROSE,
+   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into
+   * two-word slivers at 390px and ran its third column off the screen). A table of
+   * numbers should keep scrolling sideways, which is why this is opt-in. The labels
+   * are the head row's cell texts, read from the DOM; a body cell spanning several
+   * columns gets none.
+   */
+  stack?: "phone";
 }
 
+/**
+ * Below `sm` on a `stack="phone"` table: rows as blocks, the head visually hidden,
+ * the first cell as a title, the others labelled by `data-label` (set by the table).
+ */
+const STACK_PHONE_CLASSES = cn(
+  "max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block",
+  "max-sm:[&_thead]:sr-only",
+  "max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2",
+  "max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start",
+  "max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5",
+  "max-sm:[&_tbody_td:first-child]:font-medium",
+  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-[11px] max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
+);
+
 /**
  * A plain, static HTML table in the kit's tokens — for the detail views that need
  * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.
@@ -188,6 +213,7 @@ export function Table({
   layout,
   framed = false,
   rowDividers = true,
+  stack,
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -196,6 +222,37 @@ export function Table({
   const [captions, setCaptions] = useState(0);
   const wrapper = useRef<HTMLDivElement | null>(null);
   const overflowing = useScrollOverflow(wrapper);
+  const tableRef = useRef<HTMLTableElement | null>(null);
+
+  // `stack="phone"`: label every body cell with its column's header text, and keep the
+  // table's roles explicit — `display: block` on table parts drops their table
+  // semantics in some engines. Re-run on any change to the rows, which the caller
+  // renders and this component never sees.
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!stack || !table) return;
+    const label = () => {
+      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? "");
+      table.setAttribute("role", "table");
+      for (const row of Array.from(table.rows)) {
+        row.setAttribute("role", "row");
+        let column = 0;
+        for (const cell of Array.from(row.cells)) {
+          const span = cell.colSpan || 1;
+          if (cell.tagName === "TH") cell.setAttribute("role", cell.closest("thead") ? "columnheader" : "rowheader");
+          else cell.setAttribute("role", "cell");
+          const text = span === 1 && column > 0 ? heads[column] : undefined;
+          if (cell.tagName === "TD" && text) cell.setAttribute("data-label", text);
+          else cell.removeAttribute("data-label");
+          column += span;
+        }
+      }
+    };
+    label();
+    const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(label);
+    observer?.observe(table, { childList: true, subtree: true, characterData: true });
+    return () => observer?.disconnect();
+  }, [stack]);
 
   const ctx = useMemo<TableContextValue>(
     () => ({
@@ -239,12 +296,14 @@ export function Table({
       >
         <table
           {...rest}
+          ref={tableRef}
           aria-label={ariaLabel}
           className={cn(
             "w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]",
             density === "compact" && "text-xs",
             layout === "fixed" && "table-fixed",
             layout === "auto" && "table-auto",
+            stack === "phone" && STACK_PHONE_CLASSES,
             className,
           )}
         />

package/src/components/toggle-group.tsx

@@ -26,6 +26,15 @@ export interface ToggleGroupBaseProps<T extends string>
   /** Applied to every option button (e.g. to tune height/rounding to match
    *  adjacent fields). Per-option `className` still wins over this. */
   optionClassName?: string;
+  /**
+   * What happens when the options do not fit the group's width. `"truncate"`
+   * (default): one row, and the labels that do not fit end in an ellipsis — the height
+   * never changes. `"wrap"`: the segments flow onto a second row and every label stays
+   * whole ("Bewegung", not "Beweg…"), at the price of a taller group on a narrow
+   * screen (lenkbank L4: five signal types on a 390px control page). From the width
+   * where they fit, both look the same.
+   */
+  overflow?: "truncate" | "wrap";
   /**
    * @deprecated Pass `aria-label` instead — the DOM spelling, which every other
    * control in this kit now answers to. Kept working because three applications ship
@@ -174,6 +183,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     options,
     className,
     optionClassName,
+    overflow = "truncate",
     ariaLabel,
     disabled = false,
     size = "md",
@@ -270,6 +280,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a
         // phone does see is the focus ring — see the segment's own note below.)
         "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
+        overflow === "wrap" && "flex-wrap",
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -318,7 +329,8 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
               // overlaying the selected segment's boundary. Inset keeps the ring
               // inside the segment it belongs to; focus-visible keeps it for the
               // keyboard, which is the only input that needs it.
-              "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)]",
+              overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
+              "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
               size === "sm" && "px-2 py-1 text-xs",
               // In a field: no vertical padding and a 20px line — a `text-sm` line, the
               // same line a labelled Select holds under its label strip — so the field's