@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/field-parts.tsx

@@ -1,7 +1,10 @@
-import { createContext, useId } from "react";
+import { createContext, isValidElement, useContext, useId } from "react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { HelpCircle } from "lucide-react";
 import { cn } from "../lib/cn";
-import { Tooltip } from "./tooltip";
+import { useInlineFacts } from "../hooks/use-large-text";
+import { FOCUS_RING } from "./focus-ring";
+import { Tooltip, type TooltipSide } from "./tooltip";
 import { useCommitReason } from "./write-lock";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
@@ -29,7 +32,7 @@ import { hasMessage, mergeDescribedBy } from "./choice-parts";
 // same baseline — which is what put dev#468's "?" three pixels above the word it
 // belongs to.
 export const STATIC_LABEL_TYPE =
-  "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+  "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 
 // A field that always has a value (select / dropdown trigger) keeps the label
 // permanently in the floated position — small, in the top strip, value below.
@@ -58,6 +61,92 @@ export function FieldLabel({ children, className, ...rest }: FieldLabelProps) {
 
 /* ── hint ─────────────────────────────────────────────────────────────────── */
 
+/**
+ * The "?" that explains a field, on the field's own label line (dev#468).
+ *
+ * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a
+ * component rather than as a snippet each form repeats because the previous
+ * version was exactly that snippet — an absolutely-positioned button whose
+ * `top-1.5` was one guess at where an 11px label sits — and the reporter's
+ * follow-up was *"question mark is not centered. Is it part of the hoc?
+ * positioning problems seem quite frequently."* It was not part of the HOC. Now
+ * it is, and there is one place left where the answer can be wrong.
+ *
+ * A `<button>` rather than a bare icon: hover alone puts the explanation out of
+ * reach of a keyboard and of every touch device, and the tooltip shows on focus
+ * too. The text is also its accessible name, so a screen reader gets it without
+ * the bubble ever opening.
+ */
+export interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+  /** The explanation. It is both the tooltip's text and, by default, the button's
+   *  accessible name, so a screen reader gets it without the bubble ever opening. */
+  label: string;
+  /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
+   *  right in RTL). `left` / `right` stay physical. */
+  side?: TooltipSide;
+}
+
+export function FieldHint({
+  label,
+  side = "start",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}: FieldHintProps) {
+  return (
+    // `tap="toggle"` (0.25): the "?" exists only to explain, so a tap on a phone shows
+    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a
+    // tap) would otherwise make it show nothing at all.
+    <Tooltip label={label} side={side} portal tap="toggle">
+      <button
+        {...rest}
+        // `type` after the spread, not before. These render inside forms — that is the
+        // only place a field has a label line — and a hint that defaulted to `submit`
+        // because a caller spread a props object at it would save the form on a click
+        // meant to explain a field.
+        type="button"
+        // The explanation names the button unless the caller says otherwise; passing
+        // `aria-label` is how you shorten it for a screen reader without shortening
+        // what the bubble shows.
+        aria-label={ariaLabel ?? label}
+        // Nothing to activate: the tooltip opens on hover and on focus, and a
+        // click that did something as well would be a second, undiscoverable
+        // behaviour on the same target.
+        onClick={(e) => e.preventDefault()}
+        // The kit's focus frame (0.32, §5): the "?" is a tab stop, and had no ring at all.
+        className={cn(
+          "flex rounded-full text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
+          FOCUS_RING,
+          className,
+        )}
+      >
+        <HelpCircle className="size-3.5" />
+      </button>
+    </Tooltip>
+  );
+}
+
+/**
+ * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md
+ * §4 "No fact only in a tooltip"): at Large and Extra large, and on a touch screen, a
+ * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under
+ * the box, where they are read without hovering or tapping a 14 px "?". Anywhere else,
+ * and for any other hint, the hint unchanged.
+ *
+ * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a
+ * field that resolves its own `hint` (an app's, or one of the kit's own outside this
+ * file) calls it first and then treats the result as it treated a text hint.
+ */
+export function useInlineHint(hint: ReactNode): ReactNode {
+  const inline = useInlineFacts();
+  if (inline && isValidElement(hint) && hint.type === FieldHint) {
+    const words = (hint.props as FieldHintProps).label;
+    if (words) return words;
+  }
+  return hint;
+}
+
+
 /**
  * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
  * something for the label line (a {@link FieldHint} "?", or any other node).
@@ -73,7 +162,7 @@ export function isTextHint(hint: ReactNode): hint is string | number {
 
 /** The caption under a field — Select's and NumberInput's type, so every field's
  *  standing advice reads alike. */
