@robr0/design-system 0.14.0 → 0.16.0

package/components/CommandPalette/CommandPalette.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, useSyncExternalStore, useCallback, useMemo, useEffect } from "react";
+import { useState, useRef, useId, useCallback, useMemo, useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Kbd } from "../Kbd/Kbd.js";
 import "./CommandPalette.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 CommandPalette = ({
   open,
   onOpenChange,
@@ -28,10 +29,9 @@ const CommandPalette = ({
   const inputRef = useRef(null);
   const panelRef = useRef(null);
   const listRef = useRef(null);
-  const previousFocusRef = useRef(null);
   const generatedId = useId();
   const baseClass = "ds-command-palette";
-  const mounted = useSyncExternalStore(emptySubscribe, () => true, () => false);
+  const mounted = useMounted();
   const matches = useCallback(
     (command) => {
       const q = query.trim().toLowerCase();
@@ -68,54 +68,9 @@ const CommandPalette = ({
     document.addEventListener("keydown", handleHotkey);
     return () => document.removeEventListener("keydown", handleHotkey);
   }, [hotkey, open, onOpenChange]);
-  useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-      const raf = requestAnimationFrame(() => inputRef.current?.focus());
-      return () => cancelAnimationFrame(raf);
-    }
-    if (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]);
-  useEffect(() => {
-    if (!open) return;
-    const handleTrapKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onOpenChange(false);
-        return;
-      }
-      if (e.key === "Tab") {
-        const panel = panelRef.current;
-        if (!panel) return;
-        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", handleTrapKeyDown);
-    return () => document.removeEventListener("keydown", handleTrapKeyDown);
-  }, [open, onOpenChange]);
+  useLayer({ open, onDismiss: () => onOpenChange(false) });
+  useFocusScope(panelRef, { active: open, initialFocus: () => inputRef.current });
+  useScrollLock(open, { strategy: "cancel-events", allowWithin: listRef });
   const runCommand = (command) => {
     if (command.disabled) return;
     command.onSelect?.();

package/components/Composer/Composer.css

@@ -140,6 +140,24 @@
   }
 }
 
+/* Working: while a response streams, the ring stays lit and keeps turning
+   whether or not the field holds focus — the visible half of the `streaming`
+   contract for glowing composers. The pairing is defined in design.md's
+   Composer section; streaming without aiGlow changes nothing. */
+.ds-composer--ai-glow.ds-composer--streaming {
+  border-color: transparent;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::after {
+  opacity: 0.3;
+  animation-play-state: running;
+}
+
 /* Reduced motion: the ring and glow stay, the turning stops. */
 @media (prefers-reduced-motion: reduce) {
   .ds-composer--ai-glow::before,
@@ -148,6 +166,60 @@
   }
 }
 
+/* ============================================
+   CONTEXT CHIP
+   A full-width, non-interactive note at the very top of the shell — what
+   the model is currently looking at. Composer owns the chrome; the caller
+   passes the text.
+   ============================================ */
+
+.ds-composer__context {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  /* The action bar's tight --padding-sm ring, open toward the text below */
+  margin: var(--padding-sm) var(--padding-sm) 0;
+  /* ModelPicker's trigger geometry — the send button's height with the same
+     0/padding-md inset — so the chip and the bar's pills read as one family */
+  height: var(--ds-composer-send-size);
+  padding: 0 var(--padding-md);
+  background-color: var(--color-chat-context-bg);
+  /* A full pill, matching the suggestion chips around the composer */
+  border-radius: var(--radius-full);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  /* Tertiary, like DocumentChip's metadata line — the note is ambient
+     context, quieter than anything a person typed. The icon inherits it:
+     one tone for the whole note. */
+  color: var(--color-text-tertiary);
+  /* Not editable, not a control — but a click still falls through the shell
+     handler and focuses the textarea */
+  cursor: default;
+}
+
+.ds-composer__context-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-composer__context-icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-sm);
+}
+
+/* The text owns the truncation: one line, ellipsized only when the note
+   actually outgrows the shell — an ellipsis is a truncation mark, not
+   punctuation. The icon beside it never shrinks. */
+.ds-composer__context-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* ============================================
    ATTACHMENTS ROW
    ============================================ */

