@robr0/design-system 0.10.0 → 0.11.0

package/README.md

@@ -18,7 +18,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 | Part | Description |
 |---|---|
 | **Portfolio website** (`/website`) | Next.js app with case studies, work history, writing, and about pages, all built exclusively with the design system components below. **[Live site →](https://robertritacca.com/)** |
-| **Design system** (`/src`) | <!-- component-count -->101<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
+| **Design system** (`/src`) | <!-- component-count -->105<!-- /component-count --> React components, a three-tier token architecture, dark mode, a WebGL2 ambient background that themes itself from your tokens, and a full documentation site. Built to production standards. **[Storybook →](https://design-system-iota-one.vercel.app/?path=/docs/robr0-ds--docs)** |
 | **AI layer** (`ai` components in `/src`, chat in `/website`, `/evals`) | A site-wide chat that answers questions about the work: built from the library's own `ai` components, grounded in a corpus generated from the site's published content, and scored by a golden-set eval. |
 
 ---
@@ -28,7 +28,7 @@ The **live site** is the portfolio built on the design system. **Storybook** is
 ### Components
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Input · Instructions · Interrupt card · Kbd · Line chart · Link list · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
+Accordion · Agent plan · Agent status · AI button · Alert · Alert dialog · Anchor nav · App layout · App sidebar · Area chart · Avatar · Badge · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Globe · Input · Instructions · Interrupt card · Kbd · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Reasoning · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Sparkline · Spinner · Stacked bar chart · Stat · Stepper · Swatch · Table · Tabs · Tag input · Textarea · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Tooltip · Tree view · Treemap
 <!-- component-list:end -->
 
 ### Ambient background
@@ -50,7 +50,7 @@ Eight parameters describe the look, and a composition is a table of token names
 
 It asks two things of you, both deliberate. It fills a positioned ancestor you provide, because where a background sits is a layout decision rather than a rendering one. And it never decides what to paint instead of itself: it reports `pending`, `active` or `unavailable`, and one fallback covers every way it can fail (no WebGL2, a blocked or lost GPU context, a renderer that stalls before its first frame, or `enabled={false}` as a kill switch). `pending` is the state worth handling. Paint neither layer while the context comes up, or the swap a frame later reads as two backgrounds loading in sequence.
 
-It is also the one place a `prefers-reduced-motion` check lives in JavaScript rather than in the motion tokens, because the CSS guard cannot see a `requestAnimationFrame` loop. Set the preference and it draws a single static frame.
+It checks `prefers-reduced-motion` in JavaScript rather than through the motion tokens, because the CSS guard cannot see a JS-driven loop. Set the preference and it draws a single static frame.
 
 The background behind this site is that component, with eight blurred CSS discs kept painted underneath as its fallback. The **[component page](https://robertritacca.com/components/shader-field)** is a live demo, and the **[setup guide](https://robertritacca.com/docs/get-started)** has the wiring.
 
@@ -97,7 +97,7 @@ import { BarChart, LineChart } from '@robr0/design-system/charts';
   }
   ```
 
-Icons use a bundled Material Symbols Rounded variable font (woff2), with no extra setup. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
+Icons use a bundled Material Symbols Rounded variable font (woff2): components import it themselves, so they need no extra setup. If you render raw `.material-symbols-rounded` spans of your own, import `@robr0/design-system/fonts/material-symbols.css` once. Nunito Sans, the system's default typeface, is intentionally *not* bundled: load it yourself (e.g. Google Fonts or `next/font`) or override `--font-family-primary`.
 
 ### Token architecture
 
@@ -164,11 +164,12 @@ CI also guards against documentation drift: generated surfaces (this README's co
 ## Running locally
 
 ```bash
+npm install              # once, at the root: the website is an npm workspace, so this installs both
+
 # Storybook (the library's dev sandbox)
 npm run storybook        # http://localhost:6006
 
-# Portfolio + documentation website (npm workspace: install once at the root)
-npm install
+# Portfolio + documentation website
 npm run dev --workspace website   # http://localhost:3000
 ```
 

package/components/AgentPlan/AgentPlan.css

@@ -16,7 +16,8 @@
   width: 100%;
   background-color: var(--color-bg-container-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md);
+  /* The chat furniture's shared 24px shell — see ToolCall. */
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
@@ -29,7 +30,8 @@
   align-items: center;
   gap: var(--gap-sm);
   width: 100%;
-  padding: var(--padding-sm) var(--padding-md);
+  /* 20px sides — the card family's shared content inset. */
+  padding: var(--padding-sm) var(--padding-lg);
   background: none;
   border: none;
   text-align: left;
@@ -121,7 +123,7 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: var(--padding-sm-md) var(--padding-md);
+  padding: var(--padding-sm-md) var(--padding-lg);
   list-style: none;
 }
 
@@ -229,3 +231,12 @@
   white-space: nowrap;
   border: 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-agent-plan .material-symbols-rounded {
+  color: inherit;
+}

package/components/AiButton/AiButton.css

@@ -60,7 +60,7 @@
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  padding: var(--border-xs);
+  padding: var(--border-md);
   background: conic-gradient(
     from var(--ds-ai-button-angle),
     var(--color-ai-gradient-start),

package/components/Alert/Alert.css

@@ -250,3 +250,12 @@
 .ds-alert--neutral .ds-alert__dismiss {
   color: var(--color-status-neutral-text);
 }
+
+/* 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-alert .material-symbols-rounded {
+  color: inherit;
+}

package/components/AlertDialog/AlertDialog.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-alert-dialog--open {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
 }
 

package/components/AlertDialog/AlertDialog.js

@@ -7,6 +7,7 @@ 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"])';
 const AlertDialog = ({
   open,
   onOpenChange,
@@ -53,9 +54,7 @@ const AlertDialog = ({
         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/AppSidebar/AppSidebar.css

@@ -442,3 +442,12 @@
     padding: var(--padding-lg) 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-app-sidebar .material-symbols-rounded {
+  color: inherit;
+}

package/components/Card/Card.css

@@ -76,7 +76,9 @@
 .ds-card--case-study {
   height: auto;
   min-width: 0;
-  padding: 0;
+  /* The cover is inset, not full-bleed: 12px of card around a 12px-radius
+     cover keeps the corners concentric with the card's 24px shell. */
+  padding: var(--padding-sm-md);
   gap: 0;
   overflow: hidden;
   cursor: pointer;
@@ -103,6 +105,7 @@
   width: 100%;
   aspect-ratio: 940 / 480;
   overflow: hidden;
+  border-radius: var(--radius-md);
   background: var(--color-bg-container-secondary);
 }
 
@@ -142,7 +145,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm);
-  padding: var(--padding-lg);
+  /* 8px on top of the card's 12px inset: text lands 20px from the card edge
+     (the old full-bleed body padding) and sits slightly inside the cover. */
+  padding: var(--padding-md) var(--padding-sm) var(--padding-sm-md);
 }
 
 .ds-card--case-study__eyebrow {

package/components/CardStack/CardStack.css

@@ -0,0 +1,106 @@
+/* ============================================
+   CARD STACK COMPONENT
+   A deck showing one card, the rest peeking out
+   beneath. Forward flips lift the top card away;
+   backward flips drop it in from above. Depth
+   offsets are percentages of the card itself, so
+   the choreography scales with whatever card the
+   deck holds.
+   ============================================ */
+
+/* Base */
+
+.ds-card-stack {
+  /* How far each buried card peeks out below the one above it. */
+  --ds-card-stack-peek: var(--gap-md);
+
+  position: relative;
+  display: grid;
+  border-radius: var(--radius-xl);
+  padding-bottom: calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0));
+  outline: none;
+}
+
+.ds-card-stack:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-xxs);
+}
+
+/* Items — every card occupies the same cell; position is one transform. */
+
+.ds-card-stack__item {
+  grid-area: 1 / 1;
+  /* An opaque page-colour backing behind each card: the system's cards sit on
+     translucent surfaces, and without this the buried cards read through the
+     top one. Rounded to Card's radius; a deck of differently shaped cards
+     repoints --ds-card-stack-card-radius. */
+  background: var(--color-bg-page-primary);
+  border-radius: var(--ds-card-stack-card-radius, var(--radius-xl));
+  transform-origin: 50% 100%;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-pos, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-pos, 0)));
+  transition:
+    transform var(--motion-duration-deliberate) var(--motion-ease-emphasized),
+    opacity var(--motion-duration-deliberate) var(--motion-ease-emphasized);
+}
+
+/* Deeper than the visible peek: parked at the last slot, faded out. */
+.ds-card-stack__item--buried {
+  opacity: 0;
+  transform: translateY(calc(var(--ds-card-stack-peek) * var(--ds-card-stack-depth, 0)))
+    scale(calc(1 - 0.04 * var(--ds-card-stack-depth, 0)));
+}
+
+/* Flipped away with loop off: lifted out of view, above the deck. */
+.ds-card-stack__item--gone {
+  opacity: 0;
+  transform: translateY(-12%) scale(0.98);
+}
+
+/* Flip choreography — the lift is a fraction of the card's own height. */
+
+.ds-card-stack__item--leaving {
+  animation: ds-card-stack-leave var(--motion-duration-deliberate) var(--motion-ease-emphasized)
+    both;
+}
+
+.ds-card-stack__item--entering {
+  animation: ds-card-stack-enter var(--motion-duration-deliberate) var(--motion-ease-entrance)
+    both;
+}
+
+@keyframes ds-card-stack-leave {
+  from {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+}
+
+@keyframes ds-card-stack-enter {
+  from {
+    transform: translateY(-18%) rotate(-3deg) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Screen-reader announcement of the deck position. */
+
+.ds-card-stack__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/CardStack/CardStack.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by CardStack itself — everything else falls through to the root `<div>`. */
+type CardStackOwnProps = {
+    /** The cards, in order. The first child starts on top. */
+    children?: React.ReactNode;
+    /**
+     * Controlled top card, as an index into `children`. Pair with
+     * `onIndexChange`. Omit to let the stack own its position.
+     */
+    index?: number;
+    /** Initial top card when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires when the top card changes, with the new index. */
+    onIndexChange?: (index: number) => void;
+    /** How many card edges peek out behind the top card. */
+    peek?: number;
+    /** Wrap from the last card back to the first. Off, the stack stops at both ends. */
+    loop?: boolean;
+    /**
+     * Clicking the top card flips to the next. Clicks that land on a link or
+     * control inside the card are left alone, so a card can still carry its
+     * own actions.
+     */
+    advanceOnClick?: boolean;
+    /** Accessible name for the stack, e.g. "Open roles". */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CardStackProps extends CardStackOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CardStackOwnProps> {
+}
+/**
+ * CardStack — a deck of cards showing one at a time, the rest peeking out
+ * beneath it. Flipping forward lifts the top card up and away while the next
+ * one rises into place; flipping back drops the previous card in from above.
+ * The stack is the pattern, not the cards: any children work, Card and
+ * EntityCard are the intended fillings, and every card should share one size
+ * so the deck keeps its shape.
+ *
+ * Flip by clicking the top card, or with the arrow keys when the stack has
+ * focus. Cards behind the top one are inert until their turn.
+ */
+export declare const CardStack: React.ForwardRefExoticComponent<CardStackProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/CardStack/CardStack.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback } from "react";
+import "./CardStack.css";
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]';
+const NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown", " ", "Enter"]);
+const PREV_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const CardStack = React.forwardRef(
+  ({
+    children,
+    index: indexProp,
+    defaultIndex = 0,
+    onIndexChange,
+    peek = 2,
+    loop = true,
+    advanceOnClick = true,
+    label,
+    className = "",
+    onClick,
+    onKeyDown,
+    style,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-card-stack";
+    const items = React.Children.toArray(children);
+    const count = items.length;
+    const isControlled = indexProp !== void 0;
+    const [innerIndex, setInnerIndex] = useState(defaultIndex);
+    const index = Math.max(0, Math.min(isControlled ? indexProp : innerIndex, count - 1));
+    const [leaving, setLeaving] = useState(false);
+    const [entering, setEntering] = useState(false);
+    const pendingRef = useRef(null);
+    const commit = useCallback(
+      (next2) => {
+        const normalized = (next2 % count + count) % count;
+        if (!isControlled) setInnerIndex(normalized);
+        onIndexChange?.(normalized);
+      },
+      [count, isControlled, onIndexChange]
+    );
+    const next = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index >= count - 1) return;
+      pendingRef.current = index + 1;
+      setLeaving(true);
+    }, [count, leaving, entering, loop, index]);
+    const prev = useCallback(() => {
+      if (count < 2 || leaving || entering) return;
+      if (!loop && index <= 0) return;
+      commit(index - 1);
+      setEntering(true);
+    }, [count, leaving, entering, loop, index, commit]);
+    const handleTopAnimationEnd = (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (leaving) {
+        setLeaving(false);
+        if (pendingRef.current !== null) commit(pendingRef.current);
+        pendingRef.current = null;
+      }
+      if (entering) setEntering(false);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      if (!advanceOnClick || e.defaultPrevented) return;
+      const target = e.target;
+      const control = target.closest(INTERACTIVE_SELECTOR);
+      if (control && control !== e.currentTarget) return;
+      next();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || e.target !== e.currentTarget) return;
+      if (NEXT_KEYS.has(e.key)) {
+        e.preventDefault();
+        next();
+      } else if (PREV_KEYS.has(e.key)) {
+        e.preventDefault();
+        prev();
+      }
+    };
+    const visiblePeek = Math.max(0, Math.min(peek, count - 1));
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: "group",
+        "aria-roledescription": "card stack",
+        "aria-label": label,
+        tabIndex: count > 1 ? 0 : void 0,
+        style: { ...style, "--ds-card-stack-depth": visiblePeek },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          items.map((child, k) => {
+            const raw = k - index;
+            const pos = loop ? (raw % count + count) % count : raw;
+            const gone = pos < 0;
+            const buried = pos > visiblePeek;
+            const isTop = pos === 0;
+            const itemClasses = [
+              `${baseClass}__item`,
+              gone ? `${baseClass}__item--gone` : "",
+              buried ? `${baseClass}__item--buried` : "",
+              isTop && leaving ? `${baseClass}__item--leaving` : "",
+              isTop && entering ? `${baseClass}__item--entering` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: itemClasses,
+                style: {
+                  "--ds-card-stack-pos": gone ? 0 : Math.min(pos, visiblePeek),
+                  zIndex: count - pos
+                },
+                inert: !isTop || void 0,
+                "aria-hidden": !isTop || void 0,
+                onAnimationEnd: isTop ? handleTopAnimationEnd : void 0,
+                children: child
+              },
+              k
+            );
+          }),
+          count > 1 && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sr-only`, role: "status", children: [
+            "Card ",
+            index + 1,
+            " of ",
+            count
+          ] })
+        ]
+      }
+    );
+  }
+);
+CardStack.displayName = "CardStack";
+export {
+  CardStack
+};