-export const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+export const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
 
 export interface FieldHintParts {
   /** The caller's `aria-describedby` with the caption's id appended — standing
@@ -92,7 +181,8 @@ export interface FieldHintParts {
  * Split a field's `hint` into the caption under it (attached with `aria-describedby`)
  * or the "?" on its label line. See {@link isTextHint}.
  */
-export function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts {
+export function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts {
+  const hint = useInlineHint(hintProp);
   const captionId = useId();
   const text = isTextHint(hint);
   return {
@@ -197,13 +287,24 @@ export function useLockReason(commit: boolean | undefined, disabledReason: React
  */
 export function LockedReason({
   lock,
+  line = false,
   className,
   children,
 }: {
   lock: LockReason;
+  /** Draw the reason as a line under the control instead (0.32, §4) — see
+   *  {@link DisabledReasonLine}; the caller decides with {@link useDisabledReasonLine}. */
+  line?: boolean;
   className?: string;
   children: ReactNode;
 }) {
+  if (line) {
+    return (
+      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className}>
+        {children}
+      </DisabledReasonLine>
+    );
+  }
   return (
     <Tooltip label={lock.reason} className={className}>
       <>
@@ -216,6 +317,87 @@ export function LockedReason({
   );
 }
 
+/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */
+
+/**
+ * Where a control's `disabledReason` is shown (§4 "No fact only in a tooltip"):
+ *
+ * - `"auto"` (default): as a LINE under the control at Large and Extra large and on a
+ *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover
+ *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and
+ *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's
+ *   inline actions) it stays the tooltip at every size: there is no room for a line.
+ * - `"line"`: always the line — a form whose locked submit should say why at once.
+ * - `"tooltip"`: always the tooltip — a place the caller knows has no room, and where
+ *   the reason is also said elsewhere on the screen (a banner over the form).
+ *
+ * Either way the reason is the control's `aria-describedby`, so a screen reader hears
+ * it on focus; the line IS that description (one copy), the tooltip keeps its hidden
+ * copy as before.
+ */
+export type DisabledReasonDisplay = "auto" | "line" | "tooltip";
+
+/**
+ * Marks a region where the controls must stay compact at every text size (§4, §10.8):
+ * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a
+ * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar
+ * in one ("the top bar keeps its essential icons"); `RowActions` its inline icons.
+ *
+ * For a toolbar that has no room, not for a whole page: the contract asks that the icon
+ * alone be rare. A dense row's actions belong in `RowActions`, which collapses them
+ * into a "⋯" menu at Large instead.
+ */
+export const CompactControlsContext = createContext(false);
+
+export function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {
+  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;
+}
+
+/** Whether a control's `disabledReason` is drawn as a line here — see
+ *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,
+ *  ToggleGroup) and an app's control that has a reason to give. */
+export function useDisabledReasonLine(display: DisabledReasonDisplay = "auto"): boolean {
+  const compact = useContext(CompactControlsContext);
+  const inline = useInlineFacts();
+  if (display === "line") return true;
+  if (display === "tooltip") return false;
+  return inline && !compact;
+}
+
+/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked
+ *  control's "why" reads like a field's standing advice. Capped, so a long reason under
+ *  a small control wraps rather than widening its row without end. */
+export const DISABLED_REASON_LINE_CLASS =
+  "mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]";
+
+/**
+ * A control and its `disabledReason` as a line under it — the `"line"` form of
+ * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the
+ * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own
+ * width, and a column parent still stretches the wrapper (FormActions' phone stack).
+ * The line carries `id`, which the control's `aria-describedby` names.
+ */
+export function DisabledReasonLine({
+  id,
+  reason,
+  className,
+  children,
+}: {
+  id: string;
+  reason: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span data-slot="disabled-reason" className={cn("inline-flex max-w-full flex-col items-start", className)}>
+      {children}
+      <span id={id} className={DISABLED_REASON_LINE_CLASS}>
+        {reason}
+      </span>
+    </span>
+  );
+}
+
 /* ── groups ───────────────────────────────────────────────────────────────── */
 
 /**
@@ -234,7 +416,7 @@ export function hasContent(node: ReactNode): boolean {
   return node !== undefined && node !== null && node !== false && node !== "";
 }
 
-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)]";
 
 export interface FieldMessages {
   /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */
@@ -251,7 +433,7 @@ export interface FieldMessages {
 
 /** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */
 export function useFieldMessages({
-  hint,
+  hint: hintProp,
   error,
   invalid,
   describedBy,
@@ -263,6 +445,7 @@ export function useFieldMessages({
   describedBy?: string;
   ariaInvalid?: unknown;
 }): FieldMessages {
+  const hint = useInlineHint(hintProp);
   const hintId = useId();
   const errorId = useId();
   const textHint = isTextHint(hint);

package/src/components/field-sync.tsx

@@ -3,7 +3,9 @@ import type { ReactNode } from "react";
 import { AlertCircle, Check, Loader2, Pencil, PencilLine } from "lucide-react";
 import { cn } from "../lib/cn";
 import { Tooltip } from "./tooltip";
+import { FOCUS_RING } from "./focus-ring";
 import { useKitLabels } from "../i18n/kit-labels";
+import { useLargeText } from "../hooks/use-large-text";
 
 /**
  * Sync state for a field backed by a database row.
@@ -252,7 +254,10 @@ export interface FieldSyncIndicatorProps {
   error?: Error | null;
   /** Override any of the five English defaults. */
   labels?: Partial<FieldSyncLabels>;
-  /** Render the label beside the icon instead of only in the tooltip. */
+  /** Render the label beside the icon instead of only in the tooltip. Always on at
+   *  Large and Extra large (0.32, docs/text-size-harmonization.md §4 "No fact only in a
+   *  tooltip"): the reader who asked for bigger type gets the words, not a 14 px glyph
+   *  and a bubble. */
   showLabel?: boolean;
   /** When given, the error state renders a retry button after the icon. */
   onRetry?: () => void;
@@ -282,6 +287,8 @@ export function FieldSyncIndicator({
   className,
 }: FieldSyncIndicatorProps) {
   const l = useKitLabels("fieldSync", DEFAULT_FIELD_SYNC_LABELS, labels);
+  const large = useLargeText();
+  showLabel = showLabel || large;
   const { color, Icon } = STATE_STYLE[state];
   const text =
     state === "error" ? (error?.message?.trim() ? error.message : l.error) : l[state];
@@ -312,7 +319,11 @@ export function FieldSyncIndicator({
         <button
           type="button"
           onClick={onRetry}
-          className="rounded underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2"
+          // The kit's focus frame (0.32, §5), stood off the word.
+          className={cn(
+            "rounded underline underline-offset-2 hover:no-underline focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]",
+            FOCUS_RING,
+          )}
           style={{ color }}
         >
           {l.retry}
@@ -461,7 +472,10 @@ export function FieldSyncRow<T>({
               type="button"
               onClick={retry}
               aria-label={l.retry}
-              className="pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:outline-2 focus-visible:outline-offset-2"
+              className={cn(
+                "pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]",
+                FOCUS_RING,
+              )}
             >
               <AlertCircle aria-hidden className="size-4" />
             </button>

package/src/components/field.tsx

@@ -177,12 +177,12 @@ export function Field({
         ? children(control, { labelId: label !== undefined ? labelId : undefined })
         : children}
       {hasHint && (
-        <p id={hintId} className="text-[11px] leading-tight text-[var(--text-muted)]">
+        <p id={hintId} className="text-caption leading-tight text-[var(--text-muted)]">
           {hint}
         </p>
       )}
       {hasError && (
-        <p id={errorId} className="text-[11px] leading-tight text-[var(--danger)]">
+        <p id={errorId} className="text-caption leading-tight text-[var(--danger)]">
           {error}
         </p>
       )}

package/src/components/floating-panel.tsx

@@ -14,6 +14,7 @@ import type {
 import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { dirOf, type Direction } from "../lib/direction";
 import { registerFloating } from "../lib/floating-stack";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
@@ -243,7 +244,8 @@ export function FloatingActionButton({
                 "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
               pressed === true &&
                 "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
-              "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
+              "outline-none focus-visible:ring-offset-2",
+              FOCUS_RING,
               className,
             )}
           >
@@ -505,7 +507,7 @@ export function FloatingPanel({
                   setOpen(false);
                 }}
                 aria-label={labels.close}
-                className="-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+                className={cn("-me-1.5 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]", FOCUS_RING)}
               >
                 <X aria-hidden className="size-5" />
               </button>
@@ -687,7 +689,8 @@ export function FloatingAction({
   const isLink = href !== undefined;
   const look = cn(
     "relative flex size-12 items-center justify-center transition-colors",
-    "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+    "outline-none focus-visible:ring-inset",
+    FOCUS_RING,
     "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
     variant === "primary"
       ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]"
@@ -704,7 +707,7 @@ export function FloatingAction({
           aria-hidden
           data-badge=""
           className={cn(
-            "pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-[10px] leading-4 font-semibold",
+            "pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-micro leading-4 font-semibold",
             BADGE_TONE[badgeTone],
           )}
         >

package/src/components/focus-ring.ts

@@ -0,0 +1,12 @@
+/**
+ * The kit's focus frame (§5): a brand ring `--focus-ring-width` wide — 2 px, 3 px under
+ * More contrast (tokens.css) — on keyboard focus only. ONE frame instead of the hundred
+ * spelled-out `focus-visible:ring-2` copies, so the contrast setting can thicken all of
+ * them at once. Compose with `ring-inset` or `ring-offset-*` where a component needs it.
+ */
+export const FOCUS_RING =
+  "focus-visible:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-[var(--brand)]";
+
+/** Just the width of {@link FOCUS_RING}, for a ring in another colour (a danger control's,
+ *  `--brand-contrast` on a filled button): `cn(FOCUS_RING_WIDTH, "focus-visible:ring-[var(--danger)]")`. */
+export const FOCUS_RING_WIDTH = "focus-visible:ring-[length:var(--focus-ring-width)]";

package/src/components/form-actions.tsx

@@ -3,7 +3,8 @@ import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { useBreakpoint, usePhoneLayout } from "../hooks/use-breakpoint";
+import { useLargeText } from "../hooks/use-large-text";
 import { isApplePlatform } from "../hooks/use-hotkey";
 import { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from "./ui";
 import { useWriteLock } from "./write-lock";
@@ -43,11 +44,29 @@ export type FormActionsAlign = "start" | "center" | "end" | "between";
  */
 export type FormActionsPlacement = "inline" | "sticky" | "dialog";
 
+/**
+ * When the row's buttons STACK, one per line at the row's full width (0.32,
+ * docs/text-size-harmonization.md §4 "FormActions stack full width on a phone layout"):
+ *
+ *  - `"auto"` (default): on the phone layout (`usePhoneLayout()`, `max-md:` at the text
+ *    size in force) at Large and Extra large. There a phone is 312 or 260 px of text
+ *    wide, and Cancel and a "Save changes" side by side wrap into a ragged pair with
+ *    one 48 px target squeezed against the other. Normal keeps the row the apps tuned.
+ *  - `"phone"`: on the phone layout at every text size.
+ *  - `"never"`: always the row.
+ *
+ * Stacked, the order is the DOM's — the start group (the destructive action), the extra
+ * actions, Cancel, then Save at the bottom, under the thumb — so the visual order and
+ * the tab order stay one.
+ */
+export type FormActionsStack = "auto" | "phone" | "never";
+
 /**
  * A placement per breakpoint, mobile first — `{ base: "sticky", md: "inline" }` is a
  * Save row stuck to the bottom of a phone's long form and in the flow under the last
- * field from 768px up, where the form fits. The breakpoints are Tailwind's (sm 640,
- * md 768, lg 1024, xl 1280px), as `BulkActionBar`'s `variant` breakpoints are, and
+ * field from 768px up, where the form fits. The breakpoints are the classes' (sm 640,
+ * md 768, lg 1024, xl 1280px at Normal text size, and 1.25 / 1.5 times that at Large /
+ * Extra large, as `md:` is since 0.32), as `BulkActionBar`'s `variant` breakpoints are, and
  * resolved the same way, in JS: the sticky row is positioned by inline style, which a
  * `md:` class cannot reach. keksdose switched `placement` on its own media query at
  * every long form for want of this. The breakpoints are the VIEWPORT's, not the
@@ -61,12 +80,9 @@ export interface ResponsiveFormActionsPlacement {
   xl?: FormActionsPlacement;
 }
 
-const BREAKPOINTS = [
-  ["xl", "(min-width: 1280px)"],
-  ["lg", "(min-width: 1024px)"],
-  ["md", "(min-width: 768px)"],
-  ["sm", "(min-width: 640px)"],
-] as const;
+/** Widest first: the first that matches and names a value wins. Each is the class's own
+ *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */
+const BREAKPOINTS = ["xl", "lg", "md", "sm"] as const;
 
 /** The placement in force: the widest breakpoint that matches AND names one, else
  *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a
@@ -76,13 +92,13 @@ function useResolvedPlacement(
   placement: FormActionsPlacement | ResponsiveFormActionsPlacement,
 ): FormActionsPlacement {
   const matches = {
-    xl: useMediaQuery(BREAKPOINTS[0][1], false),
-    lg: useMediaQuery(BREAKPOINTS[1][1], false),
-    md: useMediaQuery(BREAKPOINTS[2][1], false),
-    sm: useMediaQuery(BREAKPOINTS[3][1], false),
+    xl: useBreakpoint("xl"),
+    lg: useBreakpoint("lg"),
+    md: useBreakpoint("md"),
+    sm: useBreakpoint("sm"),
   };
   if (typeof placement === "string") return placement;
-  for (const [key] of BREAKPOINTS) {
+  for (const key of BREAKPOINTS) {
     const p = placement[key];
     if (matches[key] && p !== undefined) return p;
   }
@@ -296,6 +312,9 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
    *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no
    *  keyboard to press it on. Default `false`. */
   submitShortcutHint?: boolean;
+  /** When the buttons stack full width — see {@link FormActionsStack}. Default `auto`:
+   *  on the phone layout at Large and Extra large. */
+  stack?: FormActionsStack;
   /** Extra actions, placed before Cancel. */
   children?: ReactNode;
 }
@@ -360,11 +379,18 @@ export function FormActions({
   form,
   submitShortcut,
   submitShortcutHint = false,
+  stack = "auto",
   children,
   className,
   style,
   ...rest
 }: FormActionsProps) {
+  const phone = usePhoneLayout();
+  const large = useLargeText();
+  const stacked = stack !== "never" && phone && (stack === "phone" || large);
+  // Stacked, a button fills its line — also inside the reason line's wrapper, which the
+  // column stretches but which keeps its control at the control's own width.
+  const full = stacked ? "w-full" : undefined;
   const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
   const lock = useWriteLock();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -430,6 +456,7 @@ export function FormActions({
       disabled={destructive.disabled}
       disabledReason={destructive.disabledReason}
       commit={commit}
+      className={full}
     >
       {destructive.label}
     </Button>
@@ -467,18 +494,27 @@ export function FormActions({
             }
           : style
       }
-      className={cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}
+      data-stacked={stacked || undefined}
+      className={cn(
+        stacked ? "flex flex-col items-stretch gap-2" : cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify]),
+        PLACEMENT_CLASS[placement],
+        className,
+      )}
     >
       {(hasDestructive || hasStart) && (
-        <div className="me-auto flex min-w-0 flex-wrap items-center gap-2">
+        <div
+          className={
+            stacked ? "flex min-w-0 flex-col items-stretch gap-2" : "me-auto flex min-w-0 flex-wrap items-center gap-2"
+          }
+        >
           {destructiveNode}
           {hasStart && startSlot}
         </div>
       )}
-      <div className="flex flex-wrap items-center gap-2">
+      <div className={stacked ? "flex flex-col items-stretch gap-2" : "flex flex-wrap items-center gap-2"}>
         {children}
         {onCancel && (
-          <Button type="button" variant={cancelVariant} size={size} onClick={onCancel}>
+          <Button type="button" variant={cancelVariant} size={size} onClick={onCancel} className={full}>
             {cancelLabel ?? labels.cancel}
           </Button>
         )}
@@ -502,6 +538,7 @@ export function FormActions({
           // spinner would say it had not.
           commit={commit && !pending}
           aria-busy={pending || undefined}
+          className={cn(submitProps?.className, full)}
         >
           {pending ? (
             <Spinner label={null} className={glyphClass} />

package/src/components/full-bleed-dialog.tsx

@@ -10,6 +10,17 @@ import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useCloseTransition } from "../hooks/use-close-transition";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 
+/**
+ * The padding around the dialog's scrolling body, as a CSS length (0.32,
+ * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has
+ * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT
+ * box, so a pinned row sits this far short of the panel's edge unless it cancels it
+ * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px
+ * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:
+ * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.
+ */
+export const DIALOG_GUTTER = "0.75rem";
+
 /**
  * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way
  * to say "the props of this" and five call sites across keksdose and kastlan had already
@@ -246,12 +257,15 @@ export function FullBleedDialog({
             <X className="size-5" />
           </button>
         </div>
-        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose
-            on a phone (feedback #32). The body is the only thing that scrolls, so the
-            header stays put and the page underneath cannot move at all. */}
+        {/* DIALOG_GUTTER (0.75rem, the px-3 py-3 it was), not px-4: every pixel of
+            chrome here is width the form fields lose on a phone (feedback #32). The
+            body is the only thing that scrolls, so the header stays put and the page
+            underneath cannot move at all. */}
         {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that
             is pushed off the bottom edge. */}
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3">{children}</div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain" style={{ padding: DIALOG_GUTTER }}>
+          {children}
+        </div>
         {footer !== undefined && footer !== null && footer !== false && (
           <div
             data-full-bleed-footer=""

package/src/components/image-grid.tsx

@@ -139,7 +139,7 @@ export function ImageGrid({
                 onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}
                 className={cn(
                   "block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]",
-                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+                  "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
                   ASPECT_CLASS[aspect],
                 )}
               >