@robr0/design-system 0.10.0 → 0.12.0

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` : "",

package/components/DropdownMenu/DropdownMenu.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useId, useCallback, useEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 import "./DropdownMenu.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 }) => {
           {
             entries: item.children,
             baseClass,
+            itemIdBase: `${itemId}-sub`,
             size,
             isSubmenu: true,
             onItemActivate: onActivate
@@ -79,6 +82,7 @@ const SubMenuItem = ({ item, baseClass, focused, size, onActivate }) => {
 const MenuPanel = ({
   entries,
   baseClass,
+  itemIdBase,
   size,
   isSubmenu = false,
   onItemActivate
@@ -88,14 +92,15 @@ const MenuPanel = ({
     isSubmenu ? `${baseClass}__submenu` : "",
     size === "compact" ? `${baseClass}__panel--compact` : ""
   ].filter(Boolean).join(" ");
-  const renderEntry = (entry, index) => {
+  const renderEntry = (entry, index, idBase) => {
+    const entryId = `${idBase}-${index}`;
     if (entry.type === "separator") {
       return /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" }, `sep-${index}`);
     }
     if (entry.type === "group") {
       return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "group", "aria-label": entry.label, children: [
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, children: entry.label }),
-        /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", children: entry.items.map((subEntry, subIndex) => renderEntry(subEntry, subIndex)) })
+        /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", children: entry.items.map((subEntry, subIndex) => renderEntry(subEntry, subIndex, entryId)) })
       ] }, `group-${index}`);
     }
     if (entry.children && entry.children.length > 0) {
@@ -104,6 +109,7 @@ const MenuPanel = ({
         {
           item: entry,
           baseClass,
+          itemId: entryId,
           focused: false,
           size,
           onActivate: onItemActivate
@@ -119,6 +125,7 @@ const MenuPanel = ({
     return /* @__PURE__ */ jsxs(
       "li",
       {
+        id: entryId,
         className: itemClasses,
         role: "menuitem",
         "aria-disabled": entry.disabled || void 0,
@@ -140,7 +147,7 @@ const MenuPanel = ({
       `item-${index}`
     );
   };
-  return /* @__PURE__ */ jsx("ul", { className: panelClasses, role: "menu", children: entries.map((entry, index) => renderEntry(entry, index)) });
+  return /* @__PURE__ */ jsx("ul", { className: panelClasses, role: "menu", children: entries.map((entry, index) => renderEntry(entry, index, itemIdBase)) });
 };
 const DropdownMenu = ({
   trigger,
@@ -153,9 +160,12 @@ const DropdownMenu = ({
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const rootRef = useRef(null);
   const panelRef = useRef(null);
+  const generatedId = useId();
   const baseClass = "ds-dropdown-menu";
   const classes = [baseClass, className].filter(Boolean).join(" ");
   const flatItems = collectItems(items);
+  const menuId = `${generatedId}-menu`;
+  const activeDescendantId = isOpen && focusedIndex >= 0 ? `${generatedId}-item-${focusedIndex}` : void 0;
   const handleToggle = () => {
     setIsOpen((prev) => {
       if (!prev) setFocusedIndex(-1);
@@ -214,6 +224,26 @@ const DropdownMenu = ({
           });
         }
         break;
+      case "Home":
+        if (isOpen) {
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = 0;
+            while (next < flatItems.length && flatItems[next].disabled) next++;
+            return next < flatItems.length ? next : prev;
+          });
+        }
+        break;
+      case "End":
+        if (isOpen) {
+          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":
         handleClose();
@@ -248,6 +278,7 @@ const DropdownMenu = ({
         {
           item: entry,
           baseClass,
+          itemId: `${generatedId}-item-${myIndex}`,
           focused: isFocused,
           size,
           onActivate: handleClose
@@ -264,6 +295,7 @@ const DropdownMenu = ({
     return /* @__PURE__ */ jsxs(
       "li",
       {
+        id: `${generatedId}-item-${myIndex}`,
         className: itemClasses,
         role: "menuitem",
         "aria-disabled": entry.disabled || void 0,
@@ -295,6 +327,8 @@ const DropdownMenu = ({
     /* @__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
     }) : /* @__PURE__ */ jsx(
@@ -303,6 +337,8 @@ const DropdownMenu = ({
         type: "button",
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
+        "aria-controls": isOpen ? menuId : void 0,
+        "aria-activedescendant": activeDescendantId,
         onClick: handleToggle,
         onKeyDown: handleKeyDown,
         children: trigger
@@ -311,6 +347,7 @@ const DropdownMenu = ({
     isOpen && /* @__PURE__ */ jsx(
       "ul",
       {
+        id: menuId,
         className: panelClasses,
         role: "menu",
         ref: (el) => {

package/components/EmptyState/EmptyState.css

@@ -113,3 +113,12 @@
   line-height: var(--font-paragraph-em-line-height);
   letter-spacing: var(--font-paragraph-em-letter-spacing);
 }
+
+/* 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-empty-state .material-symbols-rounded {
+  color: inherit;
+}

package/components/FileInput/FileInput.css

@@ -270,3 +270,12 @@
 .ds-file-input--compact .ds-file-input__file {
   padding: var(--padding-xs) var(--padding-sm); /* 6px 8px */
 }
+
+/* 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-file-input .material-symbols-rounded {
+  color: inherit;
+}

package/components/FunnelChart/FunnelChart.css

@@ -0,0 +1,41 @@
+/* ============================================
+   FUNNEL CHART COMPONENT
+   Side-by-side vertical bars stepping down with
+   each stage's share of the first. Geometry and
+   colour arrive per stage as inline custom
+   properties (--funnel-stage-size, a clamped
+   percentage number; --funnel-stage-color, a
+   chart-series token), so the rules here stay
+   token-only.
+   ============================================ */
+
+/* Base */
+
+.ds-funnel-chart {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+}
+
+/* Parts */
+
+.ds-funnel-chart__stage {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--funnel-stage-size) * 1%);
+  border-radius: var(--radius-sm);
+  background-color: var(--funnel-stage-color);
+  display: grid;
+  place-items: center;
+}
+
+.ds-funnel-chart__pct {
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-full);
+  padding: var(--padding-xxxs) var(--padding-xs);
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-caption-line-height);
+}

package/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+/** One stage of the funnel, ordered widest first. */
+export interface FunnelStage {
+    /** Stage name, read into the chart's accessible label. */
+    label: string;
+    /** Raw count for the stage — drives the bar's height as a share of the first stage. */
+    value: number;
+    /**
+     * Preformatted value ("96.4K") for the accessible label and any consumer
+     * legend. Falls back to the raw `value`, locale-formatted.
+     */
+    displayValue?: string;
+}
+/** Props owned by FunnelChart itself — everything else falls through to the root div. */
+type FunnelChartOwnProps = {
+    /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
+    data: FunnelStage[];
+    /** Chart height in pixels. */
+    height?: number;
+    /**
+     * Floor percentage for a stage's height, so steep drop-offs stay readable.
+     * Shares are clamped to the range from this floor up to 100.
+     */
+    minStageShare?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
+}
+/**
+ * FunnelChart — ordered stages as side-by-side vertical bars whose heights
+ * step down with each stage's share of the first, each carrying a centred
+ * percentage pill. Pure JSX and CSS computed from props: no recharts, no
+ * hooks, no browser APIs, so it deliberately omits 'use client' and renders
+ * from a Server Component. Degenerate data stays safe: an empty array
+ * renders an empty root, and a zero or negative first value draws every
+ * stage at the floor height.
+ */
+export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/FunnelChart/FunnelChart.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./FunnelChart.css";
+const SERIES_COUNT = 7;
+const FunnelChart = React.forwardRef(
+  ({ data, height = 190, minStageShare = 16, className = "", style, ...rest }, ref) => {
+    const baseClass = "ds-funnel-chart";
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const firstValue = data.length > 0 ? data[0].value : 0;
+    const clampShare = (share) => Math.min(Math.max(share, minStageShare), 100);
+    const stages = data.map((stage, i) => ({
+      ...stage,
+      share: clampShare(firstValue > 0 ? stage.value / firstValue * 100 : 0),
+      color: `var(--color-chart-series-${i % SERIES_COUNT + 1})`
+    }));
+    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.label} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        style: { ...style, height },
+        role: "img",
+        "aria-label": ariaLabel,
+        children: stages.map((stage, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${baseClass}__stage`,
+            style: {
+              "--funnel-stage-size": stage.share,
+              "--funnel-stage-color": stage.color
+            },
+            children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
+              Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
+              "%"
+            ] })
+          },
+          `${stage.label}-${i}`
+        ))
+      }
+    );
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+export {
+  FunnelChart
+};

