@robr0/design-system 0.2.0 → 0.4.0

package/components/AgentStatus/AgentStatus.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./AgentStatus.css";
+const DOT_COUNT = 12;
+const DEFAULT_LABELS = {
+  idle: "Idle",
+  thinking: "Thinking",
+  working: "Working",
+  waiting: "Waiting for you",
+  done: "Done",
+  error: "Failed"
+};
+const ACTIVE_STATES = ["thinking", "working", "waiting"];
+const AgentStatus = React.forwardRef(
+  ({
+    state = "thinking",
+    label,
+    pattern = "orbit",
+    shimmer,
+    size = "sm",
+    variant = "inline",
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-agent-status";
+    const isActive = ACTIVE_STATES.includes(state);
+    const isShimmering = shimmer ?? isActive;
+    const classes = [
+      baseClass,
+      `${baseClass}--${state}`,
+      `${baseClass}--${pattern}`,
+      `${baseClass}--${size}`,
+      `${baseClass}--${variant}`,
+      isActive ? `${baseClass}--animated` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "status", children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__matrix`, "aria-hidden": "true", children: Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }, i)) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__label${isShimmering ? ` ${baseClass}__label--shimmer` : ""}`,
+          children: children ?? label ?? DEFAULT_LABELS[state]
+        }
+      )
+    ] });
+  }
+);
+AgentStatus.displayName = "AgentStatus";
+export {
+  AgentStatus
+};

package/components/AgentStatus/AgentStatusPatterns.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AgentStatus's vocabulary, kept out of the component file so that module
+ * exports only a component (react-refresh) — and exported rather than kept
+ * private so a consumer building a pattern picker, and this repo's own docs
+ * gallery, can iterate the list instead of restating it.
+ *
+ * `.tsx` despite holding no JSX: the barrel generator and the
+ * `./components/*` export subpath both address `.tsx`, so that extension is
+ * what makes this reachable as `@robr0/design-system/components/AgentStatus/AgentStatusPatterns`.
+ */
+/**
+ * The dot-matrix animations. Each pattern is a named choreography over the
+ * same 4x3 grid, so switching pattern never changes the indicator's footprint.
+ */
+export declare const agentStatusPatterns: readonly ["braille", "orbit", "breathe", "snake", "fill-sweep", "pulse", "columns", "checkerboard", "scan", "rain", "cascade", "sparkle", "wave-rows", "helix", "diagonal-swipe"];
+export type AgentStatusPattern = (typeof agentStatusPatterns)[number];
+export type AgentStatusState = 'idle' | 'thinking' | 'working' | 'waiting' | 'done' | 'error';

package/components/AgentStatus/AgentStatusPatterns.js

@@ -0,0 +1,20 @@
+const agentStatusPatterns = [
+  "braille",
+  "orbit",
+  "breathe",
+  "snake",
+  "fill-sweep",
+  "pulse",
+  "columns",
+  "checkerboard",
+  "scan",
+  "rain",
+  "cascade",
+  "sparkle",
+  "wave-rows",
+  "helix",
+  "diagonal-swipe"
+];
+export {
+  agentStatusPatterns
+};

package/components/AlertDialog/AlertDialog.css

