@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/month-picker.tsx

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn";
 import { dirOf, horizontalStep, type Direction } from "../lib/direction";
 import { monthKey, pad } from "../lib/dates";
 import { Button, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from "./ui";
+import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { Popover } from "./popover";
 import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
@@ -283,7 +284,8 @@ function MonthHeadingTrigger({
       aria-describedby={aria["aria-describedby"]}
       className={cn(
         "-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-[var(--text-primary)] transition-colors",
-        "hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        "hover:bg-[var(--bg-hover)]",
+        FOCUS_RING,
         disabled && "cursor-not-allowed opacity-50",
       )}
     >
@@ -570,7 +572,8 @@ function MonthGrid({
                   onKeyDown={onCellKeyDown}
                   className={cn(
                     "rounded px-2 py-1.5 text-sm capitalize transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                    FOCUS_RING_WIDTH,
+                    "focus-visible:outline-none focus-visible:ring-inset",
                     // A --brand ring on a --brand fill exists only in the DOM.
                     selected && !disabled
                       ? "focus-visible:ring-[var(--brand-contrast)]"
@@ -761,7 +764,8 @@ function YearGrid({
                   onKeyDown={onCellKeyDown}
                   className={cn(
                     "rounded px-2 py-1.5 text-sm tabular-nums transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                    FOCUS_RING_WIDTH,
+                    "focus-visible:outline-none focus-visible:ring-inset",
                     selected && !disabled
                       ? "focus-visible:ring-[var(--brand-contrast)]"
                       : "focus-visible:ring-[var(--brand)]",
@@ -935,7 +939,7 @@ export function MonthPicker(props: MonthPickerProps) {
     const Heading = headingLevel ? (`h${headingLevel}` as const) : null;
     const trigger = (
       <Popover
-        width={256}
+        width="16rem"
         panelId={panelId}
         labels={{ panel: panelLabel }}
         dir={dir}
@@ -958,7 +962,12 @@ export function MonthPicker(props: MonthPickerProps) {
       </Popover>
     );
     return (
-      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 items-center gap-2", className)}>
+      // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons
+      // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;
+      // docs/text-size-harmonization.md §4). In one row at 150 % "Today ‹ ›" left the
+      // heading 30 px on a 360 px phone, and "October 2026" was drawn under "Today".
+      // Where they fit, nothing changes.
+      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 flex-wrap items-center gap-2", className)}>
         {Heading ? <Heading className="m-0 min-w-0 text-lg font-semibold">{trigger}</Heading> : trigger}
         <div className="ms-auto flex shrink-0 items-center gap-1">
           {showToday && (
@@ -1006,7 +1015,7 @@ export function MonthPicker(props: MonthPickerProps) {
         </span>
       )}
       <Popover
-        width={256}
+        width="16rem"
         panelId={panelId}
         labels={{ panel: panelLabel }}
         dir={dir}

package/src/components/nav-pills.tsx

@@ -55,7 +55,7 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
 // the current one), so a strip of these beside a segmented control reads as the same
 // family. Unlike the segments, a pill never truncates: the strip WRAPS instead.
 const PILL =
-  "inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-strong)] [&_svg]:size-4 [&_svg]:shrink-0";
+  "inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-[var(--border-strong)] [&_svg]:size-4 [&_svg]:shrink-0";
 const PILL_SM = "gap-1 px-2 py-1 text-xs [&_svg]:size-3.5";
 const PILL_CURRENT = "bg-[var(--bg-inverse)] text-[var(--text-inverse)]";
 const PILL_IDLE = "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";

package/src/components/number-input.tsx

@@ -2,13 +2,14 @@ import { useEffect, 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";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from "./ui";
+import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./ui";
 import { CURRENCIES } from "./currency-select";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
+import { useInlineHint } from "./field-parts";
 import { cn } from "../lib/cn";
 import { commitExpression, formatResult } from "../lib/calc";
 import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useKitLocale } from "../i18n/kit-labels";
 
 interface NumberInputProps {
@@ -65,7 +66,9 @@ interface NumberInputProps {
    *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER
    *  the field and attached through `aria-describedby` after the caller's own —
    *  the same rule as {@link Select}'s `hint`: the label line has no room for a
-   *  sentence, and one placed there ran over the label and into the value. */
+   *  sentence, and one placed there ran over the label and into the value.
+   *  Since 0.32 a FieldHint is that caption too at Large and on a touch screen,
+   *  where a "?" cannot be hovered open (`useInlineHint`). */
   hint?: ReactNode;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
@@ -179,7 +182,7 @@ export function stepNumber(
 
 // The error line under a field — the type of `ui.tsx`'s (module-private) one, so a
 // NumberInput's message is indistinguishable from an Input's.
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 // ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────
 
@@ -275,7 +278,7 @@ export function NumberInput(props: NumberInputProps) {
     id,
     calculator = true,
     variant = "field",
-    hint,
+    hint: hintProp,
     invalid: invalidProp,
     error,
     locale: localeProp,
@@ -291,6 +294,10 @@ export function NumberInput(props: NumberInputProps) {
   const fieldId = id ?? generatedId;
   const hintId = useId();
   const errorId = useId();
+  // §4 "No fact only in a tooltip" (docs/text-size-harmonization.md): at Large and on a
+  // touch screen a FieldHint is its words, so it takes the caption's path below — the
+  // other kit fields do the same through `useFieldHint`.
+  const hint = useInlineHint(hintProp);
   // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
   const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
   const hasError = hasMessage(error);
@@ -302,7 +309,7 @@ export function NumberInput(props: NumberInputProps) {
   const labelled = label !== undefined;
   // On phones we suppress the OS keyboard (inputMode="none" below) for our own
   // calculator numpad, so the desktop popover trigger is hidden (feedback #334).
-  const isMobile = useMediaQuery(PHONE_QUERY, false);
+  const isMobile = usePhoneLayout();
   const asDisplay = isMobile && variant === "display";
   const showCalc = calculator && !disabled && !isMobile;
   const [focused, setFocused] = useState(false);
@@ -512,7 +519,7 @@ export function NumberInput(props: NumberInputProps) {
     <div>
       {field}
       {textHint && (
-        <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+        <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
           {hint}
         </p>
       )}

package/src/components/numpad-sheet.tsx

@@ -3,6 +3,7 @@ import { Delete } from "lucide-react";
 import { useMemo } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useEscapeKey } from "../hooks/use-dismiss";
 import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc";
 import {
@@ -88,8 +89,7 @@ const PAD_KEYS: PadKey[] = [
  *
  *  --brand rather than --border-strong: the operator keys are filled with --border, and
  *  a ring in the colour of the thing it surrounds is not an indicator. */
-const PAD_BTN =
-  "flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] active:scale-[0.97]";
+const PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;
 const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
 const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
 

package/src/components/one-time-code-input.tsx

@@ -105,8 +105,8 @@ export interface OneTimeCodeInputProps
 
 // The error line under a field — the type of `ui.tsx`'s (module-private) one, so this
 // field's message is indistinguishable from an Input's.
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
-const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
+const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
 
 // Equal-width digits, spaced a little apart, so a code reads — and compares against the
 // authenticator's screen — digit by digit.

package/src/components/page-contents.tsx

@@ -182,7 +182,7 @@ export function PageContents({
               aria-current={current ? "location" : undefined}
               onClick={() => setClicked(item.id)}
               className={cn(
-                "-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150",
+                "-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150",
                 variant === "rail" && "[overflow-wrap:anywhere]",
                 item.level === 2 ? "ps-6" : "ps-3",
                 current
@@ -222,7 +222,7 @@ export function PageContents({
 
   return (
     <nav {...rest} aria-label={l.title} className={className}>
-      <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+      <p className="mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]">
         {l.title}
       </p>
       {list}

package/src/components/phone-input.tsx

@@ -42,8 +42,8 @@ function usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): Phone
 
 /** The caption and the error under the row — the type every kit field uses for them
  *  (Select's caption, Input's `error`). */
-const CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
-const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
+const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 const isTextHint = (hint: unknown): hint is string | number =>
   (typeof hint === "string" && hint !== "") || typeof hint === "number";
@@ -242,7 +242,12 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function
       role={named ? "group" : undefined}
       aria-label={named ? label : undefined}
     >
-      <div className="flex items-stretch gap-2">
+      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,
+          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing
+          truncates"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left
+          the number 82 px — "Ph…" over "021 (". `large:max-sm:`, the scaled phone width,
+          so a wider screen at Large and Normal keep the one row. */}
+      <div className="flex items-stretch gap-2 large:max-sm:flex-wrap">
         <Select
           aria-label={text.countryCode}
           value={country}
@@ -261,7 +266,7 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function
           <option value="other">{text.other}</option>
         </Select>
         {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1 large:max-sm:basis-full">
           <Input
             ref={ref}
             {...rest}

package/src/components/pie-chart.tsx

@@ -18,6 +18,8 @@ import { paletteFor } from "../theme/chart-palette";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
 import { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from "./pie-chart-labels";
 import { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from "./toggle-legend";
+import { useTextSize } from "../theme/text-size";
+import { chartHeightProps, type ChartHeight } from "./chart-height";
 
 /** One slice. */
 export interface PieChartSlice {
@@ -46,8 +48,13 @@ export interface PieChartProps extends Omit<ComponentPropsWithoutRef<"div">, "ch
   data: readonly PieChartSlice[];
   /** `"donut"` (default) leaves a hole with the total in it; `"pie"` is the full disc. */
   variant?: "donut" | "pie";
-  /** Height of the plot in px (the legend is under it). Default 300. */
-  height?: number;
+  /**
+   * Height of the plot (the legend is under it): a CSS length (`"20rem"`,
+   * `"min(20rem, 50dvh)"`), a Tailwind class, or px. Default `"18.75rem"` — 300 px at
+   * Normal, growing with the text size so the slice labels keep their room (0.32,
+   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.
+   */
+  height?: ChartHeight;
   /** How a value is written in the tooltip, the slice's name, a `"value"` slice label
    *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */
   formatValue?: (value: number) => string;
@@ -144,7 +151,7 @@ function RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent
 export function PieChart({
   data,
   variant = "donut",
-  height = 300,
+  height = "18.75rem",
   formatValue: formatValueProp,
   sliceLabels = "percent",
   minLabelShare = 0.04,
@@ -165,6 +172,9 @@ export function PieChart({
 }: PieChartProps) {
   const labels = useKitLabels("pieChart", DEFAULT_PIE_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
+  // The slice labels are SVG text in px: they follow the text size by this (§10.10).
+  const { scale } = useTextSize();
+  const box = chartHeightProps(height);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
   const percentFormats = useMemo(
     () => ({
@@ -312,7 +322,7 @@ export function PieChart({
       const radius = Number(props.outerRadius);
       const mid = Number(props.midAngle);
       if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;
-      const r = radius + 10;
+      const r = radius + 10 * scale;
       const x = cx + r * Math.cos(-mid * RADIAN);
       const y = cy + r * Math.sin(-mid * RADIAN);
       const isValue = sliceLabels === "value";
@@ -322,7 +332,7 @@ export function PieChart({
           y={y}
           textAnchor={x >= cx ? "start" : "end"}
           dominantBaseline="central"
-          fontSize={11}
+          fontSize={11 * scale}
           fill="var(--text-secondary)"
           data-private={redact && isValue ? "" : undefined}
           style={{ pointerEvents: "none" }}
@@ -331,7 +341,7 @@ export function PieChart({
         </text>
       );
     },
-    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare],
+    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],
   );
 
   const withLabels = sliceLabels !== "none";
@@ -394,8 +404,8 @@ export function PieChart({
 
   const emptyBox = (
     <div
-      className="flex items-center justify-center text-sm text-[var(--text-muted)]"
-      style={{ height }}
+      className={cn("flex items-center justify-center text-sm text-[var(--text-muted)]", box.className)}
+      style={box.style}
     >
       {empty ?? labels.empty}
     </div>
@@ -418,7 +428,7 @@ export function PieChart({
         // Every slice switched off: the legend below is how they come back.
         emptyBox
       ) : (
-        <div role="group" aria-label={labels.slices} className="relative" style={{ height }}>
+        <div role="group" aria-label={labels.slices} className={cn("relative", box.className)} style={box.style}>
           <ChartContainer
             config={PIE_CONFIG}
             className={cn("h-full", clickable && "[&_.recharts-pie-sector]:cursor-pointer")}

package/src/components/popover.tsx

@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss";
 import { useFocusTrap } from "../hooks/use-focus-trap";
+import { lengthPx, useRemPx, type RemLength } from "../hooks/use-breakpoint";
 import { cn } from "../lib/cn";
 import { dirOf } from "../lib/direction";
 import type { Direction } from "../lib/direction";
@@ -39,7 +40,14 @@ export const DEFAULT_POPOVER_LABELS: PopoverLabels = {
 export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;
   children: (close: () => void) => ReactNode;
-  width?: number;
+  /**
+   * The panel's width: `"18rem"` (the default) grows with the text size — the panel
+   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,
+   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.
+   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is
+   * 432 px at Extra large, more than a 360 px phone has.
+   */
+  width?: number | RemLength;
   labels?: Partial<PopoverLabels>;
   /** Id for the panel, so a trigger wearing `role="combobox"` can `aria-controls` it.
    *  Required by ARIA on that role, and the panel is rendered here rather than by the
@@ -49,7 +57,11 @@ export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
   className?: string;
 }
 
-const POPOVER_WIDTH = 288;
+/** 288 px at Normal, in rem so it follows the text size (§3.2). */
+const POPOVER_WIDTH: RemLength = "18rem";
+
+/** The gap the panel keeps from either edge of the viewport, in px. */
+const EDGE = 8;
 
 /**
  * Portal-rendered popover anchored under its trigger button. The panel is fixed
@@ -124,12 +136,17 @@ export function Popover({
   // of the screen (feedback #135). It re-measures on scroll/resize.
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
+  // In px for the arithmetic below, at the text size in force; capped at the viewport.
+  const remPx = useRemPx();
+  const panelWidth = rect
+    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))
+    : 0;
   const pos = rect
     ? {
         top: placement.top,
         left: Math.min(
-          Math.max(8, dir === "rtl" ? rect.left : rect.right - width),
-          window.innerWidth - width - 8,
+          Math.max(EDGE, dir === "rtl" ? rect.left : rect.right - panelWidth),
+          window.innerWidth - panelWidth - EDGE,
         ),
       }
     : null;
@@ -199,7 +216,7 @@ export function Popover({
               position: "fixed",
               top: pos.top,
               left: pos.left,
-              width,
+              width: panelWidth,
               maxHeight: placement.maxHeight,
             }}
             className={cn(