@robr0/design-system 0.9.0 → 0.11.0

package/components/CodeBlock/CodeBlock.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useId } from "react";
+import { MOTION_FEEDBACK_RESET_MS } from "../../tokens/motion.js";
 import "./CodeBlock.css";
 import "../../fonts/material-symbols.css";
 const CodeBlock = ({
@@ -44,7 +45,7 @@ const CodeBlock = ({
       fallback();
     }
     setCopied(true);
-    window.setTimeout(() => setCopied(false), 2e3);
+    window.setTimeout(() => setCopied(false), MOTION_FEEDBACK_RESET_MS);
   };
   return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [

package/components/ColorPicker/ColorPicker.js

@@ -170,6 +170,16 @@ const ColorPicker = React.forwardRef(
           e.preventDefault();
           commit({ h, s, v: clamp(v - step, 0, 100), a });
           break;
+        // The slider pattern requires Home/End; they act on the horizontal
+        // (saturation) axis, matching the arrow keys above.
+        case "Home":
+          e.preventDefault();
+          commit({ h, s: 0, v, a });
+          break;
+        case "End":
+          e.preventDefault();
+          commit({ h, s: 100, v, a });
+          break;
       }
     };
     const displayHex = formatHex(hsva, showAlpha);

package/components/Combobox/Combobox.css

@@ -373,3 +373,12 @@
     animation: none;
   }
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-combobox .material-symbols-rounded {
+  color: inherit;
+}

package/components/CommandPalette/CommandPalette.css

@@ -294,3 +294,12 @@
     transition: none;
   }
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-command-palette .material-symbols-rounded {
+  color: inherit;
+}

package/components/CommandPalette/CommandPalette.js

@@ -7,6 +7,7 @@ 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"])';
 const CommandPalette = ({
   open,
   onOpenChange,
@@ -25,6 +26,7 @@ const CommandPalette = ({
   const [rawActiveIndex, setActiveIndex] = useState(0);
   const [prevOpen, setPrevOpen] = useState(open);
   const inputRef = useRef(null);
+  const panelRef = useRef(null);
   const listRef = useRef(null);
   const previousFocusRef = useRef(null);
   const generatedId = useId();
@@ -87,6 +89,33 @@ const CommandPalette = ({
       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]);
   const runCommand = (command) => {
     if (command.disabled) return;
     command.onSelect?.();
@@ -119,10 +148,6 @@ const CommandPalette = ({
         e.preventDefault();
         if (flatCommands[activeIndex]) runCommand(flatCommands[activeIndex]);
         break;
-      case "Escape":
-        e.preventDefault();
-        onOpenChange(false);
-        break;
     }
   };
   useEffect(() => {
@@ -148,6 +173,7 @@ const CommandPalette = ({
       "div",
       {
         className: `${baseClass}__panel`,
+        ref: panelRef,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Command palette",
@@ -186,7 +212,7 @@ const CommandPalette = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: `${baseClass}__list`, role: "listbox", id: listboxId, ref: listRef, children: [
             loading && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: "Loading…" }),
-            !loading && filteredGroups.length === 0 && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, children: emptyMessage }),
+            !loading && filteredGroups.length === 0 && /* @__PURE__ */ jsx("p", { className: `${baseClass}__status`, "aria-live": "polite", children: emptyMessage }),
             !loading && filteredGroups.map((group) => /* @__PURE__ */ jsxs(
               "div",
               {

package/components/Composer/Composer.css

@@ -3,7 +3,20 @@
    The chat input shell: attachments, auto-growing textarea, send/stop
    ============================================ */
 
+/* The focus treatment animates a registered custom property, exactly as
+   AiButton does: a conic gradient's angle cannot tween otherwise. Browsers
+   without @property render the ring at its initial angle, static — a
+   correct, quieter fallback. Registered under its own name so Composer
+   never depends on AiButton's stylesheet being loaded. */
+@property --ds-composer-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .ds-composer {
+  /* Anchors the focus ring and glow pseudo-elements */
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -36,6 +49,105 @@
   border-color: var(--color-input-border-selected);
 }
 
+/* ============================================
+   AI GLOW — opt-in via the `aiGlow` prop
+   While focused, the plain selected border stands down and the AI gradient
+   ring takes its place — the same "a model answers here" signal AiButton
+   carries, for composers whose messages are answered by a model.
+   ============================================ */
+
+.ds-composer--ai-glow:focus-within {
+  border-color: transparent;
+}
+
+/* The gradient ring: AiButton's treatment on the composer shell — a conic
+   gradient painted across the whole box, masked to the border band (two
+   fills, exclude-composited, inset by the border width). The gradient
+   repeats back to its start colour so the seam at 360° is invisible while
+   it turns. Negative inset lays the pseudo over the shell's own border
+   box, so the ring replaces the border exactly. */
+.ds-composer--ai-glow::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-xs));
+  border-radius: inherit;
+  /* One step up from the shell's --border-xs border: the outer edge stays on
+     the border box and the extra pixel grows inward, so the thicker band
+     reads clearly on low-density screens without changing the geometry. */
+  padding: var(--border-md);
+  background: conic-gradient(
+    from var(--ds-composer-glow-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)
+  );
+  /* Standard properties only — the build pipeline prefixes per its browser
+     targets, and hand-written -webkit- duplicates confuse its merging. */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): ambient signature rotation, matched to AiButton's —
+     deliberately far slower than the interaction-scale motion tokens */
+  animation: ds-composer-glow-turn 7s linear infinite paused;
+}
+
+/* The glow: the same gradient, blurred behind the opaque shell at low
+   opacity, so it reads as a halo around the border. A colour effect, not
+   an elevation shadow — depth stays token-owned. */
+.ds-composer--ai-glow::after {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-xs));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-composer-glow-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)
+  );
+  /* The glow's spread; a length with no token family, matched to AiButton. */
+  --ds-composer-glow: 14px;
+  filter: blur(var(--ds-composer-glow));
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): same ambient rotation as the ring, kept in phase */
+  animation: ds-composer-glow-turn 7s linear infinite paused;
+}
+
+.ds-composer--ai-glow:focus-within::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow:focus-within::after {
+  opacity: 0.3;
+  animation-play-state: running;
+}
+
+@keyframes ds-composer-glow-turn {
+  to {
+    --ds-composer-glow-angle: 360deg;
+  }
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-composer--ai-glow::before,
+  .ds-composer--ai-glow::after {
+    animation: none;
+  }
+}
+
 /* ============================================
    ATTACHMENTS ROW
    ============================================ */
@@ -175,6 +287,12 @@
   border-color: var(--color-input-border-disabled);
 }
 
