@robr0/design-system 0.9.0 → 0.11.0

package/components/SectionTitle/SectionTitle.js

@@ -4,9 +4,14 @@ import "./SectionTitle.css";
 function SectionTitle({
   title,
   trailing,
+  divider = true,
   className
 }) {
-  const classes = ["ds-section-title", className].filter(Boolean).join(" ");
+  const classes = [
+    "ds-section-title",
+    !divider && "ds-section-title--no-divider",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
     /* @__PURE__ */ jsx("h2", { className: "ds-section-title__heading", children: title }),
     trailing !== void 0 && trailing !== null && /* @__PURE__ */ jsx("span", { className: "ds-section-title__trailing", children: trailing })

package/components/SourceChip/SourceChip.css

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

package/components/Stat/Stat.css

@@ -76,3 +76,12 @@
 .ds-stat__delta--neutral {
   color: var(--color-text-tertiary);
 }
+
+/* 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-stat .material-symbols-rounded {
+  color: inherit;
+}

package/components/Stepper/Stepper.css

@@ -205,3 +205,12 @@ button.ds-stepper__content:hover .ds-stepper__label {
   height: auto;
   transform: translateX(-50%);
 }
+
+/* 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-stepper .material-symbols-rounded {
+  color: inherit;
+}

package/components/TagInput/TagInput.css

@@ -158,3 +158,12 @@
   line-height: var(--font-paragraph-sm-line-height);
   letter-spacing: var(--font-paragraph-sm-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-taginput .material-symbols-rounded {
+  color: inherit;
+}

package/components/TimePicker/TimePicker.js

@@ -158,6 +158,7 @@ const TimePicker = React.forwardRef(
         focusedEl?.scrollIntoView({ block: "nearest" });
       }
     }, [focusedIndex, isOpen]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && timeOptions[focusedIndex] ? `${inputId}-option-${focusedIndex}` : void 0;
     return /* @__PURE__ */ jsxs(
       Field,
       {
@@ -181,7 +182,8 @@ const TimePicker = React.forwardRef(
               className: `${baseClass}__trigger`,
               "aria-expanded": isOpen,
               "aria-haspopup": "listbox",
-              "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,
               disabled,
@@ -211,6 +213,7 @@ const TimePicker = React.forwardRef(
               children: timeOptions.map((option, index) => /* @__PURE__ */ jsxs(
                 "li",
                 {
+                  id: `${inputId}-option-${index}`,
                   className: [
                     `${baseClass}__option`,
                     option.value === selectedValue ? `${baseClass}__option--selected` : "",

package/components/Toast/Toast.css

@@ -1,11 +1,23 @@
 /* ============================================
    TOAST CONTAINER
    Fixed position stack for notifications
+
+   Consumer hooks (custom properties with fallbacks, so the defaults hold
+   until a consumer sets them): a page that keeps its own fixed chrome in a
+   corner (a chat launcher, a cookie bar, a docked panel) sets the matching
+   inset so toasts stack clear of it rather than on top of it, and raises
+   --ds-toast-z above its own overlay layers. Toasts are transient feedback
+   and must be seen; a launcher can be covered for five seconds.
+     --ds-toast-z             stacking order (default 200, the library's top)
+     --ds-toast-inset-top     gap from the top edge for top-* placements
+     --ds-toast-inset-bottom  gap from the bottom edge for bottom-* placements
+     --ds-toast-inset-left    gap from the left edge for *-left placements
+     --ds-toast-inset-right   gap from the right edge for *-right placements
    ============================================ */
 
 .ds-toast-container {
   position: fixed;
-  z-index: 200;
+  z-index: var(--ds-toast-z, 200);
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm); /* 8px */
@@ -14,38 +26,38 @@
 }
 
 .ds-toast-container--top-right {
-  top: 0;
-  right: 0;
+  top: var(--ds-toast-inset-top, 0);
+  right: var(--ds-toast-inset-right, 0);
   align-items: flex-end;
 }
 
 .ds-toast-container--top-left {
-  top: 0;
-  left: 0;
+  top: var(--ds-toast-inset-top, 0);
+  left: var(--ds-toast-inset-left, 0);
   align-items: flex-start;
 }
 
 .ds-toast-container--bottom-right {
-  bottom: 0;
-  right: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
+  right: var(--ds-toast-inset-right, 0);
   align-items: flex-end;
 }
 
 .ds-toast-container--bottom-left {
-  bottom: 0;
-  left: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
+  left: var(--ds-toast-inset-left, 0);
   align-items: flex-start;
 }
 
 .ds-toast-container--top-center {
-  top: 0;
+  top: var(--ds-toast-inset-top, 0);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 
 .ds-toast-container--bottom-center {
-  bottom: 0;
+  bottom: var(--ds-toast-inset-bottom, 0);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
@@ -340,3 +352,12 @@
     transform: scaleX(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-toast .material-symbols-rounded {
+  color: inherit;
+}

package/components/Toast/Toast.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useSyncExternalStore, useCallback, useContext, createContext, useRef, useEffect } from "react";
+import { MOTION_AUTO_DISMISS_MS } from "../../tokens/motion.js";
 import ReactDOM from "react-dom";
 import "./Toast.css";
 import "../../fonts/material-symbols.css";
@@ -62,8 +63,7 @@ const ToastItem = ({
     "div",
     {
       className: classes,
-      role: "status",
-      "aria-live": variant === "error" || variant === "warning" ? "assertive" : "polite",
+      role: variant === "error" || variant === "warning" ? "alert" : void 0,
       onMouseEnter: () => setPauseTimer(true),
       onMouseLeave: () => setPauseTimer(false),
       onFocus: () => setPauseTimer(true),
@@ -119,7 +119,7 @@ const ToastProvider = ({
         ...data,
         id,
         variant: data.variant || "info",
-        duration: data.duration ?? 5e3,
+        duration: data.duration ?? MOTION_AUTO_DISMISS_MS,
         dismissible: data.dismissible ?? true
       };
       setToasts((prev) => {
@@ -150,6 +150,7 @@ const ToastProvider = ({
           className: containerClasses,
           role: "region",
           "aria-label": "Notifications",
+          "aria-live": "polite",
           children: toasts.map((t) => /* @__PURE__ */ jsx(
             ToastItem,
             {
@@ -159,7 +160,7 @@ const ToastProvider = ({
               variant: t.variant || "info",
               dismissible: t.dismissible ?? true,
               icon: t.icon,
-              duration: t.duration ?? 5e3,
+              duration: t.duration ?? MOTION_AUTO_DISMISS_MS,
               onDismiss: dismiss
             },
             t.id

package/components/ToggleGroup/ToggleGroup.css

@@ -82,3 +82,12 @@
   opacity: 0.4;
   pointer-events: 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-toggle-group .material-symbols-rounded {
+  color: inherit;
+}

package/components/ToolCall/ToolCall.css

@@ -20,7 +20,10 @@
   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 shares one 24px shell with MessageCard and the
+     bubbles; a closed row rounds to a capsule the way a one-line bubble
+     does, echoing the system's pill buttons. */
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
@@ -33,7 +36,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;
@@ -181,7 +185,7 @@
 }
 
 .ds-tool-call--open .ds-tool-call__content {
-  padding: var(--padding-md);
+  padding: var(--padding-md) var(--padding-lg);
   border-top: var(--border-xs) solid var(--color-divider);
 }
 
@@ -202,8 +206,16 @@
 .ds-tool-call__actions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm-md) var(--padding-md);
-  border-top: var(--border-xs) solid var(--color-divider);
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
+}
+
+/* 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-tool-call .material-symbols-rounded {
+  color: inherit;
 }

package/components/Tooltip/Tooltip.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useId, isValidElement, cloneElement } from "react";
+import { useState, useRef, useId, useEffect, isValidElement, cloneElement } from "react";
 import "./Tooltip.css";
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 const Tooltip = ({
   children,
   content,
   position = "top",
-  showDelay = 300,
-  hideDelay = 150,
+  showDelay = MOTION_HOVER_SHOW_DELAY_MS,
+  hideDelay = MOTION_HOVER_HIDE_DELAY_MS,
   className = ""
 }) => {
   const [visible, setVisible] = useState(false);
@@ -23,6 +24,18 @@ const Tooltip = ({
     clearTimeout(showTimeoutRef.current);
     hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
   };
+  useEffect(() => {
+    if (!visible) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+        setVisible(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [visible]);
   const trigger = isValidElement(children) ? cloneElement(children, {
     "aria-describedby": tooltipId
   }) : children;
@@ -42,19 +55,10 @@ const Tooltip = ({
       onBlur: hide,
       children: [
         trigger,
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: panelClasses,
-            role: "tooltip",
-            id: tooltipId,
-            "aria-hidden": !visible,
-            children: [
-              content,
-              /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("span", { className: panelClasses, role: "tooltip", id: tooltipId, children: [
+          content,
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
+        ] })
       ]
     }
   );

package/components/registry.json

@@ -41,6 +41,11 @@
       "label": "Layout",
       "description": "Page scaffolding: app shells, sidebars, dividers, and section headings."
     },
+    {
+      "id": "maps",
+      "label": "Maps",
+      "description": "Geographic surfaces for showing where things are and what connects them, from the globe to its legend."
+    },
     {
       "id": "navigation",
       "label": "Navigation",
@@ -191,6 +196,14 @@
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "CardStack",
+      "label": "Card stack",
+      "slug": "card-stack",
+      "description": "A deck of cards showing one at a time, flipped through with a lift-and-settle animation.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Carousel",
       "label": "Carousel",
@@ -447,6 +460,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "Globe",
+      "label": "Globe",
+      "slug": "globe",
+      "description": "An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin.",
+      "category": "maps",
+      "client": true
+    },
     {
       "name": "Input",
       "label": "Input",
@@ -496,6 +517,22 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MapCallout",
+      "label": "Map callout",
+      "slug": "map-callout",
+      "description": "The annotation beside a map point: a name in capitals over monospace readout lines.",
+      "category": "maps",
+      "client": false
+    },
+    {
+      "name": "MapLegend",
+      "label": "Map legend",
+      "slug": "map-legend",
+      "description": "The corner block of a map: its name, what it shows, and the key to its markers.",
+      "category": "maps",
+      "client": false
+    },
     {
       "name": "MessageActions",
       "label": "Message actions",

package/components/registry.json.d.ts

@@ -41,6 +41,11 @@ declare const _default: {
       "label": "Layout",
       "description": "Page scaffolding: app shells, sidebars, dividers, and section headings."
     },
+    {
+      "id": "maps",
+      "label": "Maps",
+      "description": "Geographic surfaces for showing where things are and what connects them, from the globe to its legend."
+    },
     {
       "id": "navigation",
       "label": "Navigation",
@@ -191,6 +196,14 @@ declare const _default: {
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "CardStack",
+      "label": "Card stack",
+      "slug": "card-stack",
+      "description": "A deck of cards showing one at a time, flipped through with a lift-and-settle animation.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Carousel",
       "label": "Carousel",
@@ -447,6 +460,14 @@ declare const _default: {
       "category": "forms",
       "client": true
     },
+    {
+      "name": "Globe",
+      "label": "Globe",
+      "slug": "globe",
+      "description": "An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin.",
+      "category": "maps",
+      "client": true
+    },
     {
       "name": "Input",
       "label": "Input",
@@ -496,6 +517,22 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "MapCallout",
+      "label": "Map callout",
+      "slug": "map-callout",
+      "description": "The annotation beside a map point: a name in capitals over monospace readout lines.",
+      "category": "maps",
+      "client": false
+    },
+    {
+      "name": "MapLegend",
+      "label": "Map legend",
+      "slug": "map-legend",
+      "description": "The corner block of a map: its name, what it shows, and the key to its markers.",
+      "category": "maps",
+      "client": false
+    },
     {
       "name": "MessageActions",
       "label": "Message actions",

package/components/registry.json.js

@@ -1,5 +1,5 @@
-const categories = [{ "id": "actions", "label": "Actions", "description": "Buttons, button groups, and toggles for triggering actions and switching modes." }, { "id": "ai", "label": "AI", "description": "Chat, agent, and model surfaces for building AI products, from the composer to the reasoning trace and the diff an agent proposes." }, { "id": "charts", "label": "Charts", "description": "Data visualisation components for plotting series and activity over time." }, { "id": "data-display", "label": "Data display", "description": "Cards, tables, lists, and badges for presenting structured content." }, { "id": "effects", "label": "Effects", "description": "Ambient and decorative surfaces that sit behind or around the interface." }, { "id": "feedback", "label": "Feedback", "description": "Alerts, toasts, progress, and empty states that tell people what is happening." }, { "id": "forms", "label": "Forms", "description": "Inputs, pickers, and selection controls for collecting and editing values." }, { "id": "layout", "label": "Layout", "description": "Page scaffolding: app shells, sidebars, dividers, and section headings." }, { "id": "navigation", "label": "Navigation", "description": "Top bars, breadcrumbs, tabs, steppers, and pagination for moving through a product." }, { "id": "overlays", "label": "Overlays", "description": "Dialogs, drawers, menus, and tooltips that float above the page." }];
-const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentPlan","label":"Agent plan","slug":"agent-plan","description":"A collapsible checklist of an agent's task, with live step states and a progress readout.","category":"ai","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"AiButton","label":"AI button","slug":"ai-button","description":"The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AnchorNav","label":"Anchor nav","slug":"anchor-nav","description":"An on-page list of anchor links that tracks the reader's position and jumps between sections.","category":"navigation","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"AreaChart","label":"Area chart","slug":"area-chart","description":"Filled area chart for showing volume over time, with stacked and single-series variants.","category":"charts","client":false,"folder":"Chart"},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"BarChart","label":"Bar chart","slug":"bar-chart","description":"Vertical bars for comparing values across categories or time, with summary stats and tooltips.","category":"charts","client":false,"folder":"Chart"},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"ChatHeader","label":"Chat header","slug":"chat-header","description":"The top row of a chat surface, with the conversation title and its controls.","category":"ai","client":false},{"name":"ChatMarker","label":"Chat marker","slug":"chat-marker","description":"An inline conversation separator for date breaks and system notes.","category":"ai","client":false},{"name":"ChatMessage","label":"Chat message","slug":"chat-message","description":"A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.","category":"ai","client":false},{"name":"ChatThread","label":"Chat thread","slug":"chat-thread","description":"A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.","category":"ai","client":true},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"CodeDiff","label":"Code diff","slug":"code-diff","description":"Unified diff view for code changes, with added, removed, and context lines.","category":"ai","client":false},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"Composer","label":"Composer","slug":"composer","description":"An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.","category":"ai","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DataTable","label":"Data table","slug":"data-table","description":"The wired table: sorting, search, row selection, and pagination assembled around Table.","category":"data-display","client":true},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"DocumentChip","label":"Document chip","slug":"document-chip","description":"A compact file reference with a type icon, name, metadata, and optional remove.","category":"ai","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"EventCalendar","label":"Event calendar","slug":"event-calendar","description":"A month grid with event pills, overflow counts, and month navigation.","category":"data-display","client":true},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"InterruptCard","label":"Interrupt card","slug":"interrupt-card","description":"A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.","category":"ai","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LineChart","label":"Line chart","slug":"line-chart","description":"Multi-series line chart for trends over time, with per-series colours and a summary row.","category":"charts","client":false,"folder":"Chart"},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MessageActions","label":"Message actions","slug":"message-actions","description":"An icon-button row for message-level actions like copy, retry, and feedback.","category":"ai","client":false},{"name":"MessageCard","label":"Message card","slug":"message-card","description":"A structured rich-content card embedded in a chat message, with media, title, body, and actions.","category":"ai","client":false},{"name":"ModelPicker","label":"Model picker","slug":"model-picker","description":"A model selector for chat surfaces, with per-model descriptions and an optional effort row.","category":"ai","client":true},{"name":"Nav","label":"Nav","slug":"nav","description":"Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.","category":"navigation","client":false},{"name":"NavList","label":"Nav list","slug":"nav-list","description":"Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.","category":"navigation","client":true},{"name":"NotificationCenter","label":"Notification centre","slug":"notification-center","description":"A persistent notification inbox with unread count, filter tabs, and per-item actions.","category":"feedback","client":true},{"name":"NumberInput","label":"Number input","slug":"number-input","description":"Numeric field with increment and decrement steppers and min/max clamping.","category":"forms","client":true},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"PieChart","label":"Pie chart","slug":"pie-chart","description":"Proportional share of a whole as a pie or donut, with per-slice colours.","category":"charts","client":false,"folder":"Chart"},{"name":"PinInput","label":"Pin input","slug":"pin-input","description":"Segmented one-time-code input with auto-advance, paste support, and completion callback.","category":"forms","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"PromptSuggestions","label":"Prompt suggestions","slug":"prompt-suggestions","description":"A horizontal row of tappable prompt suggestions to start or steer a conversation.","category":"ai","client":false},{"name":"Prose","label":"Prose","slug":"prose","description":"Token-styled typography for rendered markdown and rich agent output.","category":"ai","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadarChart","label":"Radar chart","slug":"radar-chart","description":"Multi-axis comparison of series across categories on a radial grid.","category":"charts","client":false,"folder":"Chart"},{"name":"RadialChart","label":"Radial chart","slug":"radial-chart","description":"Concentric progress rings for completion and KPI readouts.","category":"charts","client":false,"folder":"Chart"},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"ScatterChart","label":"Scatter chart","slug":"scatter-chart","description":"Plots point clusters across two axes to show correlation and distribution.","category":"charts","client":false,"folder":"Chart"},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"ShaderField","label":"Shader field","slug":"shader-field","description":"An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.","category":"effects","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"SourceChip","label":"Source chip","slug":"source-chip","description":"A numbered citation pill linking a claim to its source.","category":"ai","client":false},{"name":"Sparkline","label":"Sparkline","slug":"sparkline","description":"Inline trend line for stats and table cells, drawn without axes or chrome.","category":"charts","client":false},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"StackedBarChart","label":"Stacked bar chart","slug":"stacked-bar-chart","description":"Bars split into stacked segments to compare totals and their composition.","category":"charts","client":false,"folder":"Chart"},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Stepper","label":"Stepper","slug":"stepper","description":"Step-by-step progress indicator for wizards and multi-stage flows.","category":"navigation","client":true},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"TagInput","label":"Tag input","slug":"tag-input","description":"Multi-value text input with entries held as removable tags.","category":"forms","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"TimePicker","label":"Time picker","slug":"time-picker","description":"Time-of-day field with a dropdown list of selectable times.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true},{"name":"TreeView","label":"Tree view","slug":"tree-view","description":"Collapsible hierarchy for files, folders, and nested structures.","category":"data-display","client":true},{"name":"Treemap","label":"Treemap","slug":"treemap","description":"Nested rectangles sized by value for part-to-whole breakdowns.","category":"charts","client":false,"folder":"Chart"}]`);
+const categories = [{ "id": "actions", "label": "Actions", "description": "Buttons, button groups, and toggles for triggering actions and switching modes." }, { "id": "ai", "label": "AI", "description": "Chat, agent, and model surfaces for building AI products, from the composer to the reasoning trace and the diff an agent proposes." }, { "id": "charts", "label": "Charts", "description": "Data visualisation components for plotting series and activity over time." }, { "id": "data-display", "label": "Data display", "description": "Cards, tables, lists, and badges for presenting structured content." }, { "id": "effects", "label": "Effects", "description": "Ambient and decorative surfaces that sit behind or around the interface." }, { "id": "feedback", "label": "Feedback", "description": "Alerts, toasts, progress, and empty states that tell people what is happening." }, { "id": "forms", "label": "Forms", "description": "Inputs, pickers, and selection controls for collecting and editing values." }, { "id": "layout", "label": "Layout", "description": "Page scaffolding: app shells, sidebars, dividers, and section headings." }, { "id": "maps", "label": "Maps", "description": "Geographic surfaces for showing where things are and what connects them, from the globe to its legend." }, { "id": "navigation", "label": "Navigation", "description": "Top bars, breadcrumbs, tabs, steppers, and pagination for moving through a product." }, { "id": "overlays", "label": "Overlays", "description": "Dialogs, drawers, menus, and tooltips that float above the page." }];
+const components = /* @__PURE__ */ JSON.parse(`[{"name":"Accordion","label":"Accordion","slug":"accordion","description":"Collapsible content sections for organising related information.","category":"data-display","client":true},{"name":"AgentPlan","label":"Agent plan","slug":"agent-plan","description":"A collapsible checklist of an agent's task, with live step states and a progress readout.","category":"ai","client":true},{"name":"AgentStatus","label":"Agent status","slug":"agent-status","description":"A dot-matrix indicator and status line reporting what an agent is doing right now.","category":"ai","client":true},{"name":"AiButton","label":"AI button","slug":"ai-button","description":"The AI entry point: icon and label on a transparent field, ringed by a slowly turning gradient and a soft glow.","category":"ai","client":true},{"name":"Alert","label":"Alert","slug":"alert","description":"Contextual feedback with status variants, optional dismiss, and compact sizing.","category":"feedback","client":false},{"name":"AlertDialog","label":"Alert dialog","slug":"alert-dialog","description":"Modal confirmation overlay with title, description, and confirm / cancel actions.","category":"overlays","client":true},{"name":"AnchorNav","label":"Anchor nav","slug":"anchor-nav","description":"An on-page list of anchor links that tracks the reader's position and jumps between sections.","category":"navigation","client":true},{"name":"AppLayout","label":"App layout","slug":"app-layout","description":"Full-page template pairing the collapsible App sidebar with a centred content area.","category":"layout","client":true},{"name":"AppSidebar","label":"App sidebar","slug":"app-sidebar","description":"Collapsible navigation rail with accordion sub-items, category headings, and profile section.","category":"layout","client":true},{"name":"AreaChart","label":"Area chart","slug":"area-chart","description":"Filled area chart for showing volume over time, with stacked and single-series variants.","category":"charts","client":false,"folder":"Chart"},{"name":"Avatar","label":"Avatar","slug":"avatar","description":"User profile image with initials and icon fallback, status indicator, and multiple sizes.","category":"data-display","client":true},{"name":"Badge","label":"Badge","slug":"badge","description":"Small inline status labels with info, positive, warning, error, and neutral variants.","category":"data-display","client":false},{"name":"BarChart","label":"Bar chart","slug":"bar-chart","description":"Vertical bars for comparing values across categories or time, with summary stats and tooltips.","category":"charts","client":false,"folder":"Chart"},{"name":"Breadcrumb","label":"Breadcrumb","slug":"breadcrumb","description":"Hierarchical navigation trail showing the user's location within the site.","category":"navigation","client":false},{"name":"Button","label":"Button","slug":"button","description":"Primary and secondary button variants in default and compact sizes, with icon support and multiple states.","category":"actions","client":true},{"name":"ButtonGroup","label":"Button group","slug":"button-group","description":"Horizontal and vertical button group layouts for related actions and navigation patterns.","category":"actions","client":false},{"name":"Card","label":"Card","slug":"card","description":"Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.","category":"data-display","client":true},{"name":"CardStack","label":"Card stack","slug":"card-stack","description":"A deck of cards showing one at a time, flipped through with a lift-and-settle animation.","category":"data-display","client":true},{"name":"Carousel","label":"Carousel","slug":"carousel","description":"Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.","category":"data-display","client":true},{"name":"ChatHeader","label":"Chat header","slug":"chat-header","description":"The top row of a chat surface, with the conversation title and its controls.","category":"ai","client":false},{"name":"ChatMarker","label":"Chat marker","slug":"chat-marker","description":"An inline conversation separator for date breaks and system notes.","category":"ai","client":false},{"name":"ChatMessage","label":"Chat message","slug":"chat-message","description":"A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role.","category":"ai","client":false},{"name":"ChatThread","label":"Chat thread","slug":"chat-thread","description":"A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar.","category":"ai","client":true},{"name":"Checkbox","label":"Checkbox","slug":"checkbox","description":"Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.","category":"forms","client":true},{"name":"Chip","label":"Chip","slug":"chip","description":"Compact pills for attributes, filters, and inline metadata.","category":"data-display","client":false},{"name":"CircularButton","label":"Circular button","slug":"circular-button","description":"Round icon button with primary and secondary variants, default and compact sizes.","category":"actions","client":false},{"name":"CodeBlock","label":"Code block","slug":"code-block","description":"Monospace code with a header and one-click copy.","category":"data-display","client":true},{"name":"CodeDiff","label":"Code diff","slug":"code-diff","description":"Unified diff view for code changes, with added, removed, and context lines.","category":"ai","client":false},{"name":"ColorPicker","label":"Colour picker","slug":"color-picker","description":"Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.","category":"forms","client":true},{"name":"Combobox","label":"Combobox","slug":"combobox","description":"A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.","category":"forms","client":true},{"name":"CommandPalette","label":"Command palette","slug":"command-palette","description":"A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.","category":"overlays","client":true},{"name":"Composer","label":"Composer","slug":"composer","description":"An auto-growing message input with send and stop states, an attachment slot, and Enter-to-send.","category":"ai","client":true},{"name":"ContactCard","label":"Contact card","slug":"contact-card","description":"Linked contact method with icon, label, and value.","category":"data-display","client":true},{"name":"ContextMenu","label":"Context menu","slug":"context-menu","description":"Right-click menu at the pointer with groups, sub-menus, and shortcut hints.","category":"overlays","client":true},{"name":"ContributionGraph","label":"Contribution graph","slug":"contribution-graph","description":"A year of activity, one cell per day.","category":"charts","client":false},{"name":"DataTable","label":"Data table","slug":"data-table","description":"The wired table: sorting, search, row selection, and pagination assembled around Table.","category":"data-display","client":true},{"name":"DateInput","label":"Date input","slug":"date-input","description":"Date input with native picker, calendar icon, label, and validation states.","category":"forms","client":true},{"name":"DatePicker","label":"Date picker","slug":"date-picker","description":"Inline calendar with month navigation, day selection, and today indicator.","category":"forms","client":true},{"name":"Dialog","label":"Dialog","slug":"dialog","description":"A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.","category":"overlays","client":true},{"name":"Divider","label":"Divider","slug":"divider","description":"A thin rule separating stacked content, with optional inline label and vertical orientation.","category":"layout","client":false},{"name":"DocumentChip","label":"Document chip","slug":"document-chip","description":"A compact file reference with a type icon, name, metadata, and optional remove.","category":"ai","client":false},{"name":"Drawer","label":"Drawer","slug":"drawer","description":"An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.","category":"overlays","client":true},{"name":"Dropdown","label":"Dropdown","slug":"dropdown","description":"Custom select dropdown with keyboard navigation, disabled options, and error states.","category":"forms","client":true},{"name":"DropdownMenu","label":"Dropdown menu","slug":"dropdown-menu","description":"Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.","category":"overlays","client":true},{"name":"EmptyState","label":"Empty state","slug":"empty-state","description":"The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.","category":"feedback","client":false},{"name":"EntityCard","label":"Entity card","slug":"entity-card","description":"Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.","category":"data-display","client":false},{"name":"EventCalendar","label":"Event calendar","slug":"event-calendar","description":"A month grid with event pills, overflow counts, and month navigation.","category":"data-display","client":true},{"name":"Field","label":"Field","slug":"field","description":"The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.","category":"forms","client":true},{"name":"Figure","label":"Figure","slug":"figure","description":"Images with captions, in the case-study frame.","category":"data-display","client":false},{"name":"FileInput","label":"File input","slug":"file-input","description":"A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.","category":"forms","client":true},{"name":"Globe","label":"Globe","slug":"globe","description":"An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin.","category":"maps","client":true},{"name":"Input","label":"Input","slug":"input","description":"Text input with label, placeholder, left and right icons, helper text, and error states.","category":"forms","client":true},{"name":"Instructions","label":"Instructions","slug":"instructions","description":"Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.","category":"data-display","client":false},{"name":"InterruptCard","label":"Interrupt card","slug":"interrupt-card","description":"A human-in-the-loop checkpoint with a question from the agent and option buttons to decide.","category":"ai","client":false},{"name":"Kbd","label":"Kbd","slug":"kbd","description":"A keyboard key rendered as a keycap, for shortcut hints in menus and prose.","category":"data-display","client":false},{"name":"LineChart","label":"Line chart","slug":"line-chart","description":"Multi-series line chart for trends over time, with per-series colours and a summary row.","category":"charts","client":false,"folder":"Chart"},{"name":"LinkList","label":"Link list","slug":"link-list","description":"Linked items with logo, label, and subtitle.","category":"data-display","client":false},{"name":"MapCallout","label":"Map callout","slug":"map-callout","description":"The annotation beside a map point: a name in capitals over monospace readout lines.","category":"maps","client":false},{"name":"MapLegend","label":"Map legend","slug":"map-legend","description":"The corner block of a map: its name, what it shows, and the key to its markers.","category":"maps","client":false},{"name":"MessageActions","label":"Message actions","slug":"message-actions","description":"An icon-button row for message-level actions like copy, retry, and feedback.","category":"ai","client":false},{"name":"MessageCard","label":"Message card","slug":"message-card","description":"A structured rich-content card embedded in a chat message, with media, title, body, and actions.","category":"ai","client":false},{"name":"ModelPicker","label":"Model picker","slug":"model-picker","description":"A model selector for chat surfaces, with per-model descriptions and an optional effort row.","category":"ai","client":true},{"name":"Nav","label":"Nav","slug":"nav","description":"Desktop top navigation bar with a brand slot, horizontal button group, and optional trailing content.","category":"navigation","client":false},{"name":"NavList","label":"Nav list","slug":"nav-list","description":"Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles.","category":"navigation","client":true},{"name":"NotificationCenter","label":"Notification centre","slug":"notification-center","description":"A persistent notification inbox with unread count, filter tabs, and per-item actions.","category":"feedback","client":true},{"name":"NumberInput","label":"Number input","slug":"number-input","description":"Numeric field with increment and decrement steppers and min/max clamping.","category":"forms","client":true},{"name":"Pagination","label":"Pagination","slug":"pagination","description":"Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.","category":"navigation","client":true},{"name":"PieChart","label":"Pie chart","slug":"pie-chart","description":"Proportional share of a whole as a pie or donut, with per-slice colours.","category":"charts","client":false,"folder":"Chart"},{"name":"PinInput","label":"Pin input","slug":"pin-input","description":"Segmented one-time-code input with auto-advance, paste support, and completion callback.","category":"forms","client":true},{"name":"Popover","label":"Popover","slug":"popover","description":"Contextual overlay panel with click and hover triggers, positioned relative to its anchor.","category":"overlays","client":true},{"name":"ProgressBar","label":"Progress bar","slug":"progress-bar","description":"Horizontal bar indicating completion progress, with an optional percentage label.","category":"feedback","client":false},{"name":"PromptSuggestions","label":"Prompt suggestions","slug":"prompt-suggestions","description":"A horizontal row of tappable prompt suggestions to start or steer a conversation.","category":"ai","client":false},{"name":"Prose","label":"Prose","slug":"prose","description":"Token-styled typography for rendered markdown and rich agent output.","category":"ai","client":false},{"name":"Quote","label":"Quote","slug":"quote","description":"Blockquotes and pull-quotes with attribution.","category":"data-display","client":false},{"name":"RadarChart","label":"Radar chart","slug":"radar-chart","description":"Multi-axis comparison of series across categories on a radial grid.","category":"charts","client":false,"folder":"Chart"},{"name":"RadialChart","label":"Radial chart","slug":"radial-chart","description":"Concentric progress rings for completion and KPI readouts.","category":"charts","client":false,"folder":"Chart"},{"name":"RadioButton","label":"Radio button","slug":"radio-button","description":"Radio button and radio group with vertical and horizontal layouts, animated dot indicator.","category":"forms","client":true},{"name":"Reasoning","label":"Reasoning","slug":"reasoning","description":"A model's thinking, disclosed behind a one-line summary and collapsed once it finishes.","category":"ai","client":true},{"name":"ScatterChart","label":"Scatter chart","slug":"scatter-chart","description":"Plots point clusters across two axes to show correlation and distribution.","category":"charts","client":false,"folder":"Chart"},{"name":"SectionTitle","label":"Section title","slug":"section-title","description":"Heading with a divider line and optional trailing content for organising page sections.","category":"layout","client":false},{"name":"SegmentedControl","label":"Segmented control","slug":"segmented-control","description":"Pill-style toggle between related views with keyboard navigation and icon support.","category":"actions","client":true},{"name":"SelectionCard","label":"Selection card","slug":"selection-card","description":"Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.","category":"data-display","client":true},{"name":"ShaderField","label":"Shader field","slug":"shader-field","description":"An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.","category":"effects","client":true},{"name":"Skeleton","label":"Skeleton","slug":"skeleton","description":"Placeholder loading indicators with text, circular, and rectangular variants.","category":"feedback","client":false},{"name":"Slider","label":"Slider","slug":"slider","description":"Range input for selecting a value between a minimum and maximum, in default and compact sizes.","category":"forms","client":true},{"name":"SourceChip","label":"Source chip","slug":"source-chip","description":"A numbered citation pill linking a claim to its source.","category":"ai","client":false},{"name":"Sparkline","label":"Sparkline","slug":"sparkline","description":"Inline trend line for stats and table cells, drawn without axes or chrome.","category":"charts","client":false},{"name":"Spinner","label":"Spinner","slug":"spinner","description":"Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.","category":"feedback","client":false},{"name":"StackedBarChart","label":"Stacked bar chart","slug":"stacked-bar-chart","description":"Bars split into stacked segments to compare totals and their composition.","category":"charts","client":false,"folder":"Chart"},{"name":"Stat","label":"Stat","slug":"stat","description":"Headline metrics with labels and trend deltas.","category":"data-display","client":false},{"name":"Stepper","label":"Stepper","slug":"stepper","description":"Step-by-step progress indicator for wizards and multi-stage flows.","category":"navigation","client":true},{"name":"Swatch","label":"Swatch","slug":"swatch","description":"Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.","category":"forms","client":false},{"name":"Table","label":"Table","slug":"table","description":"Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.","category":"data-display","client":false},{"name":"Tabs","label":"Tabs","slug":"tabs","description":"Tab navigation with underline indicator, icon support, compact size, and full-width mode.","category":"navigation","client":true},{"name":"TagInput","label":"Tag input","slug":"tag-input","description":"Multi-value text input with entries held as removable tags.","category":"forms","client":true},{"name":"Textarea","label":"Textarea","slug":"textarea","description":"Multi-line text input with character counter, resize control, helper text, and error states.","category":"forms","client":true},{"name":"TimePicker","label":"Time picker","slug":"time-picker","description":"Time-of-day field with a dropdown list of selectable times.","category":"forms","client":true},{"name":"Timeline","label":"Timeline","slug":"timeline","description":"Ordered sequences: histories and steppers.","category":"data-display","client":false},{"name":"Toast","label":"Toast","slug":"toast","description":"Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.","category":"feedback","client":true},{"name":"ToggleGroup","label":"Toggle group","slug":"toggle-group","description":"A set of two-state buttons that can be toggled on or off, supporting text and icon items.","category":"actions","client":true},{"name":"ToggleSwitch","label":"Toggle switch","slug":"toggle-switch","description":"Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.","category":"forms","client":true},{"name":"ToolCall","label":"Tool call","slug":"tool-call","description":"The record of one tool invocation, with its arguments and result behind a disclosure.","category":"ai","client":true},{"name":"Tooltip","label":"Tooltip","slug":"tooltip","description":"Contextual text label that appears on hover or focus with position and delay options.","category":"overlays","client":true},{"name":"TreeView","label":"Tree view","slug":"tree-view","description":"Collapsible hierarchy for files, folders, and nested structures.","category":"data-display","client":true},{"name":"Treemap","label":"Treemap","slug":"treemap","description":"Nested rectangles sized by value for part-to-whole breakdowns.","category":"charts","client":false,"folder":"Chart"}]`);
 const registry = {
   categories,
   components