@eifi1/ui-kit 0.32.0 → 0.32.1

package/src/components/toggle-group.tsx

@@ -9,6 +9,7 @@ import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
   hasContent,
+  isTextHint,
   LabelStrip,
   useDisabledReasonLine,
   useInlineHint,
@@ -130,8 +131,15 @@ export interface ToggleGroupBaseProps<T extends string>
    * two stack and both keep their corners.
    */
   chromeClassName?: string;
-  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with
-   *  `label`. */
+  /**
+   * As on a labelled {@link Select}: a {@link FieldHint} "?" on the label line, and plain
+   * text (a string) as a caption under the group. Only with `label`.
+   *
+   * 0.32.1 (keksdose's 0.32 report): text went on the label line in every placement, so
+   * `TextSizeSetting`'s hint with `labelPlacement="above"` sat beside the label in body
+   * type, and at Extra large became a column one word wide — on the setting a reader who
+   * needs large text opens first. The label line holds the "?" only (`isTextHint`).
+   */
   hint?: ReactNode;
   /** The message under the field when it is wrong: paints the field's border with
    *  `--danger`, marks the group `aria-invalid` and describes it with the message, as
@@ -196,9 +204,9 @@ const CHROME_PAD: Record<"sm" | "md", string> = { md: "pt-5 pb-0.5", sm: "pt-5 p
 const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
 
 /**
- * A field of four or more options at Large and Extra large (0.32,
+ * A group at Large and Extra large (0.32,
  * docs/text-size-harmonization.md §4 "nothing truncates", §3.3): the segments flow onto a
- * second row inside the field's frame instead of overflowing it. At 125 % a 390 px phone
+ * second row inside the group's frame instead of overflowing it. At 125 % a 390 px phone
  * is 312 px of Normal type, and "Month / Quarter / Half-year / Year" in one row of the
  * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end
  * when a grid or a stretched column asks how small it can get, however its segments
@@ -212,12 +220,16 @@ const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125re
  * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so
  * a wide field at Large stays one row, and a segment shares out what its row leaves
  * (`flex-1`); a label wider than the whole row still truncates as the last resort.
- * Three or fewer options keep one row: each holds a third of the field. A `large:`
- * class, so it costs no render and is right on the first paint. `overflow="wrap"` wraps
- * at every size already; outside the field the group keeps its `overflow`.
+ * A `large:` class, so it costs no render and is right on the first paint.
+ * `overflow="wrap"` wraps at every size already.
+ *
+ * 0.32.1 (Kurvenschmiede's 0.32 report): every count and every placement but the
+ * strip, not only a field of four or more. Since a row breaks only where its labels do
+ * not fit, a wrap only ever replaces a truncation — and three options in a card at
+ * Extra large on a 360 px phone read "Syst… Li… D…". The strip keeps one row: its
+ * 26 px group is what lines it up with the 42 px fields beside it (`STRIP_SEGMENT`).
  */
 const WRAP_AT_LARGE = "large:flex-wrap";
