@eifi1/ui-kit 0.15.3 → 0.15.5

package/src/components/number-input.tsx

@@ -1,4 +1,4 @@
-import { useId, useRef, useState } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
@@ -191,6 +191,21 @@ export function NumberInput({
   const asDisplay = isMobile && variant === "display";
   const showCalc = calculator && !disabled && !isMobile;
   const [focused, setFocused] = useState(false);
+  // The unit and the calculator's measured width, reserved as the field's end padding.
+  const endRef = useRef<HTMLDivElement>(null);
+  const [endWidth, setEndWidth] = useState<number | null>(null);
+  const hasEnd = showCalc || suffix !== undefined;
+  useLayoutEffect(() => {
+    const el = endRef.current;
+    if (!hasEnd || !el || typeof ResizeObserver === "undefined") return;
+    // The first callback fires on `observe`; no layout (jsdom) keeps the class fallback.
+    const observer = new ResizeObserver(() => {
+      const width = el.getBoundingClientRect().width;
+      setEndWidth(width > 0 ? Math.ceil(width) : null);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasEnd]);
   // On mobile, focusing opens the numpad bottom sheet instead of the native
   // keyboard (#334); the ref lets its "Done" blur → commit + close.
   const showNumpad = isMobile && !disabled && focused;
@@ -272,12 +287,17 @@ export function NumberInput({
           showCalc && suffix !== undefined ? "pe-16" : showCalc ? "pe-9" : suffix !== undefined ? "pe-8" : undefined,
           invalid && FIELD_INVALID,
         )}
+        // The classes above are the fallback; once the end controls are measured the
+        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a
+        // "%" in a ~78px table cell 32px of padding and the digits ~32px of room
+        // (keksdose live #367); a long unit ("km/h") got too little.
+        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + 4 } : undefined}
       />
       {(showCalc || suffix !== undefined) && (
         // One flex track for both, so the unit and the calculator sit side by side
         // instead of stacking on the same corner — AmountInput's arrangement, which
         // has carried a chip and a calculator together since #430.
-        <div className="absolute inset-y-0 end-0 flex items-center">
+        <div ref={endRef} className="absolute inset-y-0 end-0 flex items-center">
           {showCalc && (
             <CalculatorButton
               value={value}

package/src/components/series-chart.tsx

@@ -68,7 +68,13 @@ import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } fr
 // 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 {
+  useKitChartTooltipPlacement,
+  useKitLabels,
+  useKitLocale,
+  type ChartTooltipPlacement,
+} from "../i18n/kit-labels";
+import { useMediaQuery } from "../hooks/use-media-query";
 import { cn } from "../lib/cn";
 
 export interface SeriesChartSeries {
@@ -356,8 +362,49 @@ export interface SeriesChartX {
   integerTicks?: boolean;
 }
 
+/** Where the tooltip goes — see {@link SeriesChartTooltip.placement}. */
+export type SeriesChartTooltipPlacement = ChartTooltipPlacement;
+
+/** Below Tailwind's `sm` — where `"auto"` takes the tooltip off the plot. Narrower than
+ *  the kit's `PHONE_QUERY` (767 px) on purpose: a tablet's plot is wide enough that the
+ *  box beside the finger leaves the data in view; a phone's is not. */
+const TOOLTIP_READOUT_QUERY = "(max-width: 639px)";
+
+/**
+ * The placement a chart actually uses: its own, else the provider's, else `"cursor"`;
+ * `"auto"` is `"above"` on a phone (`phone`: below `sm`) and `"cursor"` from `sm` up.
+ */
+export function resolveTooltipPlacement(
+  own: SeriesChartTooltipPlacement | undefined,
+  fromProvider: SeriesChartTooltipPlacement | undefined,
+  phone: boolean,
+): "cursor" | "above" | "below" {
+  const wanted = own ?? fromProvider ?? "cursor";
+  return wanted === "auto" ? (phone ? "above" : "cursor") : wanted;
+}
+
 /** Room for the tooltip beyond the chart — see {@link SeriesChartProps.tooltip}. */
 export interface SeriesChartTooltip {
+  /**
+   * Where the values under the pointer are shown (keksdose #359: on a phone the box
+   * sat under the finger, on the very data it was reporting).
+   * - `"cursor"` (the default): the floating box that follows the pointer.
+   * - `"above"` / `"below"`: a READOUT row — the same heading and values, flat — in
+   *   room reserved over or under the plot from the first render, so nothing jumps on
+   *   the first tap. It follows hover, a tap and the keyboard's stops; the cursor line
+   *   and the active dot stay on the plot, and no box floats. Idle, it lists the series
+   *   with "—" under the x axis' title. The row is taken out of the chart's `height`
+   *   (the plot gets shorter, the page around it does not move).
+   * - `"auto"`: `"above"` below Tailwind's `sm` (640 px), `"cursor"` from there up.
+   *
+   * Default: the provider's `chartTooltipPlacement`, else `"cursor"`.
+   *
+   * The row is deliberately NOT an `aria-live` region: scrubbing a line announces a
+   * value per pixel of travel. A keyboard reader already hears each stop's name
+   * ("period — series: value") from the stop itself, and the row stays in the
+   * document for a screen reader to read on its way past.
+   */
+  placement?: SeriesChartTooltipPlacement;
   /** Let the tooltip run past the chart's own box on that axis instead of recharts
    *  clamping it inside. Default: `{ x: true }` when `boundary` is set, else neither. */
   allowEscapeViewBox?: { x?: boolean; y?: boolean };
@@ -1173,6 +1220,10 @@ function SeriesPlot({
   // Up here, above the empty state's early return, like every hook.
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
+  // Where the tooltip goes, and — off the plot — the row it is portalled into.
+  const phone = useMediaQuery(TOOLTIP_READOUT_QUERY, false);
+  const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
+  const [readout, setReadout] = useState<HTMLDivElement | null>(null);
 
   // 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
@@ -1495,13 +1546,21 @@ function SeriesPlot({
     animationEasing: "ease-out" as const,
   };
 
-  return (
+  const inRow = placement !== "cursor";
+  const chart = (
     <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}
+      className={cn(
+        "w-full",
+        // With a readout the chart's height is the whole block's, and the plot takes
+        // what the row leaves.
+        inRow ? "min-h-0 flex-1" : heightClass,
+        className,
+        onPointClick && "cursor-pointer",
+      )}
+      style={inRow ? undefined : heightStyle}
     >
       <ComposedChart
         data={plotted as Record<string, unknown>[]}
@@ -1607,23 +1666,45 @@ function SeriesPlot({
             </YAxis>
           );
         })}
-        <ChartTooltip
-          {...(tooltip?.allowEscapeViewBox || tooltip?.boundary
-            ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } }
-            : {})}
-          // The content shifts itself 12 px off the cursor (or flips) against the
-          // boundary; recharts' own offset on top would double it.
-          {...(tooltip?.boundary ? { offset: 0 } : {})}
-          // The keyboard's stop shows its tooltip as the pointer's would.
-          defaultIndex={focusedStop?.index}
-          content={
-            <ChartTooltipContent
-              labelFormatter={(value) => xLabel(Number(value))}
-              valueFormatter={valueFormat ?? number}
-              boundaryRef={tooltip?.boundary}
+        {inRow ? (
+          // Not before the row exists: without its own portal recharts would float this
+          // content over the plot for the first frame.
+          readout && (
+            <ChartTooltip
+              portal={readout}
+              // recharts hides an inactive tooltip; the row shows its idle state instead.
+              wrapperStyle={{ visibility: "visible" }}
+              defaultIndex={focusedStop?.index}
+              content={
+                <ChartTooltipContent
+                  variant="readout"
+                  idleKeys={series.map((entry) => entry.key)}
+                  idleLabel={x.title || undefined}
+                  labelFormatter={(value) => xLabel(Number(value))}
+                  valueFormatter={valueFormat ?? number}
+                />
+              }
             />
-          }
-        />
+          )
+        ) : (
+          <ChartTooltip
+            {...(tooltip?.allowEscapeViewBox || tooltip?.boundary
+              ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } }
+              : {})}
+            // The content shifts itself 12 px off the cursor (or flips) against the
+            // boundary; recharts' own offset on top would double it.
+            {...(tooltip?.boundary ? { offset: 0 } : {})}
+            // The keyboard's stop shows its tooltip as the pointer's would.
+            defaultIndex={focusedStop?.index}
+            content={
+              <ChartTooltipContent
+                labelFormatter={(value) => xLabel(Number(value))}
+                valueFormatter={valueFormat ?? number}
+                boundaryRef={tooltip?.boundary}
+              />
+            }
+          />
+        )}
         {series.map((entry) => {
           const type = entry.type ?? "line";
           const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
@@ -1787,6 +1868,27 @@ function SeriesPlot({
       </ComposedChart>
     </ChartContainer>
   );
+  if (!inRow) return chart;
+  // The row's own box, reserved from the first render: its idle state has the cells the
+  // active one will, so the first tap fills it in rather than pushing the plot down.
+  const row = (
+    <div
+      ref={setReadout}
+      data-tooltip-readout={placement}
+      className={cn(
+        "shrink-0",
+        // Above, the heading line shares the top corner with the zoom's reset button.
+        placement === "above" ? "pb-2 [&_[data-readout-heading]]:pe-32" : "pt-2",
+      )}
+    />
+  );
+  return (
+    <div className={cn("flex w-full flex-col", heightClass)} style={heightStyle}>
+      {placement === "above" && row}
+      {chart}
+      {placement === "below" && row}
+    </div>
+  );
 }
 
 const ZoomablePlot = withChartZoom(SeriesPlot);

package/src/components/ui.tsx

@@ -46,7 +46,7 @@ const buttonVariantClasses: Record<ButtonVariant, string> = {
   ghost:
     "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   danger:
-    "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border)]",
+    "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border-strong)]",
   brand:
     "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]",
   // A text link that is still a `<button>` — keksdose's six hand-rolled
@@ -92,7 +92,7 @@ const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
   muted:
     "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
   danger:
-    "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]",
+    "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)] disabled:hover:text-[var(--text-secondary)]",
 };
 
 /** Only the two transparent variants take every tone; see {@link ButtonTone}. */
@@ -103,9 +103,9 @@ const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
 // the neutral ones survives the merge.
 const BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {
   secondary:
-    "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]",
+    "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]",
   primary:
-    "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]",
+    "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]",
 };
 
 // `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what
@@ -543,8 +543,8 @@ type ColouredTone = "danger" | "warning" | "info" | "success" | "custom";
 const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {
   danger: {
     quiet:
-      "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
-    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]",
+      "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)]",
+    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]",
   },
   warning: {
     quiet:
@@ -1250,7 +1250,7 @@ export const FIELD_FLOATING_PAD = "pt-4 pb-1";
 // stays exactly the size of a valid one and nothing beside it moves when the value
 // arrives.
 export const FIELD_INVALID =
-  "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 
 export const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");