@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/alert-banner.tsx

@@ -1,670 +0,0 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from "react";
-import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
-import { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from "../lib/focus-left";
-
-/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
- *  preview and beta-performance banners, which borrowed `warning` for want of it and
- *  so told every user of the preview build that something was wrong. */
-export type AlertTone = "danger" | "warning" | "info" | "success" | "neutral";
-
-/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total
- *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand
- *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two
- *  key states, goal-form). At body size those read as a second heading. */
-export type AlertSize = "sm" | "md";
-
-/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns
- * its own box (a Card, say) can take the tone alone. Single source for both
- * {@link alertFrameClass} and {@link toneFrameClass}.
- *
- * The colored tones are 2px, not 1px, and that is load-bearing rather than
- * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the
- * usual Windows setting — so whether it renders as a solid line or as two
- * half-lit pixels depends on where the box happens to land in device-pixel space.
- * The same card then shows a heavy left edge and a right edge that fades out,
- * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is
- * 2.5 device pixels: it always covers at least two pixels fully, on both edges,
- * at any offset. Callers compensate the extra pixel in their own padding so
- * switching tones never shifts the layout. */
-const TONE_FRAME: Record<AlertTone, string> = {
-  danger: "border-2 border-danger-strong bg-danger-soft",
-  warning: "border-2 border-warning bg-warning-soft",
-  info: "border-2 border-info bg-info-soft",
-  success: "border-2 border-success bg-success-soft",
-  neutral: "border border-subtle",
-};
-
-/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are
- *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that
- *  floats over one — keksdose's server-wake notice (#209) let the page's own text
- *  show through the one message whose job is to be read when nothing else makes
- *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it
- *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes
- *  without a second, opaque copy of every `-bg` token. */
-const TONE_ELEVATED: Record<AlertTone, string> = {
-  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
-  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
-  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
-  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]",
-  neutral: "",
-};
-const ELEVATED = "bg-surface shadow-lg";
-
-/** The tone's border + surface on their own — for a caller that already has a box
- * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
- * padding for the colored tones, whose border is 2px wide. */
-export function toneFrameClass(tone: AlertTone): string {
-  return TONE_FRAME[tone];
-}
-
-/** Single source for the warning-callout frame (feedback #277): the tone's border
- * and surface plus this component's own radius and padding, the latter
- * compensating the 2px colored border so toggling tones never shifts layout.
- *
- * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure
- * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,
- * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`
- * at 125 %, and toggling the tone shifted the layout again. */
-export function alertFrameClass(tone: AlertTone, size: AlertSize = "md"): string {
-  const box =
-    size === "sm"
-      ? tone === "neutral"
-        ? "rounded-md px-2.5 py-1.5"
-        : "rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]"
-      : tone === "neutral"
-        ? "rounded-md p-3"
-        : "rounded-md p-[calc(0.75rem-1px)]";
-  return `${box} ${TONE_FRAME[tone]}`;
-}
-
-/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM
- *  border, 1px — a strip is a band across the top of a page, and its one visible edge
- *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */
-function stripFrameClass(tone: AlertTone, size: AlertSize): string {
-  return cn(TONE_FRAME[tone], "rounded-none border-0 border-b", size === "sm" ? "px-4 py-1.5" : "px-4 py-2");
-}
-
-const TONE_TEXT: Record<AlertTone, string> = {
-  danger: "text-danger",
-  warning: "text-warning",
-  info: "text-info",
-  success: "text-success",
-  neutral: "text-secondary",
-};
-
-const TONE_ICON: Record<AlertTone, string> = {
-  danger: "text-danger",
-  warning: "text-warning",
-  info: "text-info",
-  success: "text-success",
-  neutral: "text-muted",
-};
-
-/** Which glyph a tone draws when the caller names none. The triangle belongs to the
- *  two tones that mean "something is wrong"; `info` and `neutral` get the ⓘ. That is
- *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a
- *  triangle with no colour is a warning that looks like a note — and a neutral note
- *  that draws no triangle is simply a note (lenkbank's "values are rounded"). */
-const TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {
-  danger: AlertTriangle,
-  warning: AlertTriangle,
-  info: Info,
-  success: CheckCircle2,
-  neutral: Info,
-};
-
-interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
-  /** Default `danger`. `info` for news, `neutral` for a plain note — see
-   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */
-  tone?: AlertTone;
-  /**
-   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role
-   * and NOTHING else — no border, no surface, no padding — so it fits inside a
-   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar
-   * shows "Radius below the minimum" and "Solving…" there; a box would have doubled
-   * the row's height every time either appeared.
-   *
-   * The inline variant is also a LIVE REGION by default — `role="alert"` for
-   * `danger`, `role="status"` for the rest — because a message that appears in a
-   * toolbar in answer to what the user just did is exactly the kind a screen reader
-   * otherwise never hears. The box stays role-less as it always was: it is usually
-   * page furniture present at load, and an alert that fires on every navigation is
-   * noise. Either way a `role` you pass wins.
-   *
-   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no
-   * radius, only a bottom border, content centred on one line, and usually an
-   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours
-   * tour-banner each built this by hand in amber or red Tailwind classes, with a
-   * separate dark: spelling apiece. Role-less like the box: it is page furniture.
-   */
-  variant?: "box" | "inline" | "strip";
-  /** See {@link AlertSize}. Default `md`. */
-  size?: AlertSize;
-  /**
-   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,
-   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,
-   * centred line it is by default. keksdose writes `className="flex"` on nearly every
-   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,
-   * guest-key-control:84) to get a line of its own under a total or a field, and a
-   * two-line hint there then centres its glyph between the lines.
-   *
-   * An option rather than the new default, because the inline-flex is load-bearing for
-   * the callers the variant was made for: lenkbank's corner-motion toolbar
-   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's
-   * import page and keksdose's rules page place it in a run of content — a block would
-   * take the whole row in the second kind, and top-align the first against a taller
-   * control. Ignored by `box` and `strip`, which are blocks already.
-   */
-  block?: boolean;
-  /**
-   * `false` opts an inline banner out of its live region (no `role="alert"` /
-   * `role="status"`), for a message that is static page content rather than the answer
-   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)
-   * renders "unresolved rows block the import" as part of the step, and as
-   * `role="alert"` a screen reader interrupted with it on every mount. A `role` you pass
-   * still wins. Default `true`; the box and the strip are role-less either way.
-   */
-  live?: boolean;
-  /**
-   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a
-   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`
-   * only; an inline message has no surface to raise.
-   */
-  elevated?: boolean;
-  /**
-   * A trailing control — the "Update payment method" button on kastlan's trial and
-   * past-due strips, the "Exit" on its tour strip. Sits at the end of the row,
-   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)
-   * it is rendered BESIDE the row's own link or button, as the × is, because
-   * interactive content may not nest.
-   */
-  action?: ReactNode;
-  /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
-   *  `null` draws none. Always decorative; the text carries the message. */
-  icon?: ReactNode;
-  /**
-   * Renders an × at the end that calls this. The banner does not hide itself — the
-   * caller removes it (and remembers that it did), as with every other kit control
-   * whose state is app state.
-   *
-   * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the
-   * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and
-   * the focus has nowhere else, it moves on to the next control after the banner — where
-   * Tab from the × would have gone — or, at the end of the page, the one before it; to
-   * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.
-   */
-  onDismiss?: () => void;
-  /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the
-   *  control the banner was about. Default: the next control after the banner. */
-  dismissFocusRef?: RefObject<HTMLElement | null>;
-  /** Accessible name of the ×. Default: `common.dismiss` from the
-   *  {@link UiKitProvider}, else "Dismiss". */
-  dismissLabel?: string;
-  /**
-   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,
-   * with a "More" / "Less" toggle after it (`aria-expanded`, `aria-controls` the message;
-   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only
-   * shows while the line actually cuts the message off.
-   *
-   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above
-   * every phone screen, and the app built the clamp and the button around the banner's
-   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot
-   * sit inside the row's own link or button.
-   *
-   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below
-   * `md`, so the {@link action} stays on its line rather than taking one of its own.
-   *
-   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in
-   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger
-   * past it is clipped out of sight and still takes the keyboard's focus, and "More" gives
-   * back the whole body at once. Shorten such a banner instead — one sentence, its action,
-   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).
-   */
-  clampMobile?: boolean;
-  /**
-   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.
-   *
-   * `own-line` (default): a line of its own under the message, lined up with it
-   * (kastlan 53 — a long message beside a long button squeezed into a column).
-   *
-   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the
-   * next line — for a short message and a short action, which a line of their own each
-   * would stack for nothing. keksdose dev #623: the budget card's "5 underfunded
-   * categories" + "Assign" built this with descendant overrides on the kit's classes.
-   * The basis is in rem, so it grows with the text size: at Large the action drops a
-   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works
-   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this
-   * already) and `inline`.
-   */
-  actionPlacement?: "own-line" | "flow";
-  children: ReactNode;
-  /**
-   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit
-   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or
-   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside
-   * that row, the `<div>` holding the two. Hence `HTMLElement`.
-   */
-  ref?: Ref<HTMLElement>;
-}
-
-/**
- * The whole-row modes. keksdose's budget-summary card is a banner you tap to open
- * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a
- * banner with a link inside it was a small target inside a big one that looked like
- * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one
- * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.
- *
- * With `onDismiss` as well, the × cannot go inside the button (interactive content
- * may not nest), so the frame becomes a wrapper holding two siblings: the row's
- * button, stretched over the whole frame, and the × on top of it. It still looks and
- * clicks like one banner with an × in its corner, and the two are separate tab stops.
- */
-export type AlertBannerProps = AlertBannerBaseProps &
-  (
-    | {
-        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */
-        href?: string;
-        onClick?: never;
-      }
-    | {
-        href?: never;
-        /** Makes the whole banner one button. Mutually exclusive with `href`. The
-         *  event's element is the `<button>`, not a `<div>`. */
-        onClick?: (event: MouseEvent<HTMLElement>) => void;
-      }
-  );
-
-/** Warning/danger/info callout box with the shared frame and an icon — or, with
- *  `variant="inline"`, the same message as a frameless line of toned text. */
-export function AlertBanner({
-  tone = "danger",
-  variant = "box",
-  size = "md",
-  block = false,
-  live = true,
-  elevated = false,
-  action,
-  icon,
-  onDismiss,
-  dismissFocusRef,
-  dismissLabel,
-  clampMobile = false,
-  actionPlacement = "own-line",
-  href,
-  onClick,
-  className,
-  children,
-  role,
-  ref,
-  ...rest
-}: AlertBannerProps) {
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
-  const inline = variant === "inline";
-  const strip = variant === "strip";
-  const sm = size === "sm";
-  const interactive = href !== undefined || onClick !== undefined;
-  // A block-laid inline banner behaves like a box for layout: a row that may wrap.
-  const inlineRow = inline && !block;
-  const resolvedRole = role ?? (inline && live ? (tone === "danger" ? "alert" : "status") : undefined);
-
-  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds
-  // it all (then there is nothing to show "More" of). Measured while collapsed — the
-  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box
-  // changes size, which a rotation or crossing `md` does. With no layout (a test, the
-  // server) the box is 0 tall, which reads as "may not fit": the toggle stays.
-  const clamp = clampMobile && !interactive;
-  const bodyId = useId();
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const [expanded, setExpanded] = useState(false);
-  const [fits, setFits] = useState(false);
-  useLayoutEffect(() => {
-    const el = bodyRef.current;
-    if (!clamp || expanded || !el) return;
-    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);
-    check();
-    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(check);
-    ro?.observe(el);
-    return () => ro?.disconnect();
-  }, [clamp, expanded, children]);
-
-  // The ×'s focus, once the caller has removed the banner (DSP-15). Where it can go is read
-  // at the press, while the banner still has a place in the page to measure from; whether
-  // it must is decided at the unmount, in the cleanup of a passive effect — after React has
-  // taken the banner's DOM away, when a focus that fell with it is on <body>.
-  const dismissedFrom = useRef<HTMLElement[] | null>(null);
-  const dismissTarget = useRef(dismissFocusRef);
-  useLayoutEffect(() => {
-    dismissTarget.current = dismissFocusRef;
-  });
-  // The note lives until the focus lands outside the banner (0.52 code review,
-  // alert-banner.tsx). A caller that keeps the banner — an async dismiss that failed, a
-  // snooze — left it standing, and the banner's unmount long after, a route change with
-  // the focus on <body>, sent the focus to a stop noted at the press, over the app's own
-  // handling of a new page. A `focusin` on the document, not a `focusout` on the banner:
-  // a browser that blurs a removed node would drop the note at the very removal it is for.
-  // The one `focusout` heard is a move to nothing — a click on the page — and only once a
-  // microtask has shown the × still in place (`whenFocusLeftForNothing`). A focus that
-  // stays on the × keeps the note, however late the removal: that is DSP-15's own case,
-  // an async dismiss whose request resolves.
-  const unwatchFocus = useRef<(() => void) | null>(null);
-  useEffect(
-    () => () => {
-      unwatchFocus.current?.();
-      const around = dismissedFrom.current;
-      if (!around || !focusIsLost()) return;
-      focusFirst([dismissTarget.current?.current, ...around]);
-    },
-    [],
-  );
-
-  const Glyph = TONE_GLYPH[tone];
-  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.
-  const nudge = inlineRow || strip ? undefined : sm ? "mt-px" : "mt-0.5";
-  const glyph =
-    icon === null ? null : icon !== undefined ? (
-      <span
-        aria-hidden
-        className={cn("flex shrink-0", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", nudge, TONE_ICON[tone])}
-      >
-        {icon}
-      </span>
-    ) : (
-      <Glyph aria-hidden className={cn(sm ? "size-3.5" : "size-4", "shrink-0", nudge, TONE_ICON[tone])} />
-    );
-
-  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a
-  // phone a long message plus an action would otherwise squeeze the text into a narrow
-  // column, so the action drops under it instead. A box may wrap its text, so it
-  // top-aligns and nudges the glyph onto the first line.
-  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box
-  // squeezed "Please confirm your email address…" into a ~100px column beside a
-  // "Resend verification email" button. There the action takes a line of its own under
-  // the message, and the × stays at the top end; from sm up the box is one row as before.
-  const boxAction = !inline && !strip && action !== undefined && action !== null;
-  // `flow` (0.48): glyph + message and the action in a row of their own that wraps
-  // below sm; the × stays outside it, at the top end.
-  const flow = boxAction && actionPlacement === "flow";
-  const boxWraps = boxAction && !flow;
-  const flowRow = cn("flex min-w-0 flex-1 items-center max-sm:flex-wrap", sm ? "gap-1.5" : "gap-2");
-  // The 10rem the message keeps beside the action before the action wraps.
-  const flowBasis = flow ? "max-sm:basis-40" : undefined;
-  const row = cn(
-    inlineRow
-      ? "inline-flex items-center"
-      : strip
-        ? "flex flex-wrap items-center gap-y-1"
-        : cn("flex items-start", boxWraps && "max-sm:flex-wrap max-sm:gap-y-2"),
-    sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm",
-  );
-  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,
-  // which never makes a wrapping row wrap — the action and the × squeezed the message
-  // into a three-word column on a phone instead. With a real basis the action drops to
-  // a second line once message + action no longer fit, and the message keeps the width.
-  const grow = strip ? "flex-[1_1_12rem]" : "flex-1";
-  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the
-  // message is one line whatever its width (the rest is behind "More"), so the 12rem only
-  // pushed the action under it: "Erneut senden" took a line of its own on a 390px phone,
-  // and kastlan's banner stood 71px where one line is 43. The clamp needs its "More" and
-  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured
-  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in
-  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest
-  // "Send again", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.
-  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.
-  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.
-  const clampBasis = strip && clamp ? "max-md:basis-28" : undefined;
-  // Inside a whole-row banner's button or link, which then carries `grow` itself.
-  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));
-  const frame = inline
-    ? ""
-    : cn(
-        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
-        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),
-      );
-  const focusRing = cn(FOCUS_RING, "focus-visible:ring-offset-1 focus-visible:ring-offset-surface");
-
-  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's
-  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was
-  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose
-  // `<a>` / `<button>` takes phrasing content only.
-  const Body = interactive ? "span" : "div";
-  const contentBody = clamp ? (
-    // Below `md` a row: the message, clamped, then the toggle on its baseline. From
-    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row
-    // banner, so always a `<div>`.)
-    <div
-      className={cn(
-        !inlineRow && grow,
-        clampBasis,
-        "min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2",
-      )}
-    >
-      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's
-          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}
-      <div
-        id={bodyId}
-        ref={bodyRef}
-        data-truncate-ok=""
-        className={cn("max-md:min-w-0", !expanded && "max-md:line-clamp-1")}
-      >
-        {children}
-      </div>
-      {(expanded || !fits) && (
-        <button
-          type="button"
-          aria-expanded={expanded}
-          aria-controls={bodyId}
-          onClick={() => setExpanded((v) => !v)}
-          className={cn(
-            "relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden",
-            focusRing,
-          )}
-        >
-          {expanded ? common.showLess : common.showMore}
-        </button>
-      )}
-    </div>
-  ) : (
-    <Body className={cn(!inlineRow && (nested ? "flex-1" : grow), "min-w-0 text-start")}>{children}</Body>
-  );
-  const content = (
-    <>
-      {glyph}
-      {contentBody}
-      {interactive && (
-        <ChevronRight
-          aria-hidden
-          className={cn(sm ? "size-3.5" : "size-4", "shrink-0 opacity-70 rtl:-scale-x-100", nudge)}
-        />
-      )}
-    </>
-  );
-
-  const dismiss = onDismiss ? (
-    <button
-      type="button"
-      aria-label={common.dismiss}
-      onClick={(e) => {
-        // A dismiss inside a whole-row banner must not also follow the row.
-        e.preventDefault();
-        e.stopPropagation();
-        const frame = e.currentTarget.parentElement;
-        // Only a × that holds the focus has one to lose (0.52 code review, alert-banner.tsx):
-        // Safari focuses no button on a click, nor on an iOS tap, and with the focus on
-        // <body> already the removal sent it on — a ring, on a form field the on-screen
-        // keyboard, on a page the user was reading with the pointer.
-        if (frame && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {
-          const { after, before } = tabStopsAround(frame);
-          dismissedFrom.current = [...after, ...before];
-          unwatchFocus.current?.();
-          const doc = frame.ownerDocument;
-          const forget = () => {
-            dismissedFrom.current = null;
-            unwatch();
-          };
-          const onFocusIn = (event: FocusEvent) => {
-            if (event.target instanceof Node && frame.contains(event.target)) return;
-            forget();
-          };
-          // Focus that left for nothing — a click on the page — took no `focusin` with it
-          // (0.52 code review): the user moved on all the same.
-          const onFocusOut = (event: FocusEvent) => {
-            whenFocusLeftForNothing(event, () => {
-              if (unwatchFocus.current === unwatch) forget();
-            });
-          };
-          const unwatch = () => {
-            doc.removeEventListener("focusin", onFocusIn, true);
-            frame.removeEventListener("focusout", onFocusOut);
-            unwatchFocus.current = null;
-          };
-          doc.addEventListener("focusin", onFocusIn, true);
-          frame.addEventListener("focusout", onFocusOut);
-          unwatchFocus.current = unwatch;
-        }
-        onDismiss();
-      }}
-      className={cn(
-        // Negative margins so the × does not make the box taller than its text; the
-        // hover wash takes the tone's own hue, so it works on every tone.
-        "relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10",
-        focusRing,
-      )}
-    >
-      <X aria-hidden className="size-4" />
-    </button>
-  ) : null;
-
-  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.
-  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px
-  // past a 360 px phone at Extra large (the demo strip's "Request access" and "Sign in",
-  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,
-  // nothing changes.
-  const trailing =
-    action !== undefined && action !== null ? (
-      <div
-        className={cn(
-          "relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2",
-          !strip && !inlineRow && "self-center",
-          (strip || flow) && "ms-auto",
-          // Last, on a line of its own, lined up with the message (past the glyph).
-          boxWraps && cn("max-sm:order-last max-sm:basis-full", glyph && (sm ? "max-sm:ps-5" : "max-sm:ps-6")),
-        )}
-      >
-        {action}
-      </div>
-    ) : null;
-
-  if (!interactive) {
-    return (
-      <div
-        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a
-        // test or a caller's selector, where the frame classes are the kit's to change.
-        data-tone={tone}
-        // Arbitrary attributes first — a `data-tour` anchor, a test id, an
-        // `aria-describedby` — then the layout and tone classes, which are merged
-        // through `cn` rather than spread so a caller's `className` refines the box
-        // instead of replacing it.
-        {...rest}
-        ref={ref as Ref<HTMLDivElement>}
-        role={resolvedRole}
-        className={cn(row, frame, TONE_TEXT[tone], className)}
-      >
-        {flow ? (
-          <>
-            <div className={flowRow} data-action-flow="">
-              {/* The glyph rides with the message, on its first line; the two are
-                  centred against the action as one, as the whole-row button is. */}
-              <div className={cn("flex min-w-0 flex-1 items-start", flowBasis, sm ? "gap-1.5" : "gap-2")}>
-                {glyph}
-                {contentBody}
-              </div>
-              {trailing}
-            </div>
-          </>
-        ) : (
-          <>
-            {content}
-            {trailing}
-          </>
-        )}
-        {dismiss}
-      </div>
-    );
-  }
-
-  const hover = "cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110";
-  // With a dismiss the frame is a wrapper and the row element is stretched over it;
-  // without one the row element IS the frame.
-  const split = dismiss !== null || trailing !== null;
-  const actionClass = split
-    ? cn(
-        "flex min-w-0 text-start",
-        grow,
-        flowBasis,
-        sm ? "gap-1.5" : "gap-2",
-        inlineRow || strip ? "items-center" : "items-start",
-        "outline-none after:absolute after:inset-0 after:content-['']",
-        strip ? "after:rounded-none" : "after:rounded-md",
-        "focus-visible:after:ring-focus focus-visible:after:ring-brand",
-      )
-    : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
-  // The div's attributes are the row element's: an `id`, a test id or an
-  // `aria-describedby` belongs on the thing that takes focus. The live-region role is
-  // NOT carried over — a button or a link that is also a `status` is neither.
-  const actionRest = split ? {} : rest;
-  // The `ref` goes with the rest: to the row element when it is the frame.
-  const rowRef = split ? undefined : ref;
-
-  const rowAction =
-    href !== undefined ? (
-      <a
-        data-tone={split ? undefined : tone}
-        {...(actionRest as ComponentPropsWithoutRef<"a">)}
-        ref={rowRef as Ref<HTMLAnchorElement> | undefined}
-        href={href}
-        className={actionClass}
-      >
-        {content}
-      </a>
-    ) : (
-      <button
-        data-tone={split ? undefined : tone}
-        {...(actionRest as ComponentPropsWithoutRef<"button">)}
-        ref={rowRef as Ref<HTMLButtonElement> | undefined}
-        type="button"
-        onClick={onClick}
-        className={actionClass}
-      >
-        {content}
-      </button>
-    );
-
-  if (!split) return rowAction;
-  return (
-    <div
-      data-tone={tone}
-      {...rest}
-      ref={ref as Ref<HTMLDivElement>}
-      role={resolvedRole}
-      className={cn("relative", row, frame, TONE_TEXT[tone], hover, className)}
-    >
-      {flow ? (
-        // Not positioned: the row's stretched `after:` target must still cover the frame.
-        <div className={flowRow} data-action-flow="">
-          {rowAction}
-          {trailing}
-        </div>
-      ) : (
-        <>
-          {rowAction}
-          {trailing}
-        </>
-      )}
-      {dismiss}
-    </div>
-  );
-}