@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/sign-chip.tsx

@@ -3,6 +3,7 @@ import { Chip } from "./chip";
 import { Tooltip } from "./tooltip";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
+import { useLargeText } from "../hooks/use-large-text";
 
 // ── Labels ────────────────────────────────────────────────────────────────────
 
@@ -17,12 +18,17 @@ export interface SignChipLabels {
    *  turns it into — `current` and `next` are the two words above. The other option is
    *  nowhere on screen to be read, so the name has to say both. */
   direction: (current: string, next: string) => string;
+  /** 0.32: what a press does, in words under the chip at Large and Extra large —
+   *  `next` is the other direction's word ("Switch to Inflow"). The tooltip's half of
+   *  `direction`, shown, since a fact may not live only in a tooltip there (§4). */
+  switchTo: (next: string) => string;
 }
 
 export const DEFAULT_SIGN_CHIP_LABELS: SignChipLabels = {
   outflow: "Outflow",
   inflow: "Inflow",
   direction: (current, next) => `Direction: ${current} — switch to ${next}`,
+  switchTo: (next) => `Switch to ${next}`,
 };
 
 export interface SignChipProps {
@@ -79,8 +85,10 @@ export function SignChip({ negative, onNegativeChange, disabled, labels: labelsP
   const current = negative ? labels.outflow : labels.inflow;
   const next = negative ? labels.inflow : labels.outflow;
   const name = labels.direction(current, next);
-  return (
-    <Tooltip label={name} lazy>
+  // §4: at Large the chip's word is joined by what a press does, as a line under it —
+  // and the bubble that said only that goes.
+  const large = useLargeText();
+  const chip = (
       <Chip
         size="lg"
         tone={negative ? "expense" : "income"}
@@ -91,13 +99,29 @@ export function SignChip({ negative, onNegativeChange, disabled, labels: labelsP
         // `gap-1.5 px-3`: the chip's narrower body, because on a 375px screen every
         // pixel of it is taken from the figure beside it (#430). `md:py-2.5` with the
         // hairline border is the 42px a labelled field measures (#431).
-        className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", className)}
+        className={cn("shrink-0 gap-1.5 whitespace-nowrap px-3 font-medium md:min-h-0 md:py-2.5", !large && className)}
       >
         {current}
         {/* The swap arrows after the word, in the label's own row: decoration (the
             name already says what a press does), set a little apart from the word. */}
         <ArrowUpDown className="ms-1.5 inline size-3.5 align-[-0.2em] opacity-60" aria-hidden />
       </Chip>
-    </Tooltip>
+  );
+  if (!large) {
+    return (
+      <Tooltip label={name} lazy>
+        {chip}
+      </Tooltip>
+    );
+  }
+  return (
+    // The caller's placement (`self-end`…) moves to the pair, which is now the row's item.
+    <span data-slot="sign-chip" className={cn("inline-flex shrink-0 flex-col items-start gap-0.5", className)}>
+      {chip}
+      {/* Hidden from the accessibility tree: the chip's name already says it. */}
+      <span aria-hidden className="text-xs text-[var(--text-muted)]">
+        {labels.switchTo(next)}
+      </span>
+    </span>
   );
 }

package/src/components/signature-pad.tsx

@@ -4,6 +4,7 @@ import { Eraser, Keyboard, PenLine, Undo2 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useAnnounce } from "../hooks/use-announce";
 import { useKitLabels } from "../i18n/kit-labels";
+import { useTextSize } from "../theme/text-size";
 import { Button, FIELD_INVALID, Input } from "./ui";
 
 /**
@@ -144,7 +145,9 @@ export interface SignaturePadProps extends Omit<ComponentPropsWithoutRef<"div">,
   exportInk?: string;
   /** Fill behind the exported PNG. Default transparent. */
   exportBackground?: string;
-  /** Base stroke width in CSS pixels. Default 2.5. */
+  /** Base stroke width in CSS pixels at Normal text size. Default 2.5. It grows with the
+   *  text size (× 1.25 / × 1.5, docs/text-size-harmonization.md §10.11), as the pad's
+   *  rem height does, so a signature keeps its weight on a larger pad. */
   lineWidth?: number;
   /** Classes for the canvas — its height, chiefly (default `h-40`). */
   canvasClassName?: string;
@@ -291,10 +294,13 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
 
   // Everything the paint and export paths read that can change between renders, so
   // the observers below subscribe once instead of on every keystroke.
-  const opts = useRef({ lineWidth, exportInk, exportBackground });
+  // The stroke follows the text size like everything in rem around it (§10.11).
+  const { scale: textScale } = useTextSize();
+  const strokeWidth = lineWidth * textScale;
+  const opts = useRef({ lineWidth: strokeWidth, exportInk, exportBackground });
   useEffect(() => {
-    opts.current = { lineWidth, exportInk, exportBackground };
-  }, [lineWidth, exportInk, exportBackground]);
+    opts.current = { lineWidth: strokeWidth, exportInk, exportBackground };
+  }, [strokeWidth, exportInk, exportBackground]);
 
   const sceneEmpty = () => {
     const s = scene.current;
@@ -356,10 +362,10 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
     resize();
   }, [resize]);
 
-  // A changed base width redraws what is already there.
+  // A changed base width — or text size — redraws what is already there.
   useEffect(() => {
     repaint();
-  }, [lineWidth, repaint]);
+  }, [strokeWidth, repaint]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -627,7 +633,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(fu
       </div>
 
       {hasError && (
-        <p id={errorId} className="mt-1 text-[11px] leading-tight text-[var(--danger)]">
+        <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
           {error}
         </p>
       )}

package/src/components/slider.tsx

@@ -70,32 +70,45 @@ export function fromLogPosition(position: number, min: number, max: number, zero
 // runs the other way too. Firefox draws the fill itself with `::-moz-range-progress`,
 // which follows the direction on its own.
 //
-// The thumb's `-mt-[5px]` centres a 16px thumb on a 6px track: WebKit lays the thumb
-// out from the track's top edge, Firefox centres it, so only one carries the offset.
+// The thumb's `-mt-[0.3125rem]` centres a 1rem thumb on a 0.375rem track — half the
+// difference — in rem since 0.32 (§3.2): the thumb and track grow with the text, and the
+// 5px it was left the thumb low of the track at 125 % and further at 150 %. WebKit lays
+// the thumb out from the track's top edge, Firefox centres it, so only one carries the
+// offset.
 //
 // The focus ring goes on the THUMB, not the box: the box is the full width of the
 // row, and a ring round all of it says "this row is focused" rather than "the handle
 // you are about to move is". Offset in the surface colour, because the thumb is
-// --brand and a --brand ring touching it would be invisible.
+// --brand and a --brand ring touching it would be invisible. Its width is the kit's
+// focus frame (`--focus-ring-width`, §5) — spelt out per engine, since `FOCUS_RING`'s
+// classes cannot carry the pseudo-element.
+//
+// At Large the box is the 48 px touch target (§4) — the track stays centred in it, and
+// the marks row below is pulled up by as much (see `MARKS_LARGE`).
 const TRACK = [
-  "block h-6 w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed",
+  "block h-6 large:h-[48px] w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed",
   // WebKit / Blink
   "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
   "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
   "rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
-  "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
+  "[&::-webkit-slider-thumb]:-mt-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
   "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--brand)] [&::-webkit-slider-thumb]:shadow",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
   "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-[var(--bg-surface)]",
   // Firefox
   "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]",
   "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-[var(--brand)]",
   "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
   "[&::-moz-range-thumb]:bg-[var(--brand)] [&::-moz-range-thumb]:shadow",
-  "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-moz-range-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
   "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-[var(--bg-surface)]",
 ].join(" ");
 
+// The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px
+// box at Large the track's lower edge is `(48px + 0.375rem) / 2` down, so the row comes
+// up by `(48px − 0.375rem) / 2` less the same 0.1875rem gap: `24px − 0.375rem`.
+const MARKS_LARGE = "large:-mt-[calc(24px-0.375rem)]";
+
 /** A tick under the track. A bare number is a tick with no words. */
 export interface SliderMark {
   value: number;
@@ -293,7 +306,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         // without a `translate` that would need flipping for right-to-left.
         <div
           aria-hidden
-          className={cn("relative mx-2 -mt-1.5", hasMarkLabels ? "h-5" : "h-1.5")}
+          className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}
         >
           {normalizedMarks.map((m) => (
             <span
@@ -303,7 +316,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
             >
               <span className="h-1.5 w-px shrink-0 bg-[var(--border-strong)]" />
               {m.label !== undefined && (
-                <span className="mt-0.5 select-none whitespace-nowrap text-[11px] leading-tight text-[var(--text-muted)]">
+                <span className="mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-[var(--text-muted)]">
                   {m.label}
                 </span>
               )}

package/src/components/sparkline.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from "react";
 import { cn } from "../lib/cn";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useTextSize } from "../theme/text-size";
 
 /**
  * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
@@ -78,8 +79,12 @@ export interface SparklineProps
   /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
    *  there rather than drawing a zero or bridging across the missing point. */
   data: ReadonlyArray<number | null | undefined>;
-  /** Width in px. Ignored under `fluid`. */
+  /** Width in px at Normal. Ignored under `fluid`. The drawn box is this × the text
+   *  size's scale (0.32, docs/text-size-harmonization.md §3.2): a sparkline stands beside
+   *  a figure, and a 72 × 24 trend under a 150 % number reads as a speck. The strokes
+   *  stay px (`non-scaling-stroke`), as every chart's do. */
   width?: number;
+  /** Height in px at Normal, × the scale likewise. */
   height?: number;
   /** Fill the container's width instead of a fixed one (the height stays fixed). */
   fluid?: boolean;
@@ -182,6 +187,7 @@ export function Sparkline({
   ...rest
 }: SparklineProps) {
   const text = useKitLabels("sparkline", DEFAULT_SPARKLINE_LABELS, labels);
+  const { scale } = useTextSize();
   const kitLocale = useKitLocale(locale);
   const format = formatValue ?? defaultFormat(kitLocale);
 
@@ -252,8 +258,10 @@ export function Sparkline({
       role="img"
       aria-label={name}
       {...rest}
-      width={fluid ? "100%" : W}
-      height={H}
+      // The drawing stays in its own units (the viewBox); only the box it is shown in
+      // grows, uniformly, so nothing is distorted and the strokes keep their px width.
+      width={fluid ? "100%" : W * scale}
+      height={H * scale}
       viewBox={`0 0 ${W} ${H}`}
       preserveAspectRatio="none"
       className={cn(fluid ? "block w-full" : "inline-block shrink-0 align-middle", "overflow-visible", className)}

package/src/components/stat-tile.tsx

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 import { Card, FieldHint } from "./ui";
+import { useInlineFacts, useLargeText } from "../hooks/use-large-text";
 import { Sparkline } from "./sparkline";
 import { Tooltip } from "./tooltip";
 // The kit's one placeholder look, so a loading tile and the Skeleton list beside it
@@ -151,7 +152,11 @@ export interface StatTileProps
   /** The explanation behind a "?" beside the label (a {@link FieldHint}) — hidden
    *  until asked for, so it is for what a reader MIGHT want to know ("excludes
    *  transfers between your own accounts"). For a line everyone should read, use
-   *  {@link StatTileProps.description} instead. */
+   *  {@link StatTileProps.description} instead.
+   *
+   *  0.32 (docs/text-size-harmonization.md §4 "No fact only in a tooltip"): at Large
+   *  and Extra large, and on a touch screen, the words are shown under the label
+   *  instead of behind the "?". */
   hint?: string;
   /**
    * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a
@@ -169,6 +174,9 @@ export interface StatTileProps
    * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134
    * does, from before this prop). A wrapped label shows a bubble even when nothing is
    * cut, and nests its trigger inside this one's.
+   *
+   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full
+   * label would otherwise be a fact only in a tooltip.
    */
   truncateLabel?: boolean;
   /**
@@ -199,6 +207,15 @@ export interface StatTileProps
    * Withheld while `loading`, like the sub-values.
    */
   projection?: StatTileSubValue;
+  /**
+   * Smaller figures under the headline, label left and figure right.
+   *
+   * At Large and Extra large (0.32, §4 "StatTile shows its one big number; the sparkline
+   * and sub-values move below"): the tile leads with the headline and its delta, and the
+   * projection, these rows and the sparkline follow beneath the description, each row's
+   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label
+   * beside a figure there squeezed both.
+   */
   subValues?: StatTileSubValue[];
   /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in
    *  the tile's number format. The name is the label's text; see
@@ -310,6 +327,11 @@ export function StatTile({
   ...rest
 }: StatTileProps) {
   const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  // §4: at Large the one big number leads and the rest follows below it; the label
+  // never truncates; on touch or at Large the hint is words, not a "?".
+  const large = useLargeText();
+  const inlineHint = useInlineFacts() && !!hint;
+  if (large) truncateLabel = false;
   // A loading StatTileGrid puts every tile in it into the loading state and says
   // "Loading…" ONCE for all of them; the tile then keeps its own sentence to itself
   // (see StatTileGrid's `loading`).
@@ -342,7 +364,9 @@ export function StatTile({
   const stretched = cn(
     "text-start uppercase tracking-wide",
     "after:absolute after:inset-0 after:rounded-lg after:content-['']",
-    "focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
+    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot
+    // carry the `after:`, so its width is spelt out.
+    "focus-visible:outline-none focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
   );
   const describedBy = d ? `${valueId} ${deltaId}` : valueId;
   let labelNode: ReactNode = label;
@@ -417,7 +441,7 @@ export function StatTile({
       {!gridLoading && <span className="sr-only">{text.loading}</span>}
     </span>
   ) : hasValue ? (
-    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && "ms-auto")}>
+    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && "ms-auto")}>
       {show(value)}
       {unit != null && (
         <span className="ms-1 text-[0.7em] font-medium text-[var(--text-muted)]">{unit}</span>
@@ -480,7 +504,7 @@ export function StatTile({
             </span>
           )}
           {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}
-          {hint && <FieldHint label={hint} side="top" className="relative z-10 shrink-0" />}
+          {hint && !inlineHint && <FieldHint label={hint} side="top" className="relative z-10 shrink-0" />}
         </div>
         {icon != null && (
           <span aria-hidden className="shrink-0 text-[var(--text-muted)] [&_svg]:size-4">
@@ -489,10 +513,19 @@ export function StatTile({
         )}
       </div>
 
+      {inlineHint && (
+        // §4: the hint as words under the label — the same muted type as `description`,
+        // in the reading case of a sentence rather than the label's capitals.
+        <p data-slot="stat-tile-hint" className="mt-0.5 text-xs text-[var(--text-muted)]">
+          {hint}
+        </p>
+      )}
+
       {valueLabel != null ? (
         // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a
-        // too-long amount drop to its own end-aligned line instead of overflowing.
-        <div className="mt-1 flex flex-wrap items-baseline gap-x-1.5">
+        // too-long amount drop to its own end-aligned line instead of overflowing. At
+        // Large the period goes over the figure, which then has the tile's width.
+        <div className={cn("mt-1 flex items-baseline gap-x-1.5", large ? "flex-col items-start" : "flex-wrap")}>
           <span className="shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]">{valueLabel}</span>
           {headline}
         </div>
@@ -500,7 +533,9 @@ export function StatTile({
         <div className="mt-1">{headline}</div>
       )}
 
-      {!loading && projection && (
+      {/* At Large the delta and description follow the figure at once, and the
+          projection moves down with the other figures (see `subValues`). */}
+      {!large && !loading && projection && (
         <dl className="mt-0.5">
           <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />
         </dl>
@@ -508,16 +543,25 @@ export function StatTile({
 
       {deltaNode}
       {description != null && <div className="mt-1 text-xs text-[var(--text-muted)]">{description}</div>}
-      {graphic && <div className="mt-2">{graphic}</div>}
+      {!large && graphic && <div className="mt-2">{graphic}</div>}
 
-      {!loading && subValues && subValues.length > 0 && (
-        <dl className="mt-1.5 space-y-0.5">
-          {subValues.map((sv, i) => (
-            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} />
+      {!loading && ((large && projection) || (subValues && subValues.length > 0)) && (
+        <dl data-slot="stat-tile-figures" className={cn("mt-1.5", large ? "space-y-1.5" : "space-y-0.5")}>
+          {large && projection && (
+            <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} stacked />
+          )}
+          {subValues?.map((sv, i) => (
+            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />
           ))}
         </dl>
       )}
 
+      {large && graphic && (
+        <div data-slot="stat-tile-graphic" className="mt-2">
+          {graphic}
+        </div>
+      )}
+
       {footer != null && <div className="mt-2">{footer}</div>}
     </Card>
   );
@@ -529,11 +573,14 @@ function FigureRow({
   tileTone,
   show,
   priv,
+  stacked = false,
 }: {
   figure: StatTileSubValue;
   tileTone: StatTileTone;
   show: (v: ReactNode) => ReactNode;
   priv: "" | undefined;
+  /** The label over the figure (Large, §4) instead of beside it. */
+  stacked?: boolean;
 }) {
   const own = figure.tone ?? (tileTone === "neutral" ? undefined : tileTone);
   const svTone = own === "none" ? undefined : own;
@@ -543,11 +590,20 @@ function FigureRow({
   // 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 items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
+    <div
+      className={cn(
+        "flex text-xs tabular-nums text-[var(--text-muted)]",
+        stacked ? "flex-col items-start" : "items-baseline gap-x-2",
+      )}
+    >
       <dt className="min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]">{figure.label}</dt>
       <dd
         data-private={priv}
-        className={cn("ms-auto shrink-0 whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
+        className={cn(
+          "shrink-0 whitespace-nowrap",
+          !stacked && "ms-auto",
+          svTone && [toneClass(svTone, figure.value), "opacity-75"],
+        )}
       >
         {show(figure.value)}
       </dd>

package/src/components/status-dot.tsx

@@ -66,6 +66,28 @@ export function statusDotColor(tone: StatusDotTone): string {
 
 const SIZE: Record<StatusDotSize, string> = { sm: "size-2", md: "size-2.5", lg: "size-3" };
 
+/**
+ * A labelled dot at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): the label wraps instead of
+ * ending in "…", so a legend entry or a status keeps its last word, the one that tells
+ * two states apart. The dot then sits on the label's FIRST line rather than halfway down
+ * the block: the row aligns to the top and the dot moves down by half of what one line
+ * (`1lh`, the label's own line height, which the dot inherits) leaves around it.
+ * `large:` classes, so Normal keeps its one centred line.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: a legend often sits in a table, and
+ * `anywhere` lowers the label's min-content width to one letter, so an auto-sized column
+ * squeezed it to a letter per line (the showcase's tone table at 360 px, Extra large).
+ * `break-word` keeps each word whole wherever the width is the content's to choose, and
+ * still breaks one that cannot fit its line at all.
+ */
+const LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const DOT_ON_FIRST_LINE: Record<StatusDotSize, string> = {
+  sm: "large:mt-[calc((1lh_-_0.5rem)/2)]",
+  md: "large:mt-[calc((1lh_-_0.625rem)/2)]",
+  lg: "large:mt-[calc((1lh_-_0.75rem)/2)]",
+};
+
 export interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
   tone?: StatusDotTone;
   size?: StatusDotSize;
@@ -116,6 +138,7 @@ export function StatusDot({
         SIZE[size],
         FILL[tone],
         ring && "ring-2 ring-[var(--bg-surface)]",
+        label != null && DOT_ON_FIRST_LINE[size],
         label == null && className,
         dotClassName,
       )}
@@ -130,9 +153,9 @@ export function StatusDot({
   return (
     // No `aria-label` here: the visible label is the text, and a name on a role-less
     // span is one ARIA forbids and screen readers ignore.
-    <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm", className)}>
+    <span {...rest} className={cn("inline-flex min-w-0 items-center gap-1.5 text-sm large:items-start", className)}>
       {dot}
-      <span className="min-w-0 truncate">{label}</span>
+      <span className={cn("min-w-0 truncate", LABEL_WRAP_AT_LARGE)}>{label}</span>
     </span>
   );
 }

package/src/components/swipeable-row.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useRowSwipe, type SwipeStage } from "../hooks/use-row-swipe";
 import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels";
 
@@ -268,9 +269,16 @@ export function SwipeableRow({
               type="button"
               onClick={action.onCommit}
               className={cn(
-                "sr-only whitespace-nowrap rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm",
+                "sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm",
                 "focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5",
-                "focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+                // The box's padding and border only once it shows (0.32.1, keksdose's
+                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s
+                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px
+                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running
+                // past the row's end from the strip's start — invisible under its clip,
+                // but counted in the page's scroll width (§4: nothing overflows).
+                "focus:border focus:px-2 focus:py-1",
+                FOCUS_RING,
               )}
             >
               {/* The label is the button's accessible name, so the caller's icon is