package/components/Globe/Globe.css

@@ -0,0 +1,155 @@
+/* ============================================
+   GLOBE COMPONENT
+   An orthographic globe: graticule, markers and
+   great-circle arcs. Every colour is a token; the
+   stroke widths are SVG geometry in viewBox units,
+   like Sparkline's, and scale with the drawing.
+   ============================================ */
+
+/* Base */
+
+.ds-globe {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ds-globe:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-xxs);
+}
+
+.ds-globe--interactive {
+  cursor: grab;
+}
+
+.ds-globe--dragging {
+  cursor: grabbing;
+}
+
+.ds-globe__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Sphere */
+
+.ds-globe__limb {
+  fill: none;
+  stroke: var(--color-text-tertiary);
+  stroke-width: 1;
+  opacity: 0.6;
+}
+
+.ds-globe__graticule {
+  fill: none;
+  stroke: var(--color-divider);
+  stroke-width: 1;
+}
+
+.ds-globe__graticule-back {
+  fill: none;
+  stroke: var(--color-divider);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
+  opacity: 0.5;
+}
+
+/* Arcs — the default gradient runs along the cobalt-to-violet end of the
+   chart series; a per-arc `color` replaces it with a flat stroke. */
+
+.ds-globe__arc-stop-start {
+  stop-color: var(--color-chart-series-7);
+}
+
+.ds-globe__arc-stop-end {
+  stop-color: var(--color-chart-series-5);
+}
+
+.ds-globe__arc {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ds-globe__arc-back {
+  fill: none;
+  stroke-width: 1;
+  stroke-linecap: round;
+  opacity: 0.15;
+}
+
+/* Markers */
+
+.ds-globe__point {
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-globe__point--back {
+  opacity: 0.3;
+}
+
+.ds-globe__point--active,
+.ds-globe__point:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-globe__hit {
+  fill: transparent;
+  stroke: none;
+  pointer-events: all;
+}
+
+.ds-globe--interactive .ds-globe__point {
+  cursor: pointer;
+}
+
+.ds-globe__glyph {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized);
+}
+
+.ds-globe__point--active .ds-globe__glyph {
+  transform: scale(1.4);
+}
+
+.ds-globe__label {
+  font-family: var(--font-family-code);
+  font-size: var(--font-caption-size);
+  fill: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+.ds-globe__point--active .ds-globe__label {
+  fill: var(--color-text-primary);
+}
+
+/* Callout overlay — positioned at the marker, opening away from the centre. */
+
+.ds-globe__callout {
+  position: absolute;
+  pointer-events: none;
+  padding: 0 var(--padding-md);
+  transform: translate(0, -100%);
+  white-space: nowrap;
+}
+
+.ds-globe__callout[data-side='left'] {
+  transform: translate(-100%, -100%);
+}