@@ -81,11 +81,11 @@
    ============================================ */
 
 .ds-alert-dialog__title {
-  font-family: var(--font-heading-6-family);
-  font-size: var(--font-heading-6-size);
-  font-weight: var(--font-heading-6-weight);
-  line-height: var(--font-heading-6-line-height);
-  letter-spacing: var(--font-heading-6-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
   margin: 0;
 }

package/components/Avatar/Avatar.js

@@ -46,6 +46,7 @@ const Avatar = ({
       "span",
       {
         className: `${baseClass}__status ${baseClass}__status--${status}`,
+        role: "img",
         "aria-label": status
       }
     )

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -11,9 +11,15 @@ export interface BreadcrumbProps {
     maxItems?: number;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Accessible name for the nav landmark. Override when more than one
+     * Breadcrumb can appear on a page — identically-named landmarks are
+     * indistinguishable to assistive technology.
+     */
+    ariaLabel?: string;
 }
 /**
  * Breadcrumb shows the user's location within a page hierarchy.
  * Supports automatic collapsing of middle items when the list exceeds maxItems.
  */
-export declare const Breadcrumb: ({ items, maxItems, className, }: BreadcrumbProps) => import("react").JSX.Element;
+export declare const Breadcrumb: ({ items, maxItems, className, ariaLabel, }: BreadcrumbProps) => import("react").JSX.Element;

package/components/Breadcrumb/Breadcrumb.js

@@ -4,7 +4,8 @@ import "../../fonts/material-symbols.css";
 const Breadcrumb = ({
   items,
   maxItems,
-  className = ""
+  className = "",
+  ariaLabel
 }) => {
   const baseClass = "ds-breadcrumb";
   const classes = [baseClass, className].filter(Boolean).join(" ");
@@ -20,7 +21,7 @@ const Breadcrumb = ({
   } else {
     visibleItems = [...items];
   }
-  return /* @__PURE__ */ jsx("nav", { className: classes, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: visibleItems.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { className: classes, "aria-label": ariaLabel || "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__list`, children: visibleItems.map((item, index) => {
     const isLast = index === visibleItems.length - 1;
     if (item === "ellipsis") {
       return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, "aria-hidden": "true", children: [

package/components/Button/Button.css

@@ -371,6 +371,24 @@
   color: var(--color-status-error-bg);
 }
 
+/* ============================================
+   LOADING
+   Keeps the variant's full-colour appearance (no disabled dim);
+   the spinner occupies the left icon slot and inherits its colour.
+   ============================================ */
+
+.ds-button--loading {
+  cursor: progress;
+  pointer-events: none;
+}
+
+/* The generic icon-slot svg sizing must not distort the spinner —
+   it sizes itself from the Spinner size prop */
+.ds-button .ds-button__icon .ds-spinner__circle {
+  width: 100%;
+  height: 100%;
+}
+
 /* ============================================
    FOCUS
    ============================================ */

package/components/Button/Button.d.ts

@@ -13,6 +13,12 @@ type ButtonOwnProps = {
     size?: 'default' | 'compact';
     /** Whether the button is disabled */
     disabled?: boolean;
+    /**
+     * Shows a spinner in the left icon slot and blocks interaction while an
+     * async action runs. Keeps the variant's full-colour appearance (unlike
+     * `disabled`) and sets `aria-busy` on the rendered element.
+     */
+    loading?: boolean;
     /** Optional href — renders as <a> instead of <button> */
     href?: string;
     /** Optional target attribute for links */
@@ -23,9 +29,15 @@ type ButtonOwnProps = {
     ariaCurrent?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `variant` instead. */
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
     /**
+     * Documentation-only interaction state.
+     *
      * @deprecated Use `disabled` for the disabled state.
      *
      * Documentation-only affordance for rendering a *static* interaction state in
@@ -33,9 +45,15 @@ type ButtonOwnProps = {
      * pseudo-classes and needs no prop — for docs, prefer `className="ds-button--hover"`.
      */
     state?: 'default' | 'hover' | 'active' | 'disabled';
-    /** @deprecated Use `iconLeft` instead. */
+    /**
+     * Legacy alias for `iconLeft`.
+     *
+     * @deprecated Use `iconLeft` instead.
+     */
     icon?: string;
     /**
+     * Legacy toggle for showing the text label.
+     *
      * @deprecated Will be removed once `label` loses its default in the next major;
      * an icon-only button will simply omit `label`.
      */

package/components/Button/Button.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
+import { Spinner } from "../Spinner/Spinner.js";
 import "./Button.css";
 import "../../fonts/material-symbols.css";
 const Button = React.forwardRef(
@@ -10,6 +11,7 @@ const Button = React.forwardRef(
     variant,
     size = "default",
     disabled,
+    loading,
     href,
     target,
     rel,
@@ -25,27 +27,32 @@ const Button = React.forwardRef(
     const resolvedVariant = variant ?? priority ?? "primary";
     const isDisabled = disabled ?? state === "disabled";
     const resolvedState = state ?? (isDisabled ? "disabled" : "default");
+    const isLoading = Boolean(loading);
     const classes = [
       baseClass,
       `${baseClass}--${resolvedVariant}`,
       `${baseClass}--${resolvedState}`,
       `${baseClass}--${size}`,
+      isLoading && `${baseClass}--loading`,
       className
     ].filter(Boolean).join(" ");
     const iconClass = "material-symbols-rounded";
-    const leftIcon = iconLeft || icon;
+    const spinnerSize = size === "compact" ? "sm" : "md";
+    const leftIcon = isLoading ? /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, variant: "inherit" }) : iconLeft || icon;
     const renderIcon = (iconProp) => {
       if (typeof iconProp === "string") {
         return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon ${iconClass}`, "aria-hidden": "true", children: iconProp });
       }
       return /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: iconProp });
     };
+    const needsAccessibleName = !text || !label;
+    const fallbackAriaLabel = needsAccessibleName && label && !rest["aria-label"] ? label : void 0;
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
       leftIcon && renderIcon(leftIcon),
       text && /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label }),
       iconRight && renderIcon(iconRight)
     ] });
-    if (href && !isDisabled) {
+    if (href && !isDisabled && !isLoading) {
       return /* @__PURE__ */ jsx(
         "a",
         {
@@ -56,6 +63,7 @@ const Button = React.forwardRef(
           target,
           rel,
           "aria-current": ariaCurrent ? "page" : void 0,
+          "aria-label": fallbackAriaLabel ?? rest["aria-label"],
           children: content
         }
       );
@@ -67,7 +75,9 @@ const Button = React.forwardRef(
         ref,
         type: "button",
         className: classes,
-        disabled: isDisabled,
+        disabled: isDisabled || isLoading,
+        "aria-busy": isLoading || void 0,
+        "aria-label": fallbackAriaLabel ?? rest["aria-label"],
         children: content
       }
     );

package/components/ButtonGroup/ButtonGroup.js

@@ -17,15 +17,8 @@ const ButtonGroup = ({
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
         Button,
         {
-          priority: button.priority || "tertiary",
-          state: button.state || "default",
-          label: button.label,
-          iconLeft: button.iconLeft,
-          iconRight: button.iconRight,
-          icon: button.icon,
-          onClick: button.onClick,
-          href: button.href,
-          ariaCurrent: button.ariaCurrent
+          ...button,
+          variant: button.variant ?? button.priority ?? "tertiary"
         },
         index
       ))

package/components/Card/Card.css

@@ -25,6 +25,8 @@
 
   /* Interaction */
   transition: transform var(--motion-duration-slow) var(--motion-ease-standard), box-shadow var(--motion-duration-slow) var(--motion-ease-standard);
+  /* ds-allow(color): transparent resting state of the sanctioned Card
+     hover-lift shadow (see design.md — Do's and Don'ts). */
   box-shadow: 0 0 0 rgba(0, 0, 0, 0);
 }
 
@@ -34,6 +36,8 @@
 
 .ds-card--interactive:hover {
   transform: translateY(-4px);
+  /* ds-allow(color): the sanctioned Card hover-lift shadow — deliberately
+     heavier than --shadow-floating (see design.md — Do's and Don'ts). */
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
@@ -80,6 +84,8 @@
 
 .ds-card--case-study:hover {
   transform: translateY(-4px);
+  /* ds-allow(color): same sanctioned hover-lift shadow as the interactive
+     variant. */
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 

package/components/Checkbox/Checkbox.d.ts

@@ -15,11 +15,21 @@ type CheckboxOwnProps = {
     onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onCheckedChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
     onChange?: (checked: boolean) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
+     * Legacy form-field name.
+     *
      * @deprecated No-op. This component renders a `<div role="checkbox">`, not a
      * native `<input>`, so it cannot participate in native form submission.
      * Declared only so the attribute is not forwarded to an element that rejects it.
@@ -48,7 +58,11 @@ type CheckboxGroupOwnProps = {
     onValuesChange?: (values: string[]) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValuesChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValuesChange` instead.
+     */
     onChange?: (values: string[]) => void;
 };
 export interface CheckboxGroupProps extends CheckboxGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxGroupOwnProps> {

package/components/CircularButton/CircularButton.css

@@ -196,6 +196,17 @@
   background-color: var(--color-action-passive-bg-active);
 }
 
+/* ============================================
+   LOADING
+   Keeps the variant's full-colour appearance (no disabled dim);
+   the spinner replaces the icon and inherits its colour.
+   ============================================ */
+
+.ds-circular-button--loading {
+  cursor: progress;
+  pointer-events: none;
+}
+
 /* ============================================
    FOCUS
    ============================================ */

package/components/CircularButton/CircularButton.d.ts

@@ -1,12 +1,24 @@
 export interface CircularButtonProps {
     /** Material Symbol icon name */
     icon: string;
-    /** Button priority/variant */
+    /** Visual treatment */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
     priority?: 'primary' | 'secondary' | 'tertiary';
     /** Button state */
     state?: 'default' | 'hover' | 'active' | 'disabled';
     /** Button size */
     size?: 'default' | 'compact';
+    /**
+     * Shows a spinner in place of the icon and blocks interaction while an
+     * async action runs. Keeps the variant's full-colour appearance (unlike
+     * the disabled state) and sets `aria-busy` on the rendered element.
+     */
+    loading?: boolean;
     /** Accessible label */
     ariaLabel: string;
     /** Optional click handler */
@@ -25,6 +37,6 @@ export interface CircularButtonProps {
 /**
  * Circular icon button component.
  * A round button containing a single icon, available in
- * primary and secondary variants with default and compact sizes.
+ * primary, secondary and tertiary variants with default and compact sizes.
  */
-export declare const CircularButton: ({ icon, priority, state, size, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;
+export declare const CircularButton: ({ icon, variant, priority, state, size, loading, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;

package/components/CircularButton/CircularButton.js

@@ -1,11 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import { Spinner } from "../Spinner/Spinner.js";
 import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
 const CircularButton = ({
   icon,
-  priority = "primary",
+  variant,
+  priority,
   state = "default",
   size = "default",
+  loading,
   ariaLabel,
   onClick,
   href,
@@ -15,13 +18,22 @@ const CircularButton = ({
   className = ""
 }) => {
   const baseClass = "ds-circular-button";
-  const variantClass = `${baseClass}--${priority}`;
+  const resolvedVariant = variant ?? priority ?? "primary";
+  const variantClass = `${baseClass}--${resolvedVariant}`;
   const stateClass = `${baseClass}--${state}`;
   const sizeClass = `${baseClass}--${size}`;
-  const classes = [baseClass, variantClass, stateClass, sizeClass, className].filter(Boolean).join(" ");
+  const isLoading = Boolean(loading);
+  const classes = [
+    baseClass,
+    variantClass,
+    stateClass,
+    sizeClass,
+    isLoading && `${baseClass}--loading`,
+    className
+  ].filter(Boolean).join(" ");
   const isDisabled = state === "disabled";
-  const children = /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
-  if (href && !isDisabled) {
+  const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
+  if (href && !isDisabled && !isLoading) {
     return /* @__PURE__ */ jsx(
       "a",
       {
@@ -42,7 +54,8 @@ const CircularButton = ({
       type: "button",
       className: classes,
       onClick,
-      disabled: isDisabled,
+      disabled: isDisabled || isLoading,
+      "aria-busy": isLoading || void 0,
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby,
       children

package/components/CodeBlock/CodeBlock.js

@@ -77,7 +77,16 @@ const CodeBlock = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx("pre", { className: `${baseClass}__pre`, children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code }) }) }) })
+    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `${baseClass}__pre`,
+        tabIndex: collapsed ? -1 : 0,
+        role: "region",
+        "aria-label": filename ? `Code: ${filename}` : language ? `Code: ${language}` : "Code",
+        children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code })
+      }
+    ) }) })
   ] });
 };
 export {