@eifi1/ui-kit 0.14.2 → 0.15.1

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 { 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,43 @@ export function visibleSeries(
     .filter((entry) => !hidden.has(entry.key));
 }
 
+/** A series' name with its unit after it: "Velocity (mm/s)". */
+function withUnit(label: ReactNode, unit: string | undefined): ReactNode {
+  if (!unit) return label;
+  if (typeof label === "string" || typeof label === "number") return `${label} (${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 +788,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 } : {}),
     };
@@ -884,6 +963,55 @@ function focusedBarShape(index: number) {
   };
 }
 
+/** A marker label's size and weight — the one place both the text and its width
+ *  estimate read them from. */
+const MARKER_LABEL_SIZE = 11;
+
+/**
+ * A marker's label, centred over its point but clamped inside the plot. recharts'
+ * `position: "top"` centres on the point no matter where it is, so a marker near the
+ * plot's end (the last sample, a projection's end point) had half its label cut off by
+ * the card — "over the c" on a phone. The width is measured once drawn; the first
+ * frame (and a DOM without layout) uses a 0.6em-per-character estimate, which errs wide.
+ */
+function MarkerLabel({
+  viewBox,
+  value,
+}: {
+  viewBox?: { x?: number; y?: number; width?: number };
+  value?: ReactNode;
+}) {
+  const plot = usePlotArea();
+  const ref = useRef<SVGTextElement>(null);
+  const [measured, setMeasured] = useState<number>();
+  const text = value == null ? "" : String(value);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.getComputedTextLength !== "function") return;
+    const w = el.getComputedTextLength();
+    if (w > 0 && w !== measured) setMeasured(w);
+  }, [text, measured]);
+  if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
+  const cx = viewBox.x + (viewBox.width ?? 0) / 2;
+  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  // The start clamp applied last: a label wider than the plot keeps its start on screen.
+  const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
+  return (
+    <text
+      ref={ref}
+      x={x}
+      y={viewBox.y - 5}
+      textAnchor="middle"
+      fontSize={MARKER_LABEL_SIZE}
+      fontWeight={600}
+      fill="var(--text-primary)"
+      className="recharts-label"
+    >
+      {text}
+    </text>
+  );
+}
+
 /**
  * The keyboard's way onto a clickable chart (`onPointClick`): one focusable `<rect>` per
  * bar, or per slot when there are no bars, laid over the plot INSIDE the recharts chart,
@@ -1028,6 +1156,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);
@@ -1037,6 +1168,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;
@@ -1064,18 +1233,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
@@ -1310,6 +1491,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}
@@ -1350,6 +1533,11 @@ function SeriesPlot({
           tickLine={false}
           axisLine={false}
           minTickGap={32}
+          // Where the ticks crowd, drop every Nth rather than recharts' default
+          // `preserveEnd`, which drops whichever single tick collides: a phone's whole-week
+          // axis came out 2 4 6 8 _ 12, a doubled gap that reads as a missing week. Every
+          // other tick, keeping the last, gives 4 8 12 — still an even ruler.
+          interval="equidistantPreserveEnd"
           tick={x.ticks === false ? false : undefined}
           {...(tickAngle
             ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" }
@@ -1368,7 +1556,7 @@ function SeriesPlot({
             />
           )}
         </XAxis>
-        {axes.map((axis) => {
+        {drawnAxes.map((axis) => {
           const domain = fittedY(axis);
           const zoomed = anchored(axis)
             ? zoom?.xDomain !== undefined
@@ -1385,7 +1573,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}
@@ -1563,13 +1755,7 @@ function SeriesPlot({
               ifOverflow="discard"
               label={
                 marker.label
-                  ? {
-                      value: marker.label,
-                      position: "top",
-                      fontSize: 11,
-                      fontWeight: 600,
-                      fill: "var(--text-primary)",
-                    }
+                  ? { value: marker.label, position: "top", content: <MarkerLabel /> }
                   : undefined
               }
             />

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/stat-tile.tsx

@@ -516,12 +516,17 @@ function FigureRow({
 }) {
   const own = figure.tone ?? (tileTone === "neutral" ? undefined : tileTone);
   const svTone = own === "none" ? undefined : own;
+  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a
+  // long label ("AUG (SIGNED)") dropped its amount onto a line of its own while the
+  // next row stayed on one — two layouts in one list, and a figure no longer beside
+  // the period it belongs to. Now the label breaks within itself and the amount stays
+  // on the label's first line, end-aligned like every other row.
   return (
-    <div className="flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
-      <dt className="uppercase tracking-wide">{figure.label}</dt>
+    <div className="flex items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
+      <dt className="min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]">{figure.label}</dt>
       <dd
         data-private={priv}
-        className={cn("ms-auto whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
+        className={cn("ms-auto shrink-0 whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
       >
         {show(figure.value)}
       </dd>

package/src/components/treemap.tsx

@@ -36,8 +36,9 @@ export interface TreemapNode {
   value: number;
   /** Overrides the by-index palette colour for this tile — e.g. to paint every child
    *  in its parent group's colour, so the groups stay legible in one picture. A
-   *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets
-   *  `currentColor` ink, because there is nothing to measure — set `labelColor` then. */
+   *  concrete `#rrggbb` or a bare `var(--chart-N)` keeps the label ink measured;
+   *  anything else (another var, a `color-mix()`) gets `currentColor` ink, because
+   *  there is nothing to measure — set `labelColor` then. */
   fill?: string;
   /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):
    *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,
@@ -146,6 +147,22 @@ function useChartTokenHex(): string[] {
   return joined.split(",");
 }
 
+const CHART_TOKEN_REF = /^var\(\s*--chart-(\d+)\s*\)$/;
+
+/**
+ * The hex a tile fill measures as: the fill itself when it is hex, the live token when
+ * it is a bare `var(--chart-N)` (what `paletteFor` returns), otherwise null. Without
+ * the token case a hand-built recharts map coloured with the kit's own `paletteFor`
+ * got `currentColor` ink — dark page text on dark indigo in the light theme.
+ */
+function measurableFill(fill: string, tokens: readonly string[]): string | null {
+  if (parseHex(fill)) return fill;
+  const m = CHART_TOKEN_REF.exec(fill.trim());
+  if (!m) return null;
+  const hex = tokens[Number(m[1]) - 1];
+  return hex && parseHex(hex) ? hex : null;
+}
+
 // ── Tile ──────────────────────────────────────────────────────────────────
 
 const LABEL_FONT_SIZE = 12;
@@ -214,6 +231,8 @@ export function TreemapCell({
   nodeNote,
   dir = "ltr",
 }: TreemapCellProps) {
+  // Before the early return: a hook has to run on every render of the cell.
+  const tokenHex = useChartTokenHex();
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
   // Whole pixels: a rect on a half pixel renders its edge across two half-lit
@@ -223,7 +242,13 @@ export function TreemapCell({
   const pw = Math.round(width);
   const ph = Math.round(height);
   const tileFill = fill ?? "var(--chart-1)";
-  const ink = labelColor ?? textOn(tileFill);
+  const measured = measurableFill(tileFill, tokenHex);
+  const ink = labelColor ?? (measured ? textOn(measured) : "currentColor");
+  // The halo only on an OPAQUE fill we could measure. A translucent fill (a
+  // `color-mix(… transparent)`) composited twice — once as the tile, once as the halo
+  // over it — draws a darker ring round every glyph, which read as doubled text on the
+  // faded tiles. `none` still overrides the inherited chart `stroke`.
+  const halo = measured ? tileFill : "none";
   // Below ~44x20 there is no room for a readable word, so no label at all rather than
   // a one-letter stub bleeding over the tile edge.
   const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
@@ -284,7 +309,7 @@ export function TreemapCell({
           y={py + 15}
           direction={dir}
           fill={ink}
-          stroke={tileFill}
+          stroke={halo}
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"
@@ -302,7 +327,7 @@ export function TreemapCell({
           direction={dir}
           fill={ink}
           fillOpacity={0.85}
-          stroke={tileFill}
+          stroke={halo}
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"

package/src/components/ui.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, CSSProperties, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
+import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { horizontalStep } from "../lib/direction";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { Tooltip, type TooltipSide } from "./tooltip";
@@ -1290,9 +1291,20 @@ export const FIELD_DISPLAY =
 // adjacent controls). Pair the labelled case with a static FieldLabel.
 // `relative` so the trigger can host an absolutely-centred FieldChevron / clear
 // button the way the native Select does.
+//
+// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A
+// trigger with nothing chosen and no placeholder renders an EMPTY value span, an
+// empty span has no line box, and the trigger collapsed to its padding — 18px
+// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker
+// and MonthPicker had met the same thing as Keksdose live #294 and patched their
+// own span with a U+00A0). Here, on the shared class, it covers every trigger
+// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height
+// so it tracks whatever type the trigger is set in; the first child is the value
+// in every trigger here (the chevron and the clear button are absolute).
 export const FIELD_TRIGGER = cn(
   FIELD_BASE,
   "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]",
+  "[&>:first-child]:min-h-[1lh]",
 );
 
 /** An alias rather than an interface: the chevron adds nothing of its own to an
@@ -1871,7 +1883,11 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   invalid?: boolean;
   /** See {@link Input}'s `error`. */
   error?: ReactNode;
-  /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
+  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain
+   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field
+   *  like every other field's hint, attached through `aria-describedby`: the label
+   *  line is 11px of strip shared with the label, and a sentence placed there was
+   *  set in the value's type on top of both the label and the value. */
   hint?: ReactNode;
   /**
    * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
@@ -1911,12 +1927,33 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);
   const small = size === "sm" && label === undefined;
   const fieldId = id ?? generated;
+  const hintId = useId();
+  // Text is a caption under the field; anything else (a FieldHint) rides the label
+  // line. See `hint` above. An empty string is no caption at all.
+  const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    // The caption goes in BEFORE the error — the standing advice first, the news
+    // second, the order useFieldError keeps for a caller's own description.
+    textHint
+      ? rest["aria-describedby"]
+        ? `${rest["aria-describedby"]} ${hintId}`
+        : hintId
+      : rest["aria-describedby"],
     rest["aria-invalid"],
   );
+  const below =
+    textHint || errorEl !== null ? (
+      <>
+        {textHint && (
+          <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+            {hint}
+          </p>
+        )}
+        {errorEl}
+      </>
+    ) : null;
   // Custom chevron (native arrow hidden via appearance-none) so it sits a touch
   // in from the end border and matches both themes — feedback #223. A DISABLED
   // select has no menu to drop, so it drops the chevron too: the arrow is the one
@@ -1927,10 +1964,17 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       <FieldChevron className={small ? "end-1.5 size-3.5" : undefined} />
     );
   // `pe-9` is the room the chevron takes; a list box has none to make room for.
-  const dress = listBox ? "overflow-y-auto" : "appearance-none pe-9";
+  //
+  // A list box's height is `size` rows plus its padding, but its rows are clipped at
+  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next
+  // row through the bottom padding: `size={4}` drew four and a half. The vertical room
+  // moves onto the rows instead (option padding counts toward the row height the
+  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`
+  // whole rows, at any width.
+  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
   if (label === undefined) {
     return (
-      <FieldGroup errorEl={errorEl}>
+      <FieldGroup errorEl={below}>
         <div className={cn("relative", className)}>
           <select
             ref={ref}
@@ -1953,6 +1997,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
             className={cn(
               FIELD_BASE,
               dress,
+              listBox && "py-0",
               small && SELECT_SM,
               selectClassName,
               isInvalid && FIELD_INVALID,
@@ -1966,8 +2011,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
     );
   }
   return (
-    <FieldGroup errorEl={errorEl}>
-      <FloatingField className={className} htmlFor={fieldId} label={label} staticLabel hint={hint}>
+    <FieldGroup errorEl={below}>
+      <FloatingField className={className} htmlFor={fieldId} label={label} staticLabel hint={textHint ? undefined : hint}>
         <select
           ref={ref}
           id={fieldId}
@@ -1978,8 +2023,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
           className={cn(
             FIELD_BASE,
             // The floated label takes the top strip of a list box too, so its first
-            // row starts under the label rather than behind it.
-            listBox ? "pt-5 pb-1" : FIELD_FLOATING_PAD,
+            // row starts under the label rather than behind it. No bottom padding — see
+            // `dress`.
+            listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
             "peer",
             dress,
             selectClassName,
@@ -2695,6 +2741,10 @@ const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-[var(--bo
 const TAB_ADD_CLASSES =
   "inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
 const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
+// `relative`: the phone's visually hidden label needs a positioned ancestor (see the
+// sr-only rule in CONTRIBUTING); `max-md:px-2` squares the lone "+".
+const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
+
 
 export function Tabs<T extends string>({
   tabs,
@@ -2719,6 +2769,18 @@ export function Tabs<T extends string>({
   const phone = useMediaQuery(PHONE_QUERY, false);
   const vertical = orientation === "vertical" && !phone;
   const stripRef = useRef<HTMLDivElement>(null);
+  const fade = useStripFade(stripRef);
+  // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a
+  // deep link to the seventh report. A selection behind the cut edge was the worst
+  // case of the overflow above: the one tab the panel below belongs to, sliced to
+  // "80 km," under the add button. Only the strip scrolls (`scrollBy` on it, not
+  // `scrollIntoView`, which would scroll the page as well), and only as far as needed
+  // to clear the fade.
+  useLayoutEffect(() => {
+    const strip = stripRef.current;
+    const tab = strip?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]');
+    if (strip && tab) scrollIntoStrip(strip, tab);
+  }, [active]);
   const isRemovable = (tab: TabItem<T>) => onRemove !== undefined && tab.removable !== false;
   // Whether Delete reaches this tab: every removable tab, or only the open one.
   const deletesOnKey = (tab: TabItem<T>) =>
@@ -2821,6 +2883,11 @@ export function Tabs<T extends string>({
       // Only when vertical: `horizontal` is the tablist's implicit value, and the
       // attribute on every existing strip would be noise in every snapshot of them.
       aria-orientation={vertical ? "vertical" : undefined}
+      // Merged over a caller's own style rather than replacing it; see useStripFade.
+      // `data-overflow` names the cut ends in reading-direction terms, for a caller's
+      // own affordance (a scroll button) and for tests, which cannot read the mask.
+      style={fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style}
+      data-overflow={fade.overflow}
       // With an add button the strip gains an outer box, and `className` goes there
       // — it is the box a caller's margin or width is meant for.
       className={cn(
@@ -2892,7 +2959,16 @@ export function Tabs<T extends string>({
                 {/* A separator for the NAME only — whitespace between flex items is
                     not drawn, and without it the two lines ran together into one
                     word for a screen reader ("80 km/hloop 2"). */}{" "}
-                <span className="text-[11px] font-normal leading-tight text-[var(--text-muted)]">
+                <span
+                  className={cn(
+                    "text-[11px] font-normal leading-tight text-[var(--text-muted)]",
+                    // On a wrapped strip's filled chip (below `md`) the muted grey
+                    // was dark text on the brand fill — "loop 2" all but vanished
+                    // under the one label that most needed reading. It takes the
+                    // chip's own ink instead, as the label and the × already do.
+                    wrap && isActive && !vertical && "text-[var(--brand-contrast)] md:text-[var(--text-muted)]",
+                  )}
+                >
                   {tab.detail}
                 </span>
               </span>
@@ -3013,10 +3089,14 @@ export function Tabs<T extends string>({
           type="button"
           onClick={onAdd}
           disabled={busy}
-          className={cn(TAB_ADD_CLASSES, wrap && TAB_ADD_WRAP_CLASSES)}
+          className={cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES)}
         >
           <Plus aria-hidden />
-          {addLabel ?? text.add}
+          {/* Below md a scrolling strip keeps the room for tabs: the label is visually
+              hidden and the "+" carries it as its name. Beside "+ Add loop" a 390px strip
+              showed the open tab and a sliver of the next (showcase audit). A wrapping
+              strip has its own row there, so it keeps the label. */}
+          <span className={wrap ? undefined : "max-md:sr-only"}>{addLabel ?? text.add}</span>
         </button>
       </div>
     </div>