@robr0/design-system 0.15.0 → 0.16.0

package/components/AiButton/AiButton.css

@@ -38,6 +38,9 @@
   line-height: var(--font-paragraph-em-line-height);
   letter-spacing: var(--font-paragraph-em-letter-spacing);
   text-align: center;
+  /* A pill's label never wraps — a squeezed layout shortens around the
+     button, it doesn't fold the silhouette into two lines. */
+  white-space: nowrap;
 
   /* The field is transparent by design: the ring and glow are the button */
   background: transparent;
@@ -161,3 +164,327 @@
     animation: none;
   }
 }
+
+/* ============================================
+   THE SUMMARY PANEL
+   AiButton's TLDR surface: a frosted glass card
+   summoned above (or below) the button. The
+   button and panel share one hover zone — the
+   host — and the AI gradient sweeps once around
+   the panel's border as it opens, then fades to
+   the ordinary container border.
+   ============================================ */
+
+.ds-ai-button-host {
+  position: relative;
+  display: inline-flex;
+}
+
+/* The button acknowledges the panel's arrival with one gentle pulse. */
+.ds-ai-button-host--open .ds-ai-button {
+  animation: ds-ai-button-acknowledge var(--motion-duration-deliberate) var(--motion-ease-spring) both;
+}
+
+@keyframes ds-ai-button-acknowledge {
+  from {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.ds-ai-button__summary {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  /* Component-local lengths, chosen by eye like the button's glow: a
+     readable measure, capped so a phone viewport keeps its margins. */
+  --ds-ai-summary-width: 340px;
+  --ds-ai-summary-viewport-margin: 40px;
+  width: min(var(--ds-ai-summary-width), calc(100vw - var(--ds-ai-summary-viewport-margin)));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+
+  padding: var(--padding-lg);
+  border-radius: var(--radius-xl);
+  /* ds-allow(color): the light glass token reads solid on a floating card;
+     thinned so the page shows through the frost */
+  background: color-mix(in srgb, var(--color-bg-glass) 62%, transparent);
+  /* The frost: heavier than the 24px glass pairing so the blur reads
+     unmistakably over imagery — a component-local effect length, chosen by
+     eye. Standard property only: the build pipeline prefixes it, and a
+     hand-written -webkit- duplicate makes its merging drop the declaration. */
+  --ds-ai-summary-frost: 36px;
+  backdrop-filter: blur(var(--ds-ai-summary-frost)) saturate(1.5);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+
+  /* Mounted but resting: the closed state mirrors the pop's `from`, so
+     leaving transitions back down the same path the entrance sprang up.
+     visibility keeps the hidden panel out of the accessibility tree and
+     the tab order, the way HoverCard hides. */
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(10px) scale(0.9);
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-ai-button-host--open .ds-ai-button__summary {
+  visibility: visible;
+  opacity: 1;
+  transform: none;
+  animation: ds-ai-summary-pop var(--motion-duration-deliberate) var(--motion-ease-entrance) both;
+}
+
+/* Dark glass is already translucent; thinning it further puts body text
+   straight onto whatever bright imagery sits beneath. */
+[data-theme='dark'] .ds-ai-button__summary {
+  background: var(--color-bg-glass);
+}
+
+/* Placement: the panel grows out of the button, so its transform origin
+   points back at the button's side of the gap. */
+.ds-ai-button-host--top .ds-ai-button__summary {
+  bottom: calc(100% + var(--gap-sm));
+  transform-origin: calc(100% - 60px) calc(100% + 40px);
+}
+
+.ds-ai-button-host--bottom .ds-ai-button__summary {
+  top: calc(100% + var(--gap-sm));
+  transform-origin: calc(100% - 60px) -40px;
+  transform: translateY(-10px) scale(0.9);
+}
+
+.ds-ai-button-host--bottom.ds-ai-button-host--open .ds-ai-button__summary {
+  transform: none;
+}
+
+@keyframes ds-ai-summary-pop {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.ds-ai-button-host--bottom.ds-ai-button-host--open .ds-ai-button__summary {
+  animation-name: ds-ai-summary-pop-down;
+}
+
+@keyframes ds-ai-summary-pop-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* The opening signature: the AI gradient sweeps once around the whole
+   border — the button's masked conic ring, run as a single swoosh — then
+   fades away, leaving the regular border. The rotation animates a
+   registered custom property; without @property support the ring still
+   fades in and out, just without turning. */
+@property --ds-ai-summary-ring-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.ds-ai-button__summary::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-xs));
+  border-radius: var(--radius-xl);
+  padding: var(--border-md);
+  background: conic-gradient(
+    from var(--ds-ai-summary-ring-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.ds-ai-button-host--open .ds-ai-button__summary::before {
+  /* ds-allow(motion): one-shot signature sweep timed to the panel's
+     entrance, tuned by eye — it runs once, then the border is ordinary */
+  animation: ds-ai-summary-ring 1500ms var(--motion-ease-standard) both;
+  animation-delay: 100ms;
+}
+
+@keyframes ds-ai-summary-ring {
+  from {
+    --ds-ai-summary-ring-angle: 0deg;
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  65% {
+    opacity: 1;
+  }
+  to {
+    --ds-ai-summary-ring-angle: 360deg;
+    opacity: 0;
+  }
+}
+
+/* The content settles a beat behind the surface — each row fades up in
+   sequence, so the panel and its contents arrive as one gesture. */
+.ds-ai-button-host--open .ds-ai-button__summary-meta,
+.ds-ai-button-host--open .ds-ai-button__summary-title,
+.ds-ai-button-host--open .ds-ai-button__summary-text,
+.ds-ai-button-host--open .ds-ai-button__summary-actions {
+  animation: ds-ai-summary-rise var(--motion-duration-slow) var(--motion-ease-entrance) both;
+}
+
+/* ds-allow(motion): stagger offsets between rows, tuned by eye — the paced
+   durations themselves are the motion tokens above */
+.ds-ai-button-host--open .ds-ai-button__summary-meta { animation-delay: 80ms; }
+.ds-ai-button-host--open .ds-ai-button__summary-title { animation-delay: 130ms; }
+.ds-ai-button-host--open .ds-ai-button__summary-text { animation-delay: 180ms; }
+.ds-ai-button-host--open .ds-ai-button__summary-actions { animation-delay: 230ms; }
+
+@keyframes ds-ai-summary-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ds-ai-button__summary-dismiss {
+  position: absolute;
+  top: var(--gap-sm);
+  right: var(--gap-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Icon-button hit target — a component-local size, chosen by eye. */
+  --ds-ai-summary-dismiss-size: 28px;
+  width: var(--ds-ai-summary-dismiss-size);
+  height: var(--ds-ai-summary-dismiss-size);
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.ds-ai-button__summary-dismiss:hover {
+  background: var(--color-bg-container-secondary);
+  color: var(--color-text-primary);
+}
+
+.ds-ai-button__summary-dismiss .material-symbols-rounded {
+  font-size: var(--icon-size-sm);
+}
+
+.ds-ai-button__summary-meta {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-sm);
+  /* Keeps the row clear of the dismiss button in the corner. */
+  padding-right: var(--gap-xl);
+}
+
+.ds-ai-button__summary-overline {
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-secondary);
+}
+
+.ds-ai-button__summary-caption {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+}
+
+.ds-ai-button__summary-title {
+  /* Long titles wrap short of the dismiss corner. */
+  padding-right: var(--gap-lg);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-ai-button__summary-text {
+  display: block;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-secondary);
+  /* Seats the ghost/reveal stack below. */
+  position: relative;
+}
+
+/* During the type-out, an invisible ghost of the finished text sizes the
+   container and the stream paints over it — the panel takes its final
+   height the moment "generation" completes, and a short summary reserves
+   nothing it won't use. */
+.ds-ai-button__summary-text-ghost {
+  visibility: hidden;
+}
+
+.ds-ai-button__summary-text-reveal {
+  position: absolute;
+  inset: 0;
+}
+
+.ds-ai-button__summary-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  margin-top: var(--gap-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-ai-button-host--open .ds-ai-button,
+  .ds-ai-button-host--open .ds-ai-button__summary,
+  .ds-ai-button-host--open .ds-ai-button__summary::before,
+  .ds-ai-button-host--open .ds-ai-button__summary-meta,
+  .ds-ai-button-host--open .ds-ai-button__summary-title,
+  .ds-ai-button-host--open .ds-ai-button__summary-text,
+  .ds-ai-button-host--open .ds-ai-button__summary-actions {
+    animation: none;
+  }
+
+  .ds-ai-button__summary {
+    transition: none;
+  }
+}

package/components/AiButton/AiButton.d.ts

@@ -1,4 +1,18 @@
 import { default as React } from 'react';
+import { PromptSuggestion } from '../PromptSuggestions/PromptSuggestions';
+/** The content of AiButton's summary panel. */
+export interface AiButtonSummary {
+    /** Overline label above the title. */
+    overline?: string;
+    /** Title line — usually the page or subject being summarized. */
+    title: string;
+    /** Small caption beside the overline, e.g. a reading time. */
+    caption?: string;
+    /** The pre-written summary the panel reveals. */
+    text: string;
+    /** Prompt chips under the summary; a tap reports through `onSummarySuggestion`. */
+    suggestions?: PromptSuggestion[];
+}
 /** Props owned by AiButton itself — everything else falls through to the DOM node. */
 type AiButtonOwnProps = {
     /** Button text content */
@@ -15,6 +29,28 @@ type AiButtonOwnProps = {
     target?: string;
     /** Optional rel attribute for links */
     rel?: string;
+    /**
+     * A TLDR panel the button can summon: overline, title, a pre-written
+     * summary revealed through a skeleton beat and a typed stream (once per
+     * mount — later openings show it instantly, as if cached), and optional
+     * prompt chips. Hovering the button opens it after the standard hover
+     * delay; the pointer keeps it alive anywhere over the button or panel,
+     * and it hides a grace period after leaving both. Omit for the plain
+     * button.
+     */
+    summary?: AiButtonSummary;
+    /** Which side of the button the summary panel opens on. */
+    summaryPlacement?: 'top' | 'bottom';
+    /**
+     * Holds the summary panel open regardless of hover — for callers that
+     * reveal it on their own signal (scroll depth, dwell). Hover mechanics
+     * still run when it flips back off.
+     */
+    summaryPinned?: boolean;
+    /** Fires when the panel's dismiss button is pressed. The panel closes itself either way; hovering away and back re-summons it. */
+    onSummaryDismiss?: () => void;
+    /** Fires with the tapped summary suggestion's `id`. */
+    onSummarySuggestion?: (id: string) => void;
     /** Additional CSS classes */
     className?: string;
 };
@@ -28,6 +64,12 @@ export interface AiButtonProps extends AiButtonOwnProps, Omit<React.ComponentPro
  * and this ring is reserved for AI surfaces so neither affordance dilutes
  * the other.
  *
+ * With `summary`, the button can also summon a TLDR panel — a glass card
+ * that opens above (or below) it on hover or when pinned, fakes a one-time
+ * generation beat (skeleton, then a typed reveal), and offers prompt chips.
+ * The panel and button share one hover zone, and the gradient sweeps once
+ * around the panel's border as it opens.
+ *
  * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref
  * to whichever element it renders, and spreads unrecognised props onto it.
  * The rotation pauses under `prefers-reduced-motion`; the ring and glow stay.

package/components/AiButton/AiButton.js

@@ -1,6 +1,10 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
+import { PromptSuggestions } from "../PromptSuggestions/PromptSuggestions.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { StreamingText } from "../StreamingText/StreamingText.js";
+import { MOTION_SUMMARY_THINK_MS, MOTION_SUMMARY_REVEAL_MS, MOTION_HOVER_EXIT_GRACE_MS, MOTION_HOVER_SHOW_DELAY_MS } from "../../tokens/motion.js";
 import "./AiButton.css";
 import "../../fonts/material-symbols.css";
 const AiButton = React.forwardRef(
@@ -12,10 +16,67 @@ const AiButton = React.forwardRef(
     href,
     target,
     rel,
+    summary,
+    summaryPlacement = "top",
+    summaryPinned = false,
+    onSummaryDismiss,
+    onSummarySuggestion,
     className = "",
     ...rest
   }, ref) => {
     const baseClass = "ds-ai-button";
+    const [hoverOpen, setHoverOpen] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const [phase, setPhase] = useState("skeleton");
+    const generated = useRef(false);
+    const showTimer = useRef(null);
+    const hideTimer = useRef(null);
+    const panelOpen = Boolean(summary) && !disabled && !dismissed && (summaryPinned || hoverOpen);
+    useEffect(() => {
+      if (!panelOpen) return;
+      if (generated.current) {
+        setPhase("cached");
+        return;
+      }
+      setPhase("skeleton");
+      const t = window.setTimeout(() => {
+        generated.current = true;
+        setPhase("typing");
+      }, MOTION_SUMMARY_THINK_MS);
+      return () => window.clearTimeout(t);
+    }, [panelOpen]);
+    useEffect(
+      () => () => {
+        if (showTimer.current) window.clearTimeout(showTimer.current);
+        if (hideTimer.current) window.clearTimeout(hideTimer.current);
+      },
+      []
+    );
+    const hostEnter = () => {
+      if (hideTimer.current) {
+        window.clearTimeout(hideTimer.current);
+        hideTimer.current = null;
+      }
+      if (!hoverOpen && !showTimer.current) {
+        showTimer.current = window.setTimeout(() => {
+          showTimer.current = null;
+          setHoverOpen(true);
+        }, MOTION_HOVER_SHOW_DELAY_MS);
+      }
+    };
+    const hostLeave = () => {
+      setDismissed(false);
+      if (showTimer.current) {
+        window.clearTimeout(showTimer.current);
+        showTimer.current = null;
+      }
+      if (hoverOpen && !hideTimer.current) {
+        hideTimer.current = window.setTimeout(() => {
+          hideTimer.current = null;
+          setHoverOpen(false);
+        }, MOTION_HOVER_EXIT_GRACE_MS);
+      }
+    };
     const classes = [
       baseClass,
       `${baseClass}--${size}`,
@@ -26,21 +87,18 @@ const AiButton = React.forwardRef(
       icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon })),
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
     ] });
-    if (href && !disabled) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ...rest,
-          ref,
-          className: classes,
-          href,
-          target,
-          rel,
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
+    const control = href && !disabled ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        href,
+        target,
+        rel,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(
       "button",
       {
         ...rest,
@@ -51,6 +109,72 @@ const AiButton = React.forwardRef(
         children: content
       }
     );
+    if (!summary) return control;
+    const panelClass = `${baseClass}__summary`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          `${baseClass}-host`,
+          `${baseClass}-host--${summaryPlacement}`,
+          panelOpen && `${baseClass}-host--open`
+        ].filter(Boolean).join(" "),
+        onMouseEnter: hostEnter,
+        onMouseLeave: hostLeave,
+        children: [
+          control,
+          /* @__PURE__ */ jsxs("aside", { className: panelClass, "aria-label": `Summary: ${summary.title}`, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${panelClass}-dismiss`,
+                "aria-label": "Dismiss summary",
+                onClick: () => {
+                  setDismissed(true);
+                  setHoverOpen(false);
+                  onSummaryDismiss?.();
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: `${panelClass}-meta`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${panelClass}-overline`, children: summary.overline ?? "AI summary" }),
+              summary.caption && /* @__PURE__ */ jsx("span", { className: `${panelClass}-caption`, children: summary.caption })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: `${panelClass}-title`, children: summary.title }),
+            /* @__PURE__ */ jsx("span", { className: `${panelClass}-text`, children: phase === "skeleton" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 3 }) : phase === "typing" ? (
+              /* An invisible ghost of the finished text sizes the
+                 container, so the type-out never jumps the panel and a
+                 short summary leaves no reserved space behind it. */
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: `${panelClass}-text-ghost`, "aria-hidden": "true", children: summary.text }),
+                /* @__PURE__ */ jsx("span", { className: `${panelClass}-text-reveal`, children: /* @__PURE__ */ jsx(
+                  StreamingText,
+                  {
+                    text: summary.text,
+                    streaming: false,
+                    cursor: true,
+                    drainMs: MOTION_SUMMARY_REVEAL_MS,
+                    onRevealComplete: () => setPhase("cached")
+                  }
+                ) })
+              ] })
+            ) : summary.text }),
+            summary.suggestions && summary.suggestions.length > 0 && phase === "cached" && /* @__PURE__ */ jsx("span", { className: `${panelClass}-actions`, children: /* @__PURE__ */ jsx(
+              PromptSuggestions,
+              {
+                layout: "stack",
+                size: "compact",
+                ariaLabel: "Suggested prompts",
+                suggestions: summary.suggestions,
+                onValueChange: onSummarySuggestion
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
   }
 );
 AiButton.displayName = "AiButton";

package/components/AlertDialog/AlertDialog.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useId, useSyncExternalStore, useCallback, useEffect } from "react";
+import { useRef, useId, useCallback } from "react";
 import ReactDOM from "react-dom";
 import { Button } from "../Button/Button.js";
 import "./AlertDialog.css";
 import "../../fonts/material-symbols.css";
-const emptySubscribe = () => () => {
-};
-const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
 const AlertDialog = ({
   open,
   onOpenChange,
@@ -21,11 +22,10 @@ const AlertDialog = ({
   className = ""
 }) => {
   const panelRef = useRef(null);
-  const previousFocusRef = useRef(null);
   const titleId = useId();
   const descId = useId();
   const baseClass = "ds-alert-dialog";
-  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const mounted = useMounted();
   const handleCancel = useCallback(() => {
     onCancel?.();
     onOpenChange(false);
@@ -34,58 +34,12 @@ const AlertDialog = ({
     onConfirm?.();
     onOpenChange(false);
   }, [onConfirm, onOpenChange]);
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const panel = panelRef.current;
-    if (panel) {
-      const cancelBtn = panel.querySelector(
-        `.${baseClass}__actions button:first-child`
-      );
-      cancelBtn?.focus();
-    }
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        handleCancel();
-        return;
-      }
-      if (e.key === "Tab" && panel) {
-        const focusable = panel.querySelectorAll(FOCUSABLE);
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open, handleCancel]);
-  useEffect(() => {
-    if (!open && previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
+  useLayer({ open, onDismiss: handleCancel });
+  useFocusScope(panelRef, {
+    active: open,
+    initialFocus: () => panelRef.current?.querySelector(`.${baseClass}__actions button:first-child`) ?? null
+  });
+  useScrollLock(open);
   const variantClass = variant !== "default" ? `${baseClass}--${variant}` : "";
   const openClass = open ? `${baseClass}--open` : "";
   const containerClasses = [baseClass, variantClass, openClass, className].filter(Boolean).join(" ");
@@ -100,6 +54,7 @@ const AlertDialog = ({
         "aria-modal": "true",
         "aria-labelledby": titleId,
         "aria-describedby": description ? descId : void 0,
+        tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
             /* @__PURE__ */ jsx(

package/components/Button/Button.css

@@ -23,6 +23,9 @@
   line-height: var(--font-paragraph-em-line-height);
   letter-spacing: var(--font-paragraph-em-letter-spacing);
   text-align: center;
+  /* A pill's label never wraps — a squeezed layout shortens around the
+     button, it doesn't fold the silhouette into two lines. */
+  white-space: nowrap;
 
   /* Transitions */
   transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);