package/components/Composer/Composer.d.ts

@@ -21,7 +21,8 @@ type ComposerOwnProps = {
     onSubmit?: (value: string) => void;
     /**
      * A response is streaming: the send button becomes a stop button, submit
-     * is blocked, and Enter is inert.
+     * is blocked, and Enter is inert. On a glowing composer (`aiGlow`) the
+     * gradient ring also stays lit and keeps turning while this is true.
      */
     streaming?: boolean;
     /** Fires when the stop button is pressed while `streaming`. */
@@ -32,9 +33,26 @@ type ComposerOwnProps = {
      * While focused, the shell wears AiButton's slowly rotating gradient ring
      * and glow in place of the plain selected border — the system's "a model
      * answers here" signal, for composers whose messages are answered by one.
-     * Off by default.
+     * While `streaming`, the ring stays lit and turning whether or not the
+     * field holds focus. Off by default.
      */
     aiGlow?: boolean;
+    /**
+     * Contextual note rendered as a full-width, non-interactive chip at the
+     * very top of the shell, above any attachments — the "what the model is
+     * looking at" line a chat host pins over the message ("Looking at
+     * “Page name”"). One line: a note too long for the shell truncates with
+     * an ellipsis. Composer owns the chip's chrome; the caller passes the
+     * text.
+     */
+    context?: React.ReactNode;
+    /**
+     * Material Symbol name rendered at the left of the context chip
+     * (`visibility`, `article`…). Decorative and hidden from assistive
+     * technology — the chip's text carries the meaning. None by default,
+     * matching the ai set's icon-free-unless-asked convention.
+     */
+    contextIcon?: string;
     /**
      * Attachment row rendered above the textarea (DocumentChips). Fully
      * controlled by the caller — Composer never owns the list.
@@ -57,10 +75,11 @@ type ComposerOwnProps = {
 export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof ComposerOwnProps> {
 }
 /**
- * Composer is the chat input shell: an attachments row, an auto-growing
- * textarea, a leading actions slot, and a trailing send button — the one
- * sanctioned primary-action teal in the chat set, because sending a message
- * is a genuine primary CTA. While `streaming`, send becomes stop and Enter
+ * Composer is the chat input shell: an optional context note ("Looking at
+ * “Page name”"), an attachments row, an auto-growing textarea, a leading
+ * actions slot, and a trailing send button — the one sanctioned
+ * primary-action teal in the chat set, because sending a message is a
+ * genuine primary CTA. While `streaming`, send becomes stop and Enter
  * is inert.
  *
  * The textarea grows with its content up to `maxRows`, then scrolls

package/components/Composer/Composer.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useLayoutEffect } from "react";
 import { CircularButton } from "../CircularButton/CircularButton.js";
+import "../../fonts/material-symbols.css";
 import "./Composer.css";
 const Composer = React.forwardRef(
   ({
@@ -13,6 +14,8 @@ const Composer = React.forwardRef(
     onStop,
     maxRows = 8,
     aiGlow = false,
+    context,
+    contextIcon,
     attachments,
     actions,
     trailingActions,
@@ -77,6 +80,7 @@ const Composer = React.forwardRef(
     const classes = [
       baseClass,
       aiGlow ? `${baseClass}--ai-glow` : "",
+      streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
       className
     ].filter(Boolean).join(" ");
@@ -88,6 +92,10 @@ const Composer = React.forwardRef(
         style: { "--ds-composer-max-rows": maxRows },
         onClick: handleShellClick,
         children: [
+          context && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__context`, children: [
+            contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
+          ] }),
           attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
           /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
             "textarea",

package/components/ContributionGraph/ContributionGraph.css

@@ -79,6 +79,27 @@
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
+  /* The year sweeps in left to right on mount: each column's delay steps by
+     a fraction of the entrance duration (--ds-contribution-week, set inline
+     per column). Token-composed, so reduced motion collapses the sweep. */
+  animation: ds-contribution-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    backwards;
+  animation-delay: calc(
+    var(--ds-contribution-week, 0) * var(--motion-duration-slower) / 40
+  );
+}
+
+@keyframes ds-contribution-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Hover lifts the day under the pointer, so the title tooltip has a visible
+   anchor. */
+.ds-contribution-graph__week .ds-contribution-graph__cell:not(.ds-contribution-graph__cell--empty):hover {
+  outline: var(--border-xs) solid var(--color-text-tertiary);
+  outline-offset: calc(-1 * var(--border-xs));
 }
 
 .ds-contribution-graph__cell--empty {

package/components/ContributionGraph/ContributionGraph.js

@@ -112,16 +112,24 @@ const ContributionGraph = ({
             style: { gridTemplateColumns: columnTemplate },
             role: "img",
             "aria-label": caption ?? "Contribution activity",
-            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
-              (day, dayIndex) => day ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
-                  title: formatTooltip(day)
-                },
-                day.date
-              ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
-            ) }, weekIndex))
+            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ds-contribution-graph__week",
+                style: { "--ds-contribution-week": weekIndex },
+                children: week.map(
+                  (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
+                      title: formatTooltip(day)
+                    },
+                    day.date
+                  ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
+                )
+              },
+              weekIndex
+            ))
           }
         )
       ] }),