+.ds-composer--disabled:focus-within::before,
+.ds-composer--disabled:focus-within::after {
+  opacity: 0;
+  animation-play-state: paused;
+}
+
 .ds-composer--disabled .ds-composer__textarea {
   cursor: not-allowed;
   color: var(--color-input-text-disabled);

package/components/Composer/Composer.d.ts

@@ -28,6 +28,13 @@ type ComposerOwnProps = {
     onStop?: () => void;
     /** Growth cap in text rows before the textarea scrolls internally. */
     maxRows?: number;
+    /**
+     * 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.
+     */
+    aiGlow?: boolean;
     /**
      * Attachment row rendered above the textarea (DocumentChips). Fully
      * controlled by the caller — Composer never owns the list.

package/components/Composer/Composer.js

@@ -12,6 +12,7 @@ const Composer = React.forwardRef(
     streaming = false,
     onStop,
     maxRows = 8,
+    aiGlow = false,
     attachments,
     actions,
     trailingActions,
@@ -73,7 +74,12 @@ const Composer = React.forwardRef(
       if (target.closest('button, a, textarea, input, select, [role="button"]')) return;
       textareaRef.current?.focus();
     };
-    const classes = [baseClass, disabled ? `${baseClass}--disabled` : "", className].filter(Boolean).join(" ");
+    const classes = [
+      baseClass,
+      aiGlow ? `${baseClass}--ai-glow` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
     const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
     return /* @__PURE__ */ jsxs(
       "div",

package/components/ContactCard/ContactCard.css

@@ -121,3 +121,12 @@
   color: var(--color-text-tertiary);
   flex-shrink: 0;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-contact-card .material-symbols-rounded {
+  color: inherit;
+}

package/components/ContextMenu/ContextMenu.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import React, { useState, useRef, useId, useCallback, useEffect, useLayoutEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 import "./ContextMenu.css";
 import "../../fonts/material-symbols.css";
 function collectItems(entries) {
@@ -15,7 +16,7 @@ function collectItems(entries) {
   }
   return result;
 }
-const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
+const SubMenuItem = ({ item, baseClass, itemId, focused, size, onActivate }) => {
   const [subOpen, setSubOpen] = useState(false);
   const timeoutRef = useRef(null);
   const handleMouseEnter = () => {
@@ -23,7 +24,7 @@ const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
     setSubOpen(true);
   };
   const handleMouseLeave = () => {
-    timeoutRef.current = setTimeout(() => setSubOpen(false), 150);
+    timeoutRef.current = setTimeout(() => setSubOpen(false), MOTION_HOVER_HIDE_DELAY_MS);
   };
   useEffect(() => {
     return () => {
@@ -45,6 +46,7 @@ const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
   return /* @__PURE__ */ jsxs(
     "li",
     {
+      id: itemId,
       className: classes,
       role: "menuitem",
       "aria-haspopup": "menu",
@@ -67,6 +69,7 @@ const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
           {
             entry,
             baseClass,
+            itemId: `${itemId}-sub-${index}`,
             size,
             onActivate
           },
@@ -79,6 +82,7 @@ const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
 const SubEntry = ({
   entry,
   baseClass,
+  itemId,
   size,
   onActivate
 }) => {
@@ -93,6 +97,7 @@ const SubEntry = ({
         {
           entry: subEntry,
           baseClass,
+          itemId: `${itemId}-sub-${subIndex}`,
           size,
           onActivate
         },
@@ -106,6 +111,7 @@ const SubEntry = ({
       {
         item: entry,
         baseClass,
+        itemId,
         focused: false,
         size,
         onActivate
@@ -120,6 +126,7 @@ const SubEntry = ({
   return /* @__PURE__ */ jsxs(
     "li",
     {
+      id: itemId,
       className: itemClasses,
       role: "menuitem",
       "aria-disabled": entry.disabled || void 0,
@@ -154,6 +161,8 @@ const ContextMenu = React.forwardRef(
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const rootRef = useRef(null);
     const panelRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const generatedId = useId();
     const baseClass = "ds-context-menu";
     const classes = [baseClass, className].filter(Boolean).join(" ");
     const isOpen = position !== null;
@@ -166,6 +175,11 @@ const ContextMenu = React.forwardRef(
     const handleClose = useCallback(() => {
       setPosition(null);
       setFocusedIndex(-1);
+      const previous = previousFocusRef.current;
+      previousFocusRef.current = null;
+      if (previous && document.contains(previous)) {
+        previous.focus();
+      }
     }, []);
     const handleContextMenu = (e) => {
       onContextMenu?.(e);
@@ -177,6 +191,9 @@ const ContextMenu = React.forwardRef(
         x = rect.left + rect.width / 2;
         y = rect.top + rect.height / 2;
       }
+      if (!isOpen) {
+        previousFocusRef.current = document.activeElement;
+      }
       setPosition({ x, y });
       setFocusedIndex(-1);
     };
@@ -248,6 +265,22 @@ const ContextMenu = React.forwardRef(
             return next >= 0 ? next : prev;
           });
           break;
+        case "Home":
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = 0;
+            while (next < flatItems.length && flatItems[next].disabled) next++;
+            return next < flatItems.length ? next : prev;
+          });
+          break;
+        case "End":
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = flatItems.length - 1;
+            while (next >= 0 && flatItems[next].disabled) next--;
+            return next >= 0 ? next : prev;
+          });
+          break;
         case "Escape":
         case "Tab":
           e.preventDefault();
@@ -276,6 +309,7 @@ const ContextMenu = React.forwardRef(
           {
             item: entry,
             baseClass,
+            itemId: `${generatedId}-item-${myIndex}`,
             focused: isFocused,
             size,
             onActivate: handleClose
@@ -292,6 +326,7 @@ const ContextMenu = React.forwardRef(
       return /* @__PURE__ */ jsxs(
         "li",
         {
+          id: `${generatedId}-item-${myIndex}`,
           className: itemClasses,
           role: "menuitem",
           "aria-disabled": entry.disabled || void 0,
@@ -333,6 +368,7 @@ const ContextMenu = React.forwardRef(
           className: panelClasses,
           role: "menu",
           "aria-label": ariaLabel,
+          "aria-activedescendant": focusedIndex >= 0 ? `${generatedId}-item-${focusedIndex}` : void 0,
           tabIndex: -1,
           ref: (el) => {
             panelRef.current = el;

package/components/DatePicker/DatePicker.js

@@ -29,6 +29,17 @@ function formatDate(date) {
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}-${m}-${d}`;
 }
+const visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
@@ -126,6 +137,11 @@ const DatePicker = React.forwardRef(
           }
         )
       ] }),
+      /* @__PURE__ */ jsxs("span", { "aria-live": "polite", style: visuallyHidden, children: [
+        MONTHS[viewMonth],
+        " ",
+        viewYear
+      ] }),
       /* @__PURE__ */ jsxs(
         "div",
         {

package/components/Dialog/Dialog.css

@@ -11,12 +11,14 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
+  visibility: hidden; /* keeps panel controls out of the tab order when closed */
   pointer-events: none;
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), visibility var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-dialog--open {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
 }
 

package/components/Dialog/Dialog.js

@@ -6,6 +6,7 @@ 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"])';
 const Dialog = React.forwardRef(
   ({
     open,
@@ -43,7 +44,9 @@ const Dialog = React.forwardRef(
       if (!open) return;
       const panel = panelRef.current;
       if (panel) {
-        const first = panel.querySelector("button, [href], input, select, textarea") ?? panel.querySelector('[tabindex]:not([tabindex="-1"])');
+        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) => {
@@ -52,9 +55,7 @@ const Dialog = React.forwardRef(
           return;
         }
         if (e.key === "Tab" && panel) {
-          const focusable = panel.querySelectorAll(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-          );
+          const focusable = panel.querySelectorAll(FOCUSABLE);
           if (focusable.length === 0) return;
           const first = focusable[0];
           const last = focusable[focusable.length - 1];

package/components/DocumentChip/DocumentChip.css

@@ -179,3 +179,12 @@
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: -2px;
 }
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-document-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/Dropdown/Dropdown.js

@@ -100,6 +100,21 @@ const Dropdown = React.forwardRef(
             });
           }
           break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            const first = flatOptions.findIndex((opt) => !opt.disabled);
+            if (first >= 0) setFocusedIndex(first);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            let last = flatOptions.length - 1;
+            while (last >= 0 && flatOptions[last].disabled) last--;
+            if (last >= 0) setFocusedIndex(last);
+          }
+          break;
         case "Escape":
           setIsOpen(false);
           break;
@@ -110,10 +125,11 @@ const Dropdown = React.forwardRef(
     };
     useEffect(() => {
       if (isOpen && focusedIndex >= 0 && listRef.current) {
-        const focusedEl = listRef.current.children[focusedIndex];
+        const focusedEl = document.getElementById(`${inputId}-option-${focusedIndex}`);
         focusedEl?.scrollIntoView({ block: "nearest" });
       }
-    }, [focusedIndex, isOpen]);
+    }, [focusedIndex, isOpen, inputId]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && flatOptions[focusedIndex] ? `${inputId}-option-${focusedIndex}` : void 0;
     return /* @__PURE__ */ jsxs(
       Field,
       {
@@ -137,7 +153,8 @@ const Dropdown = React.forwardRef(
               "aria-haspopup": "listbox",
               "aria-labelledby": label ? `${inputId}-label` : void 0,
               "aria-label": ariaLabel || rest["aria-label"] || (!label ? placeholder : void 0),
-              "aria-controls": `${inputId}-listbox`,
+              "aria-controls": isOpen ? `${inputId}-listbox` : void 0,
+              "aria-activedescendant": activeOptionId,
               "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
               "aria-invalid": error || void 0,
               tabIndex: disabled ? -1 : 0,
@@ -178,6 +195,7 @@ const Dropdown = React.forwardRef(
                         return /* @__PURE__ */ jsxs(
                           "li",
                           {
+                            id: `${inputId}-option-${myIndex}`,
                             className: [
                               `${baseClass}__option`,
                               option.value === value ? `${baseClass}__option--selected` : "",
@@ -210,6 +228,7 @@ const Dropdown = React.forwardRef(
               })() : options.map((option, index) => /* @__PURE__ */ jsxs(
                 "li",
                 {
+                  id: `${inputId}-option-${index}`,
                   className: [
                     `${baseClass}__option`,
                     option.value === value ? `${baseClass}__option--selected` : "",