package/components/Carousel/Carousel.css

@@ -110,3 +110,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-carousel .material-symbols-rounded {
+  color: inherit;
+}

package/components/Carousel/Carousel.js

@@ -1,14 +1,23 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useSyncExternalStore, useRef, useCallback, useEffect } from "react";
+import { MOTION_AUTOPLAY_INTERVAL_MS } from "../../tokens/motion.js";
 import "./Carousel.css";
 import "../../fonts/material-symbols.css";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (callback) => {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerReducedMotion = () => false;
 const Carousel = ({
   children,
   showDots = true,
   showArrows = true,
   autoPlay = false,
-  autoPlayInterval = 5e3,
+  autoPlayInterval = MOTION_AUTOPLAY_INTERVAL_MS,
   loop = false,
   onSlideChange,
   className = ""
@@ -17,6 +26,11 @@ const Carousel = ({
   const slideCount = slides.length;
   const [activeIndex, setActiveIndex] = useState(0);
   const [paused, setPaused] = useState(false);
+  const reducedMotion = useSyncExternalStore(
+    subscribeReducedMotion,
+    getReducedMotion,
+    getServerReducedMotion
+  );
   const containerRef = useRef(null);
   const baseClass = "ds-carousel";
   const goTo = useCallback(
@@ -35,10 +49,10 @@ const Carousel = ({
   const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);
   const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
   useEffect(() => {
-    if (!autoPlay || paused || slideCount <= 1) return;
+    if (!autoPlay || paused || reducedMotion || slideCount <= 1) return;
     const interval = setInterval(goNext, autoPlayInterval);
     return () => clearInterval(interval);
-  }, [autoPlay, paused, autoPlayInterval, goNext, slideCount]);
+  }, [autoPlay, paused, reducedMotion, autoPlayInterval, goNext, slideCount]);
   const handleKeyDown = (e) => {
     if (e.key === "ArrowLeft") {
       e.preventDefault();
@@ -48,6 +62,21 @@ const Carousel = ({
       goNext();
     }
   };
+  const handleDotKeyDown = (e, index) => {
+    let target;
+    if (e.key === "ArrowRight") {
+      target = loop ? (index + 1) % slideCount : Math.min(index + 1, slideCount - 1);
+    } else if (e.key === "ArrowLeft") {
+      target = loop ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0);
+    }
+    if (target === void 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    goTo(target);
+    const dotList = e.target.parentElement;
+    const dots = dotList?.querySelectorAll(`.${baseClass}__dot`);
+    dots?.[target]?.focus();
+  };
   const canGoPrev = loop || activeIndex > 0;
   const canGoNext = loop || activeIndex < slideCount - 1;
   const containerClasses = [baseClass, className].filter(Boolean).join(" ");
@@ -59,6 +88,8 @@ const Carousel = ({
       ref: containerRef,
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
       onKeyDown: handleKeyDown,
       role: "region",
       "aria-roledescription": "carousel",
@@ -111,8 +142,10 @@ const Carousel = ({
           {
             className: `${baseClass}__dot${index === activeIndex ? ` ${baseClass}__dot--active` : ""}`,
             onClick: () => goTo(index),
+            onKeyDown: (e) => handleDotKeyDown(e, index),
             role: "tab",
             "aria-selected": index === activeIndex,
+            tabIndex: index === activeIndex ? 0 : -1,
             "aria-label": `Go to slide ${index + 1}`,
             type: "button"
           },

package/components/Chart/AreaChart.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Area, Legend } from "recharts";
+import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -32,7 +33,7 @@ const AreaChart = ({
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
   const gridColor = getCSSVar("--color-divider", "#232323");
-  const defaultColor = getCSSVar("--color-action-primary-bg", "#0E6E8F");
+  const seriesColors = getChartSeriesColors();
   const renderTooltip = useCallback(
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),
@@ -50,8 +51,8 @@ const AreaChart = ({
       ] }, i)) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx("defs", { children: series.map((s) => {
-        const color = s.color || defaultColor;
+      /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+        const color = s.color || seriesColors[i % seriesColors.length];
         return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
           /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
           /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
@@ -76,13 +77,13 @@ const AreaChart = ({
         }
       ),
       /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s) => /* @__PURE__ */ jsx(
+      series.map((s, i) => /* @__PURE__ */ jsx(
         Area,
         {
           type: "monotone",
           dataKey: s.dataKey,
           name: s.label,
-          stroke: s.color || defaultColor,
+          stroke: s.color || seriesColors[i % seriesColors.length],
           strokeWidth: 2,
           fill: `url(#area-gradient-${s.dataKey})`,
           fillOpacity: s.fillOpacity ?? 1,