-const WRAP_AT_LARGE_FROM = 4;
 
 /**
  * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px
@@ -335,9 +347,10 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   const locked = hasContent(disabledReason);
   // §4: at Large and on touch the reason is a line under the group, not a bubble.
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
-  // §4: likewise a FieldHint "?" on the label line becomes a caption under the group.
+  // §4: likewise a FieldHint "?" on the label line becomes a caption under the group at
+  // Large and on touch; text is a caption at every size, as Select's (see `hint`).
   const inlineHint = useInlineHint(hint);
-  const hintAsCaption = inlineHint !== hint ? inlineHint : undefined;
+  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;
   const labelHint = hintAsCaption === undefined ? hint : undefined;
   // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —
   // but stays focusable; `disabled` alone also takes the segments out of the tab order.
@@ -346,10 +359,11 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   // `field` is the chrome; a label placed above or in a strip keeps the bare group's
   // own box.
   const field = labelled && labelPlacement === "field";
-  // At Large and Extra large a FIELD of four or more options wraps (see WRAP_AT_LARGE).
-  const wrapAtLarge = field && overflow === "truncate" && options.length >= WRAP_AT_LARGE_FROM;
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
+  // At Large and Extra large a truncating group wraps instead, the strip excepted (see
+  // WRAP_AT_LARGE).
+  const wrapAtLarge = overflow === "truncate" && !strip;
   const hasError = labelled && hasContent(error);
   // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is
   // what lets the `onChange` below be called with `null` only in the mode that allows it.

package/src/components/translation-review-editor.tsx

@@ -150,7 +150,7 @@ export function TranslationReviewEditor({
     <div className={cn("min-w-0 space-y-3 text-sm", className)}>
       <code className="block break-all text-xs text-[var(--text-muted)]">{row.key}</code>
 
-      <div className="grid gap-3 md:grid-cols-2">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
         <div className="min-w-0">
           <SectionLabel as="span" size="xs">
             {referenceLabel}

package/src/components/translation-review.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
-import { useBreakpoint } from "../hooks/use-breakpoint";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
@@ -458,9 +458,10 @@ export function TranslationReviewPanel({
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
   const lock = useWriteLock();
-  // The wide screen's breakpoint — the one DataTable switches its layout on, so "a phone"
-  // means the same here as in the table, at every text size.
-  const phone = !useBreakpoint("md", true);
+  // The phone layout DataTable switches its layout on, so "a phone" means the same here
+  // as in the table, at every text size: `usePhoneLayout()` itself (§10.4; 0.32.1,
+  // keksdose's 0.32 report — `!useBreakpoint("md")` could disagree with it at 767.5 px).
+  const phone = usePhoneLayout();
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;

package/src/components/ui.tsx

@@ -3218,8 +3218,14 @@ export interface CardHeaderProps extends ComponentPropsWithoutRef<"div"> {
    * description instead of beside them. For an action that is wider than an icon —
    * a "Set up two-factor" button, a checkbox and a filter — which, kept in the
    * top-end column on a 390px phone, squeezed the title into a ribbon two words wide
-   * (keksdose's settings cards). Off by default: an icon action (the wizard summary's
-   * pencil) is narrow enough to stay beside the title at every width.
+   * (keksdose's settings cards). Off by default at Normal: an icon action (the wizard
+   * summary's pencil) is narrow enough to stay beside the title at every width.
+   *
+   * Unset, it stacks at Large and Extra large only (0.32.1, the 360 px Extra-large
+   * sweep; docs/text-size-harmonization.md §4): there an IconButton shows its label as
+   * text, so the "icon" action is a word-wide pill, and "Refresh sessions" beside
+   * "Sessions" ran 47 px past a 360 px phone. `false` keeps the action beside the title
+   * at every size, for an action the caller knows stays narrow (`labelVisible={false}`).
    */
   stackAction?: boolean;
 }
@@ -3239,7 +3245,18 @@ export type CardActionProps = ComponentPropsWithoutRef<"div">;
 export type CardContentProps = ComponentPropsWithoutRef<"div">;
 export type CardFooterProps = ComponentPropsWithoutRef<"div">;
 