package/components/Dialog/Dialog.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId } from "react";
 import ReactDOM from "react-dom";
 import "./Dialog.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 Dialog = React.forwardRef(
   ({
     open,
@@ -21,7 +22,6 @@ const Dialog = React.forwardRef(
     ...rest
   }, ref) => {
     const panelRef = useRef(null);
-    const previousFocusRef = useRef(null);
     const titleId = useId();
     const descId = useId();
     const baseClass = "ds-dialog";
@@ -30,63 +30,10 @@ const Dialog = React.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    const mounted = useSyncExternalStore(
-      emptySubscribe,
-      () => true,
-      () => false
-    );
-    useEffect(() => {
-      if (open) {
-        previousFocusRef.current = document.activeElement;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (!open) return;
-      const panel = panelRef.current;
-      if (panel) {
-        const first = panel.querySelector(
-          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
-        ) ?? panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
-      }
-      const handleKeyDown = (e) => {
-        if (e.key === "Escape" && dismissible) {
-          onOpenChange(false);
-          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, dismissible, onOpenChange]);
-    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]);
+    const mounted = useMounted();
+    useLayer({ open, dismissOnEscape: dismissible, onDismiss: () => onOpenChange(false) });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
     const handleBackdropClick = () => {
       if (dismissible) onOpenChange(false);
     };

package/components/Drawer/Drawer.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useId, useSyncExternalStore, useEffect } from "react";
+import React, { useRef, useId } from "react";
 import ReactDOM from "react-dom";
 import "./Drawer.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 Drawer = React.forwardRef(
   ({
     open,
@@ -22,7 +23,6 @@ const Drawer = React.forwardRef(
     ...rest
   }, ref) => {
     const panelRef = useRef(null);
-    const previousFocusRef = useRef(null);
     const titleId = useId();
     const descId = useId();
     const baseClass = "ds-drawer";
@@ -31,63 +31,10 @@ const Drawer = React.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    const mounted = useSyncExternalStore(
-      emptySubscribe,
-      () => true,
-      () => false
-    );
-    useEffect(() => {
-      if (open) {
-        previousFocusRef.current = document.activeElement;
-      }
-    }, [open]);
-    useEffect(() => {
-      if (!open) return;
-      const panel = panelRef.current;
-      if (panel) {
-        const first = panel.querySelector(
-          "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
-        ) ?? panel.querySelector(FOCUSABLE);
-        (first ?? panel).focus();
-      }
-      const handleKeyDown = (e) => {
-        if (e.key === "Escape" && dismissible) {
-          onOpenChange(false);
-          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, dismissible, onOpenChange]);
-    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]);
+    const mounted = useMounted();
+    useLayer({ open, dismissOnEscape: dismissible, onDismiss: () => onOpenChange(false) });
+    useFocusScope(panelRef, { active: open });
+    useScrollLock(open);
     const handleScrimClick = () => {
       if (dismissible) onOpenChange(false);
     };

package/components/Dropdown/Dropdown.js

@@ -63,9 +63,10 @@ const Dropdown = React.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isOpen) return;
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [handleClickOutside]);
+    }, [isOpen, handleClickOutside]);
     const handleKeyDown = (e) => {
       if (disabled) return;
       switch (e.key) {

package/components/DropdownMenu/DropdownMenu.js

@@ -177,6 +177,7 @@ const DropdownMenu = ({
     setFocusedIndex(-1);
   }, []);
   useEffect(() => {
+    if (!isOpen) return;
     const handler = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
         handleClose();
@@ -184,7 +185,7 @@ const DropdownMenu = ({
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, [handleClose]);
+  }, [isOpen, handleClose]);
   const handleKeyDown = (e) => {
     switch (e.key) {
       case "Enter":
@@ -323,14 +324,21 @@ const DropdownMenu = ({
     size === "compact" ? `${baseClass}__panel--compact` : ""
   ].filter(Boolean).join(" ");
   const itemCounter = { count: 0 };
+  const triggerProps = React.isValidElement(trigger) ? trigger.props : void 0;
   return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
     /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? menuId : void 0,
       "aria-activedescendant": activeDescendantId,
-      onClick: handleToggle,
-      onKeyDown: handleKeyDown
+      onClick: (e) => {
+        triggerProps?.onClick?.(e);
+        handleToggle();
+      },
+      onKeyDown: (e) => {
+        triggerProps?.onKeyDown?.(e);
+        handleKeyDown(e);
+      }
     }) : /* @__PURE__ */ jsx(
       "button",
       {

package/components/Figure/Figure.css

@@ -47,15 +47,25 @@
    ZOOMABLE (has onClick)
    ============================================ */
 
-.ds-figure--zoomable {
+/* The zoom control is a real <button> wrapping the media (ARIA forbids
+   role="button" on <figure>), stripped back to a bare block. */
+.ds-figure__zoom {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
   cursor: zoom-in;
 }
 
-.ds-figure--zoomable:hover .ds-figure__media img {
+.ds-figure__zoom:hover .ds-figure__media img {
   opacity: 0.88;
 }
 
-.ds-figure--zoomable:focus-visible {
+/* Inset ring: the button sits inside the figure's overflow clip, so an
+   outset outline would be cropped away. */
+.ds-figure__zoom:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }

package/components/Figure/Figure.js

@@ -9,26 +9,17 @@ const Figure = ({
 }) => {
   const baseClass = "ds-figure";
   const classes = [baseClass, onClick && `${baseClass}--zoomable`, className].filter(Boolean).join(" ");
-  const onKeyDown = onClick ? (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onClick();
-    }
-  } : void 0;
-  return /* @__PURE__ */ jsxs(
-    "figure",
-    {
-      className: classes,
-      onClick,
-      onKeyDown,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children }),
-        caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
-      ]
-    }
-  );
+  const media = /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children });
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    onClick ? (
+      // A real button rather than role="button" on the figure: ARIA
+      // forbids the button role on <figure>, and the element brings
+      // Enter/Space activation itself. Its accessible name is the
+      // child image's alt text.
+      /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__zoom`, onClick, children: media })
+    ) : media,
+    caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+  ] });
 };
 export {
   Figure