-export function CardHeader({ className, stackAction = false, ...props }: CardHeaderProps) {
+/** {@link CardHeaderProps.stackAction}: one column under `sm`, and the action back into
+ *  the flow (DOM order, so after the description when it is written after it), at the
+ *  start edge. The descendant selector outranks CardAction's own placement classes. */
+const CARD_STACK_ACTION =
+  "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start";
+/** The same at Large and Extra large only — `stackAction` unset (see its note). A
+ *  `large:` class over the scaled `max-sm`, so it costs no render and is right on the
+ *  first paint. */
+const CARD_STACK_ACTION_AT_LARGE =
+  "large:max-sm:grid-cols-1 large:max-sm:[&>[data-slot=card-action]]:col-start-1 large:max-sm:[&>[data-slot=card-action]]:row-span-1 large:max-sm:[&>[data-slot=card-action]]:row-start-auto large:max-sm:[&>[data-slot=card-action]]:justify-self-start";
+
+export function CardHeader({ className, stackAction, ...props }: CardHeaderProps) {
   const padded = useContext(CardPaddedContext);
   const compact = useContext(CardDensityContext) === "compact";
   return (
@@ -3261,11 +3278,8 @@ export function CardHeader({ className, stackAction = false, ...props }: CardHea
         "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
         padded ? "px-0 pt-0" : "px-6 pt-6",
         compact && "gap-0.5",
-        // One column under `sm`, and the action back into the flow (DOM order, so
-        // after the description when it is written after it), at the start edge.
-        // The descendant selector outranks CardAction's own placement classes.
-        stackAction &&
-          "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start",
+        stackAction === true && CARD_STACK_ACTION,
+        stackAction === undefined && CARD_STACK_ACTION_AT_LARGE,
         className,
       )}
       {...props}

package/src/components/wizard-stepper.tsx

@@ -13,7 +13,11 @@ export function WizardStepper({
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return (
-    <ol className="flex items-center gap-1 text-xs" aria-label={ariaLabel}>
+    // `flex-wrap`: the steps flow onto a second line rather than past the screen
+    // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
+    // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
+    // Where the steps fit, they stay one row.
+    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
           {i > 0 && <span className="w-4 border-t border-[var(--border)]" />}

package/src/hooks/use-breakpoint.ts

@@ -82,21 +82,32 @@ export function lengthPx(length: number | RemLength | undefined, rootRemPx: numb
 /**
  * The media query a breakpoint variant means at `scale` (`TEXT_SCALE` of the size in
  * force). `"md"` → `(min-width: 768px)` at Normal, `(min-width: 960px)` at Large;
- * `"max-md"` → `(max-width: 767px)` at Normal. In px, scaled by the browser's own
- * default font size as well, so a person who set 20 px in the browser gets 960 px for
- * `md` at Normal — as the CSS does.
+ * `"max-md"` → `(width < 768px)` at Normal. In px, scaled by the browser's own default
+ * font size as well, so a person who set 20 px in the browser gets 960 px for `md` at
+ * Normal — as the CSS does.
  *
- * At Normal these are, character for character, the strings the kit queried before
- * (`PHONE_QUERY`, DataTable's `isMdUp`), so a test's `matchMedia` stub keeps working.
- * Like those, the pair is exact at whole-pixel widths; on a fractional viewport width
- * between the two (767.2 px at a 1.25 device-pixel ratio) neither matches, where the
- * CSS's `width < 48rem` says phone. Verified in Chromium at 700–1300 px × three sizes.
+ * `max-*` is written in range syntax, `(width < N)`, against the same `N` its `min-*`
+ * twin starts at, so the two are exact complements at EVERY width: exactly one of
+ * `md` and `max-md` matches, as with tokens.css's `width >= 48rem` / `width < 48rem`
+ * (and Tailwind's own `max-*`). Until 0.32.1 it was `(max-width: 767px)`, which left a
+ * gap: on a fractional viewport width (767.5 px under zoom or at some Android
+ * device-pixel ratios) neither query matched, so DataTable, asking `!md`, said phone
+ * while `usePhoneLayout()`, asking `max-md`, said not (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §3.3: "the CSS and JS answers always agree").
+ *
+ * Range syntax in media queries is Chrome / Edge 104, Firefox 63, Safari 16.4. That is
+ * inside the floor the kit already sets: tokens.css's breakpoint variants are written in
+ * it, and Tailwind v4 itself needs Safari 16.4, Chrome 111 and Firefox 128.
+ *
+ * A test's `matchMedia` stub that keyed on the old string (`"max-width: 767px"`, the
+ * deprecated `PHONE_QUERY`) has to answer `(width < 768px)` now. `min-*` is unchanged,
+ * character for character.
  */
 export function breakpointQuery(variant: BreakpointVariant, scale = 1, remPx: number = readBrowserRemPx()): string {
   const max = variant.startsWith("max-");
   const name = (max ? variant.slice(4) : variant) as Breakpoint;
   const px = Math.round(BREAKPOINT_REM[name] * remPx * scale);
-  return max ? `(max-width: ${px - 1}px)` : `(min-width: ${px}px)`;
+  return max ? `(width < ${px}px)` : `(min-width: ${px}px)`;
 }
 
 /**

package/src/i18n/german.ts

@@ -1203,6 +1203,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         deletion_request: "Löschung beantragt",
         deletion_cancel: "Löschung aufgehoben",
         erase: "Konto endgültig gelöscht",
+        plan: "Tarif geändert",
       },
     },
     transferOwnership: {
@@ -1533,6 +1534,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
           : `${n(count)} Änderungen warten auf einen Tarif`,
       // "Verwerfen", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Wartende Änderungen verwerfen",
+      notConfigured: "Zahlungen sind noch nicht eingerichtet. Bitte versuchen Sie es später noch einmal.",
+      disabled: "Abonnements sind hier nicht verfügbar.",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Darstellung" group.
@@ -1544,6 +1547,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       contrastHelp:
         "Mehr Kontrast macht dezente Texte und Linien dunkler und Fokusrahmen dicker. „System“ richtet sich nach diesem Gerät.",
       contrastModes: { system: "System", standard: "Standard", more: "Mehr" },
+      saveFailed: "Konnte nicht in Ihrem Konto gespeichert werden. Auf diesem Gerät gilt es trotzdem.",
     },
     rowActions: {
       actions: "Aktionen",

package/src/i18n/locales/es.ts

@@ -1175,6 +1175,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
         deletion_request: "Eliminación solicitada",
         deletion_cancel: "Eliminación cancelada",
         erase: "Cuenta borrada",
+        plan: "Plan cambiado",
       },
     },
     transferOwnership: {
@@ -1489,6 +1490,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       waitingChanges: (count) => `${n(count)} ${plural(count, "cambio", "cambios")} a la espera de un plan`,
       // "Descartar", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Descartar los cambios en espera",
+      notConfigured: "Los pagos aún no están configurados. Inténtelo de nuevo más tarde.",
+      disabled: "Las suscripciones no están disponibles aquí.",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Apariencia" group.
@@ -1500,6 +1503,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       contrastHelp:
         "El contraste aumentado oscurece los textos tenues y las líneas, y engrosa los marcos de foco. «Sistema» sigue el ajuste de este dispositivo.",
       contrastModes: { system: "Sistema", standard: "Estándar", more: "Aumentado" },
+      saveFailed: "No se ha podido guardar en su cuenta. En este dispositivo se aplica igualmente.",
     },
     rowActions: {
       actions: "Acciones",

package/src/i18n/locales/fr.ts

@@ -1201,6 +1201,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         deletion_request: "Suppression demandée",
         deletion_cancel: "Suppression annulée",
         erase: "Compte effacé",
+        plan: "Formule modifiée",
       },
     },
     transferOwnership: {
@@ -1521,6 +1522,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         `${n(count)} ${plural(count, "modification en attente", "modifications en attente")} d’une formule`,
       // "Abandonner", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Abandonner les modifications en attente",
+      notConfigured: "Les paiements ne sont pas encore configurés. Veuillez réessayer plus tard.",
+      disabled: "Les abonnements ne sont pas disponibles ici.",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Apparence" group. The steps agree with "taille", the modes with "contraste".
@@ -1532,6 +1535,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       contrastHelp:
         "Le contraste renforcé assombrit les textes discrets et les lignes, et épaissit les contours de focus. «\u202fSystème\u202f» suit le réglage de cet appareil.",
       contrastModes: { system: "Système", standard: "Standard", more: "Renforcé" },
+      saveFailed: "Impossible de l’enregistrer dans votre compte. Le réglage s’applique tout de même sur cet appareil.",
     },
     rowActions: {
       actions: "Actions",

package/src/i18n/locales/hu.ts

@@ -1178,6 +1178,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         deletion_request: "Törlés kérelmezve",
         deletion_cancel: "Törlés visszavonva",
         erase: "Fiók véglegesen törölve",
+        plan: "Csomag módosítva",
       },
     },
     transferOwnership: {
@@ -1493,6 +1494,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       waitingChanges: (count) => `${n(count)} módosítás csomagra vár`,
       // "Elvetés", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Várakozó módosítások elvetése",
+      notConfigured: "A fizetés még nincs beállítva. Kérjük, próbálja újra később.",
+      disabled: "Az előfizetés itt nem érhető el.",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Megjelenés" group.
@@ -1504,6 +1507,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       contrastHelp:
         "A fokozott kontraszt sötétebbé teszi a halvány szövegeket és vonalakat, a fókuszkereteket pedig vastagabbá. A „Rendszer” ennek az eszköznek a beállítását követi.",
       contrastModes: { system: "Rendszer", standard: "Normál", more: "Fokozott" },
+      saveFailed: "Nem sikerült menteni a fiókjába. Ezen az eszközön ettől még érvényes.",
     },
     rowActions: {
       actions: "Műveletek",

package/src/i18n/locales/it.ts

@@ -1184,6 +1184,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         deletion_request: "Eliminazione richiesta",
         deletion_cancel: "Eliminazione annullata",
         erase: "Account cancellato",
+        plan: "Piano modificato",
       },
     },
     transferOwnership: {
@@ -1505,6 +1506,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         `${n(count)} ${plural(count, "modifica in attesa", "modifiche in attesa")} di un piano`,
       // "Scarta", as `wizard.cancelConfirmLabel`.
       discardWaiting: "Scarta le modifiche in attesa",
+      notConfigured: "I pagamenti non sono ancora configurati. Riprovi più tardi.",
+      disabled: "Gli abbonamenti non sono disponibili qui.",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Aspetto" group.
@@ -1516,6 +1519,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       contrastHelp:
         "Il contrasto aumentato scurisce i testi tenui e le linee e ispessisce i riquadri di focus. «Sistema» segue l’impostazione di questo dispositivo.",
       contrastModes: { system: "Sistema", standard: "Standard", more: "Aumentato" },
+      saveFailed: "Non è stato possibile salvarlo nel Suo account. Su questo dispositivo vale comunque.",
     },
     rowActions: {
       actions: "Azioni",

package/src/i18n/locales/zh.ts

@@ -1131,6 +1131,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         deletion_request: "已申请删除",
         deletion_cancel: "已取消删除",
         erase: "账户已永久删除",
+        plan: "套餐已更改",
       },
     },
     transferOwnership: {
@@ -1429,6 +1430,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       waitingChanges: (count) => `${n(count)} 项修改正在等待套餐`,
       // "放弃", as `wizard.cancelConfirmLabel`.
       discardWaiting: "放弃等待中的修改",
+      notConfigured: "付款尚未设置，请稍后再试。",
+      disabled: "此处不提供订阅。",
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "外观" group.
@@ -1439,6 +1442,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       contrast: "对比度",
       contrastHelp: "增强对比度会加深浅色文字和线条，并加粗焦点框。“跟随系统”沿用此设备的设置。",
       contrastModes: { system: "跟随系统", standard: "标准", more: "增强" },
+      saveFailed: "无法保存到您的账户。此设备上仍然生效。",
     },
     rowActions: {
       actions: "操作",

package/src/index.ts

@@ -173,6 +173,8 @@ export type {
 } from "./components/file-button";
 export * from "./components/treemap";
 export * from "./components/series-chart";
+// 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
+export type { ChartHeight } from "./components/chart-height";
 export * from "./components/chart-zoom";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
@@ -759,8 +761,8 @@ export type {
 // ── 0.32.0: text size and contrast (docs/text-size-harmonization.md) ──
 export * from "./theme/text-size";
 export * from "./theme/contrast";
-export { useBreakpoint, usePhoneLayout, breakpointQuery, BREAKPOINT_REM } from "./hooks/use-breakpoint";
-export type { Breakpoint, BreakpointVariant } from "./hooks/use-breakpoint";
+export { useBreakpoint, usePhoneLayout, breakpointQuery, BREAKPOINT_REM, remPx, useRemPx } from "./hooks/use-breakpoint";
+export type { Breakpoint, BreakpointVariant, RemLength } from "./hooks/use-breakpoint";
 export { useAccountAppearance, resolveAccountAppearance } from "./settings/use-account-appearance";
 export type {
   AppearanceSource,

package/src/landing/landing-sections.tsx

@@ -97,7 +97,11 @@ export function Hero({
       {...rest}
       data-slot="landing-hero"
       className={cn(
-        "mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:py-24",
+        // `grid-cols-1` below `lg` (0.32.1, Kurvenschmiede's 0.32 report): without a
+        // template the one column is `auto` and grows to the visual's longest unwrapped
+        // line — 80 px past a 360 px phone at Extra large. `minmax(0, 1fr)` holds it to
+        // the page. The same in FeatureRow and TrustStrip.
+        "mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-4 py-16 sm:py-24",
         visual != null && "lg:grid-cols-2",
         className,
       )}
@@ -186,7 +190,7 @@ export function FeatureRow({
     <div
       {...rest}
       data-slot="landing-feature-row"
-      className={cn("group/feature grid items-center gap-8 py-10", visual != null && "lg:grid-cols-2 lg:gap-16", className)}
+      className={cn("group/feature grid grid-cols-1 items-center gap-8 py-10", visual != null && "lg:grid-cols-2 lg:gap-16", className)}
     >
       <div className="lg:group-even/feature:order-last">
         {(icon != null || eyebrow != null) && (
@@ -245,7 +249,7 @@ export interface TrustStripProps extends Omit<ComponentPropsWithoutRef<"section"
 export function TrustStrip({ items, headingAs: Heading = "h3", className, ...rest }: TrustStripProps) {
   return (
     <section {...rest} data-slot="landing-trust" className={cn("mx-auto max-w-6xl px-4 py-12 sm:py-16", className)}>
-      <ul className={cn("grid gap-8 sm:grid-cols-2", items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4")}>
+      <ul className={cn("grid grid-cols-1 gap-8 sm:grid-cols-2", items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4")}>
         {items.map((item, i) => (
           <li key={i}>
             {item.icon != null && (

package/src/settings/use-account-appearance.ts

@@ -79,7 +79,7 @@ export interface UseAccountAppearanceOptions {
 export interface AccountAppearance extends ResolvedAccountAppearance {
   /** The user picked a size: it becomes the device's choice and — signed in, and not a
    *  demo — the account's. The promise is `save`'s; the device keeps the pick if it
-   *  fails, and the app says so. */
+   *  fails, and the app says so (`appearance.saveFailed`, 0.32.1). */
   pickTextSize: (size: TextSize) => Promise<unknown>;
   /** As {@link pickTextSize}, for the contrast mode. */
   pickContrast: (mode: ContrastMode) => Promise<unknown>;

package/src/theme/contrast.ts

@@ -130,9 +130,10 @@ export function readPersistedContrast(storageKey: string): ContrastMode | null {
 /**
  * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's
  * last known value, else "system" — resolved against `prefers-contrast` and applied
- * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in either order: the
+ * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the
  * palette steps itself when `data-contrast` is already set, and this re-applies the
- * palette's set when it is not. Returns the level applied.
+ * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32
+ * report asked which). Returns the level applied.
  */
 export function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {
   let account: unknown;

package/src/theme/text-size.ts

@@ -119,6 +119,11 @@ export function useTextSize(): TextSizeInfo {
  *
  * `size` is one of {@link TEXT_SIZES}, or `null` / absent when this device never chose.
  * A future change adds a key; it never renames `state.size` or changes its values.
+ *
+ * A hand-written seed (a test, a screenshot script) must carry `"version":1`: the store
+ * drops a stored state of another version as a migration it doesn't know, silently
+ * (keksdose's 0.32 report). The inline snippet reads `state.size` whatever the version,
+ * so the two would disagree. In the kit's showcase, `?text-size=` needs no seed.
  */
 export interface PersistedTextSize {
   state?: { size?: TextSize | null };
@@ -189,9 +194,20 @@ export function applyPersistedTextSize(storageKey: string, options: PersistedApp
  * ```
  *
  * Paste the constant's value in place of `(function(k,a){…})`. It reads the frozen
- * {@link PersistedTextSize} format, never throws, and sets only `data-text-size`; the
- * splash itself sizes in rem so the attribute reaches it (tokens.css, or the splash's own
- * `html[data-text-size=large]{font-size:125%}` if it paints before the stylesheet).
+ * {@link PersistedTextSize} format, never throws, and sets only `data-text-size`.
+ *
+ * The splash sizes in rem, and needs the root rules inline beside it, since the app's
+ * stylesheet is a separate request and arrives after the splash paints (0.32.1,
+ * keksdose's 0.32 report: that is every app, not an edge case):
+ *
+ * ```html
+ * <style>html[data-text-size=large]{font-size:125%}html[data-text-size=xlarge]{font-size:150%}</style>
+ * ```
+ *
+ * Under a hash-based Content Security Policy (`script-src 'sha256-…'`) this is a second
+ * inline script with its own hash: add it to the policy, and recompute it whenever the
+ * storage key or the account function in the call changes (keksdose added it to both
+ * its Caddyfiles, and its guard test hashes every inline script).
  */
 export const TEXT_SIZE_INLINE_SCRIPT =
   "(function(k,a){function ok(v){return v==='normal'||v==='large'||v==='xlarge'}" +

package/src/wizard/wizard-summary.tsx

@@ -40,8 +40,10 @@ export function WizardSummary({
         <Card key={sIdx}>
           {/* CardHeader is a grid, and CardAction is the top-right column it
               reserves — the edit button has to go through it or it stacks under
-              the title instead of sitting beside it. */}
-          <CardHeader className="pb-2">
+              the title instead of sitting beside it. `stackAction={false}`: the pencil
+              is named by `aria-label` and stays an icon at Large, so it keeps its
+              place beside the title there too (0.32.1). */}
+          <CardHeader className="pb-2" stackAction={false}>
             <CardTitle className="text-base">{section.label}</CardTitle>
             {section.stepIndex !== undefined && onEditStep && (
               <CardAction>

package/tokens.css

@@ -693,10 +693,18 @@ body {
   .animate-drill { animation-name: overlay-fade-in; }
 }
 
-/* Scrollbars: keep light defaults; theme to slate when dark mode is active. */
+/* Scrollbars: keep light defaults; theme to the palette when dark mode is active.
+ *
+ * From the tokens, not literals (0.32.1, keksdose's 0.32 report): the thumb is a border
+ * (`--border`) on the page (`--bg-page`), so a palette preset carries through, and so
+ * does More contrast (§5), which steps `--border` until it clears 3:1 against every
+ * surface, the page among them: WCAG 1.4.11's floor for a control's visible part. At
+ * standard contrast it is as quiet as the slate-700-on-slate-900 it replaces (1.5:1
+ * against 1.7:1 in the default dark preset). Hover takes `--border-strong`, the border
+ * pulled toward the text, which grows with it. */
 .dark {
   color-scheme: dark;
-  scrollbar-color: rgb(51 65 85) rgb(15 23 42); /* slate-700 thumb on slate-900 track */
+  scrollbar-color: var(--border) var(--bg-page);
 }
 
 .dark ::-webkit-scrollbar {
@@ -705,19 +713,19 @@ body {
 }
 
 .dark ::-webkit-scrollbar-track {
-  background-color: rgb(15 23 42); /* slate-900 */
+  background-color: var(--bg-page);
 }
 
 .dark ::-webkit-scrollbar-thumb {
-  background-color: rgb(51 65 85); /* slate-700 */
+  background-color: var(--border);
   border-radius: 6px;
-  border: 2px solid rgb(15 23 42); /* slate-900 — creates inset padding */
+  border: 2px solid var(--bg-page); /* the track's colour: inset padding */
 }
 
 .dark ::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(71 85 105); /* slate-600 */
+  background-color: var(--border-strong);
 }
 
 .dark ::-webkit-scrollbar-corner {
-  background-color: rgb(15 23 42); /* slate-900 */
+  background-color: var(--bg-page);
 }