@agent-ui-kit/web-components 0.0.7 → 0.0.14

package/dist/{api.json → api.components.json}

@@ -1,7 +1,7 @@
 {
   "package": "@agent-ui-kit/web-components",
-  "version": "0.0.7",
-  "generated": "2026-03-21T16:06:31.470Z",
+  "version": "0.0.14",
+  "generated": "2026-03-21T19:03:54.163Z",
   "description": "Complete web component library for agent-powered interfaces. Framework-agnostic, light DOM, CSS-first.",
   "css": "https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css",
   "register": "https://unpkg.com/@agent-ui-kit/web-components/dist/register.js",
@@ -1102,6 +1102,92 @@
         }
       ]
     },
+    {
+      "name": "aui-alert",
+      "tag": "aui-alert",
+      "type": "component",
+      "summary": "Contextual banner for status messages.",
+      "description": "Inline alert banner with intent-based coloring via boolean attributes (info, success, warning, danger). Left border accent stripe signals severity. Supports rich content including headings and paragraphs. Optional dismissable behavior via JS.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "info",
+          "values": [
+            "accent",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Visual intent controlling background tint and border accent color."
+        }
+      },
+      "modifiers": {
+        "dismissable": {
+          "syntax": "boolean",
+          "description": "Shows a close button area. JS removes the element on click.\n"
+        }
+      },
+      "content": {
+        "model": "flow",
+        "accepts": [
+          "text",
+          "strong",
+          "p",
+          "aui-text",
+          "aui-link"
+        ],
+        "required": true,
+        "description": "Message content. Can be plain text or rich HTML with headings and paragraphs for multi-line alerts.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "text",
+            "strong",
+            "p",
+            "aui-text",
+            "aui-link"
+          ],
+          "required": true,
+          "description": "Alert message content."
+        }
+      },
+      "tokens": {
+        "spacing": [
+          "--aui-alert-gap",
+          "--aui-alert-padding-block",
+          "--aui-alert-padding-inline"
+        ],
+        "color": [
+          "--aui-alert-background",
+          "--aui-alert-border-color"
+        ],
+        "typography": [
+          "--aui-alert-font-size"
+        ],
+        "shape": [
+          "--aui-alert-radius"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<aui-alert>Your session will expire in 5 minutes.</aui-alert>",
+          "description": "Default info alert."
+        },
+        {
+          "html": "<aui-alert success>Operation completed successfully.</aui-alert>",
+          "description": "Success alert."
+        },
+        {
+          "html": "<aui-alert danger>\n  <strong>Deployment failed</strong>\n  <p>Build step 3 returned exit code 1. Check logs for details.</p>\n</aui-alert>\n",
+          "description": "Rich content danger alert."
+        }
+      ]
+    },
     {
       "name": "aui-app-shell",
       "tag": "aui-app-shell",
@@ -1164,6 +1250,77 @@
         }
       ]
     },
+    {
+      "name": "aui-avatar-group",
+      "tag": "aui-avatar-group",
+      "type": "component",
+      "summary": "Overlapping avatar stack with automatic overflow counter.",
+      "description": "Displays child aui-avatar elements in an overlapping row with descending z-index. When the max attribute is set and children exceed that count, excess avatars are hidden and a +N counter is stamped. Size attribute propagates to child avatars.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Maximum visible avatars. Remaining are hidden and a +N overflow counter is shown.\n"
+        },
+        "size": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "values": [
+            "xs",
+            "sm",
+            "lg"
+          ],
+          "description": "Passed through to child aui-avatar elements for consistent sizing across the group.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-avatar"
+        ],
+        "required": true,
+        "description": "One or more aui-avatar children. Order determines stacking (first avatar on top, highest z-index).\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "aui-avatar"
+          ],
+          "required": true,
+          "description": "Avatar children to display in the overlapping stack."
+        }
+      },
+      "composition": {
+        "parents": [
+          "aui-stack",
+          "aui-header",
+          "aui-footer",
+          "div",
+          "span"
+        ],
+        "children": [
+          "aui-avatar"
+        ],
+        "context": "Inline-flex element. Use inside headers, cards, list items, or stacks. Commonly paired with team/contributor displays.\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-avatar-group>\n  <aui-avatar>A</aui-avatar>\n  <aui-avatar>B</aui-avatar>\n  <aui-avatar>C</aui-avatar>\n</aui-avatar-group>\n",
+          "description": "Basic avatar group showing all avatars."
+        },
+        {
+          "html": "<aui-avatar-group max=\"3\">\n  <aui-avatar>A</aui-avatar>\n  <aui-avatar>B</aui-avatar>\n  <aui-avatar>C</aui-avatar>\n  <aui-avatar>D</aui-avatar>\n  <aui-avatar>E</aui-avatar>\n</aui-avatar-group>\n",
+          "description": "Avatar group with max=3 showing +2 overflow."
+        },
+        {
+          "html": "<aui-avatar-group size=\"sm\">\n  <aui-avatar>A</aui-avatar>\n  <aui-avatar>B</aui-avatar>\n</aui-avatar-group>\n",
+          "description": "Small size avatars."
+        }
+      ]
+    },
     {
       "name": "aui-breadcrumb-item",
       "tag": "aui-breadcrumb-item",
@@ -1998,144 +2155,494 @@
       ]
     },
     {
-      "name": "aui-canvas",
-      "tag": "aui-canvas",
+      "name": "aui-calendar-picker",
+      "tag": "aui-calendar-picker",
       "type": "component",
-      "summary": "Versatile preview surface with pan/zoom, backgrounds, and editor layout slots.",
-      "description": "A composable canvas surface that serves three roles: 1. Simple preview container with background patterns (replaces .block-render) 2. Infinite canvas with pan and zoom for visual editors 3. Full editor layout with leading/trailing panels and floating toolbars\nThe canvas uses a slot-based architecture. Content goes in the default slot. Panels attach via leading/trailing slots. Floating UI (toolbars, indicators) uses float-top/bottom/left/right slots positioned absolutely within the canvas viewport.\nPan uses pointer-captured drag on the background. Zoom uses wheel events. Both expose CSS custom properties (--_canvas-x, --_canvas-y, --_canvas-zoom) so content transforms are CSS-driven.\n",
+      "summary": "Compound date picker with trigger input and calendar popover.",
+      "description": "Combines a read-only trigger (styled like an input) with a popover containing an aui-calendar for date selection. On date select the popover closes, the trigger updates with a formatted date string, and a change event fires. Supports min/max date constraints and a configurable display format.\n",
       "base": "AgentElement",
-      "presentational": {
-        "size": {
-          "syntax": "key-value",
-          "attribute": "size",
-          "cascades": true,
-          "default": "medium",
-          "values": [
-            "xs",
-            "sm",
-            "md",
-            "lg",
-            "xl"
-          ],
-          "description": "Cascades size to all children."
-        }
-      },
       "attributes": {
-        "background": {
+        "value": {
           "syntax": "key-value",
-          "type": "enum",
-          "values": [
-            "none",
-            "grid",
-            "dots"
-          ],
-          "default": "none",
-          "description": "Background pattern. grid = checkerboard squares. dots = dot matrix. none = transparent.\n"
+          "type": "string",
+          "default": "",
+          "description": "Selected date in ISO format (YYYY-MM-DD)."
         },
-        "orientation": {
+        "placeholder": {
           "syntax": "key-value",
-          "type": "enum",
-          "values": [
-            "horizontal",
-            "vertical"
-          ],
-          "default": "horizontal",
-          "description": "Layout direction. horizontal = [leading][content][trailing]. vertical = [content] over [leading][trailing].\n"
+          "type": "string",
+          "default": "Select date",
+          "description": "Placeholder text shown when no date is selected."
+        },
+        "min": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Minimum selectable date in ISO format. Dates before this are disabled."
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Maximum selectable date in ISO format. Dates after this are disabled."
+        },
+        "format": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "YYYY-MM-DD",
+          "description": "Display format for the selected date (e.g. MM/DD/YYYY)."
         }
       },
       "modifiers": {
-        "pan-enabled": {
-          "syntax": "boolean",
-          "description": "Enable click-and-drag panning of the canvas content."
-        },
-        "zoom-enabled": {
-          "syntax": "boolean",
-          "description": "Enable scroll-to-zoom on the canvas content."
-        },
-        "infinite": {
+        "disabled": {
           "syntax": "boolean",
-          "description": "Infinite canvas mode. Content is not constrained to the viewport bounds. Combines pan-enabled + zoom-enabled.\n"
+          "description": "Disables all interaction."
         },
-        "bordered": {
+        "open": {
           "syntax": "boolean",
-          "description": "Adds a visible border around the canvas."
+          "description": "Whether the calendar popover is currently open."
         }
       },
-      "slots": {
-        "default": {
-          "accepts": [
-            "any"
-          ],
-          "required": true,
-          "description": "Main canvas content."
-        },
-        "leading": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Left panel (horizontal) or top panel (vertical)."
+      "a11y": {
+        "role": "combobox (trigger)",
+        "keyboard": {
+          "Enter": "Opens the calendar popover.",
+          "Space": "Opens the calendar popover.",
+          "ArrowDown": "Opens the calendar popover.",
+          "ArrowUp": "Opens the calendar popover.",
+          "Escape": "Closes the calendar popover and returns focus to trigger."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-calendar-picker-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the trigger."
         },
-        "trailing": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Right panel (horizontal) or bottom panel (vertical)."
+        {
+          "name": "--aui-calendar-picker-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the trigger."
         },
-        "float-top": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Floating toolbar at top center of the viewport."
+        {
+          "name": "--aui-calendar-picker-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for the trigger."
         },
-        "float-bottom": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Floating toolbar at bottom center of the viewport."
+        {
+          "name": "--aui-calendar-picker-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of the trigger."
         },
-        "float-left": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Floating indicator at left center of the viewport."
+        {
+          "name": "--aui-calendar-picker-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color of the trigger."
         },
-        "float-right": {
-          "accepts": [
-            "any"
-          ],
-          "description": "Floating indicator at right center of the viewport."
-        }
-      },
-      "tokens": [
         {
-          "name": "--aui-canvas-background",
-          "default": "var(--aui-doc)",
-          "description": "Background color of the canvas surface."
+          "name": "--aui-calendar-picker-border-color",
+          "default": "var(--aui-stroke)",
+          "description": "Border color of the trigger."
         },
         {
-          "name": "--aui-canvas-border-radius",
+          "name": "--aui-calendar-picker-border-radius",
           "default": "var(--aui-radius)",
-          "description": "Border radius of the canvas container."
+          "description": "Border radius of the trigger."
         },
         {
-          "name": "--aui-canvas-border-color",
-          "default": "var(--aui-border-muted)",
-          "description": "Border color when the bordered attribute is set."
+          "name": "--aui-calendar-picker-size",
+          "default": "var(--aui-size)",
+          "description": "Height of the trigger."
         },
         {
-          "name": "--aui-canvas-focus-color",
-          "default": "var(--aui-focus)",
-          "description": "Focus ring color when the canvas is focused."
-        }
-      ],
-      "events": {
-        "aui:canvas-pan": {
-          "description": "Fires on pan change. Detail contains { x, y }."
+          "name": "--aui-calendar-picker-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding of the trigger."
         },
-        "aui:canvas-zoom": {
-          "description": "Fires on zoom change. Detail contains { zoom }."
-        }
-      },
+        {
+          "name": "--aui-calendar-picker-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between trigger elements."
+        },
+        {
+          "name": "--aui-calendar-picker-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of the calendar icon and chevron."
+        },
+        {
+          "name": "--aui-calendar-picker-placeholder-color",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        },
+        {
+          "name": "--aui-calendar-picker-chevron-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the calendar icon and chevron."
+        },
+        {
+          "name": "--aui-calendar-picker-dropdown-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-picker-dropdown-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-picker-dropdown-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-picker-dropdown-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the calendar dropdown."
+        }
+      ],
+      "events": {
+        "change": {
+          "description": "Fired when a date is selected. Detail contains { value, date }."
+        }
+      },
+      "dependencies": [
+        "aui-calendar"
+      ],
+      "examples": [
+        {
+          "html": "<aui-calendar-picker placeholder=\"Select date\"></aui-calendar-picker>\n",
+          "description": "Default date picker with placeholder."
+        },
+        {
+          "html": "<aui-calendar-picker value=\"2026-03-15\"></aui-calendar-picker>\n",
+          "description": "Date picker with pre-selected date."
+        },
+        {
+          "html": "<aui-calendar-picker\n  value=\"2026-03-21\"\n  min=\"2026-01-01\"\n  max=\"2026-12-31\"\n  placeholder=\"Pick a date\"\n></aui-calendar-picker>\n",
+          "description": "Date picker with min/max constraints."
+        },
+        {
+          "html": "<aui-calendar-picker value=\"2026-03-21\" format=\"MM/DD/YYYY\"></aui-calendar-picker>\n",
+          "description": "Date picker with custom display format."
+        },
+        {
+          "html": "<aui-calendar-picker value=\"2026-03-21\" disabled></aui-calendar-picker>\n",
+          "description": "Disabled date picker."
+        }
+      ]
+    },
+    {
+      "name": "aui-calendar-range-picker",
+      "tag": "aui-calendar-range-picker",
+      "type": "component",
+      "summary": "Compound date range picker with trigger input and calendar popover.",
+      "description": "Combines a read-only trigger (styled like an input) with a popover containing an aui-calendar in range selection mode. On range commit the popover closes, the trigger updates with \"Start -- End\" text, and a change event fires with { start, end } detail. Supports min/max date constraints.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "start": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Range start date in ISO format (YYYY-MM-DD)."
+        },
+        "end": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Range end date in ISO format (YYYY-MM-DD)."
+        },
+        "placeholder": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "Select dates",
+          "description": "Placeholder text shown when no range is selected."
+        },
+        "min": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Minimum selectable date in ISO format. Dates before this are disabled."
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Maximum selectable date in ISO format. Dates after this are disabled."
+        }
+      },
+      "modifiers": {
+        "disabled": {
+          "syntax": "boolean",
+          "description": "Disables all interaction."
+        },
+        "open": {
+          "syntax": "boolean",
+          "description": "Whether the calendar popover is currently open."
+        }
+      },
+      "a11y": {
+        "role": "combobox (trigger)",
+        "keyboard": {
+          "Enter": "Opens the calendar popover.",
+          "Space": "Opens the calendar popover.",
+          "ArrowDown": "Opens the calendar popover.",
+          "ArrowUp": "Opens the calendar popover.",
+          "Escape": "Closes the calendar popover and returns focus to trigger."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-calendar-range-picker-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-border-color",
+          "default": "var(--aui-stroke)",
+          "description": "Border color of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-size",
+          "default": "var(--aui-size)",
+          "description": "Height of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding of the trigger."
+        },
+        {
+          "name": "--aui-calendar-range-picker-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between trigger elements."
+        },
+        {
+          "name": "--aui-calendar-range-picker-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of the calendar icon and chevron."
+        },
+        {
+          "name": "--aui-calendar-range-picker-placeholder-color",
+          "default": "var(--aui-ink-placeholder, var(--aui-ink-muted))",
+          "description": "Placeholder text color."
+        },
+        {
+          "name": "--aui-calendar-range-picker-chevron-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the calendar icon and chevron."
+        },
+        {
+          "name": "--aui-calendar-range-picker-dropdown-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-range-picker-dropdown-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-range-picker-dropdown-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the calendar dropdown."
+        },
+        {
+          "name": "--aui-calendar-range-picker-dropdown-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the calendar dropdown."
+        }
+      ],
+      "events": {
+        "change": {
+          "description": "Fired when a range is fully selected. Detail contains { start, end }."
+        }
+      },
+      "dependencies": [
+        "aui-calendar"
+      ],
+      "examples": [
+        {
+          "html": "<aui-calendar-range-picker placeholder=\"Select dates\"></aui-calendar-range-picker>\n",
+          "description": "Default range picker with placeholder."
+        },
+        {
+          "html": "<aui-calendar-range-picker start=\"2026-03-01\" end=\"2026-03-15\"></aui-calendar-range-picker>\n",
+          "description": "Range picker with pre-selected range."
+        },
+        {
+          "html": "<aui-calendar-range-picker\n  start=\"2026-03-01\"\n  end=\"2026-03-15\"\n  min=\"2026-01-01\"\n  max=\"2026-12-31\"\n  placeholder=\"Pick a range\"\n></aui-calendar-range-picker>\n",
+          "description": "Range picker with min/max constraints."
+        },
+        {
+          "html": "<aui-calendar-range-picker start=\"2026-03-01\" end=\"2026-03-15\" disabled></aui-calendar-range-picker>\n",
+          "description": "Disabled range picker."
+        }
+      ]
+    },
+    {
+      "name": "aui-canvas",
+      "tag": "aui-canvas",
+      "type": "component",
+      "summary": "Versatile preview surface with pan/zoom, backgrounds, and editor layout slots.",
+      "description": "A composable canvas surface that serves three roles: 1. Simple preview container with background patterns (replaces .block-render) 2. Infinite canvas with pan and zoom for visual editors 3. Full editor layout with leading/trailing panels and floating toolbars\nThe canvas uses a slot-based architecture. Content goes in the default slot. Panels attach via leading/trailing slots. Floating UI (toolbars, indicators) uses float-top/bottom/left/right slots positioned absolutely within the canvas viewport.\nPan uses pointer-captured drag on the background. Zoom uses wheel events. Both expose CSS custom properties (--_canvas-x, --_canvas-y, --_canvas-zoom) so content transforms are CSS-driven.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": true,
+          "default": "medium",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "description": "Cascades size to all children."
+        }
+      },
+      "attributes": {
+        "background": {
+          "syntax": "key-value",
+          "type": "enum",
+          "values": [
+            "none",
+            "grid",
+            "dots"
+          ],
+          "default": "none",
+          "description": "Background pattern. grid = checkerboard squares. dots = dot matrix. none = transparent.\n"
+        },
+        "orientation": {
+          "syntax": "key-value",
+          "type": "enum",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal",
+          "description": "Layout direction. horizontal = [leading][content][trailing]. vertical = [content] over [leading][trailing].\n"
+        }
+      },
+      "modifiers": {
+        "pan-enabled": {
+          "syntax": "boolean",
+          "description": "Enable click-and-drag panning of the canvas content."
+        },
+        "zoom-enabled": {
+          "syntax": "boolean",
+          "description": "Enable scroll-to-zoom on the canvas content."
+        },
+        "infinite": {
+          "syntax": "boolean",
+          "description": "Infinite canvas mode. Content is not constrained to the viewport bounds. Combines pan-enabled + zoom-enabled.\n"
+        },
+        "bordered": {
+          "syntax": "boolean",
+          "description": "Adds a visible border around the canvas."
+        }
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "any"
+          ],
+          "required": true,
+          "description": "Main canvas content."
+        },
+        "leading": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Left panel (horizontal) or top panel (vertical)."
+        },
+        "trailing": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Right panel (horizontal) or bottom panel (vertical)."
+        },
+        "float-top": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Floating toolbar at top center of the viewport."
+        },
+        "float-bottom": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Floating toolbar at bottom center of the viewport."
+        },
+        "float-left": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Floating indicator at left center of the viewport."
+        },
+        "float-right": {
+          "accepts": [
+            "any"
+          ],
+          "description": "Floating indicator at right center of the viewport."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-canvas-background",
+          "default": "var(--aui-doc)",
+          "description": "Background color of the canvas surface."
+        },
+        {
+          "name": "--aui-canvas-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the canvas container."
+        },
+        {
+          "name": "--aui-canvas-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color when the bordered attribute is set."
+        },
+        {
+          "name": "--aui-canvas-focus-color",
+          "default": "var(--aui-focus)",
+          "description": "Focus ring color when the canvas is focused."
+        }
+      ],
+      "events": {
+        "aui:canvas-pan": {
+          "description": "Fires on pan change. Detail contains { x, y }."
+        },
+        "aui:canvas-zoom": {
+          "description": "Fires on zoom change. Detail contains { zoom }."
+        }
+      },
       "a11y": {
         "role": "region",
         "keyboard": {
@@ -2307,80 +2814,377 @@
           "description": "Width and height of the visual checkbox box."
         },
         {
-          "name": "--aui-checkbox-box-background",
-          "default": "var(--aui-control, var(--aui-fill))",
-          "description": "Unchecked box background."
+          "name": "--aui-checkbox-box-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Unchecked box background."
+        },
+        {
+          "name": "--aui-checkbox-box-border",
+          "default": "var(--aui-stroke)",
+          "description": "Unchecked box border color."
+        },
+        {
+          "name": "--aui-checkbox-box-border-radius",
+          "default": "calc(var(--aui-radius) * 0.4)",
+          "description": "Box corner radius."
+        },
+        {
+          "name": "--aui-checkbox-checked-background",
+          "default": "var(--aui-accent)",
+          "description": "Checked box background."
+        },
+        {
+          "name": "--aui-checkbox-checked-border",
+          "default": "var(--aui-accent)",
+          "description": "Checked box border color."
+        },
+        {
+          "name": "--aui-checkbox-checked-color",
+          "default": "var(--aui-solid-ink)",
+          "description": "Check mark color."
+        },
+        {
+          "name": "--aui-checkbox-border-hover",
+          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
+          "description": "Box border color on hover."
+        },
+        {
+          "name": "--aui-checkbox-background-disabled",
+          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
+          "description": "Box background when disabled."
+        },
+        {
+          "name": "--aui-checkbox-border-disabled",
+          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
+          "description": "Box border color when disabled."
+        }
+      ],
+      "css-notes": {
+        "attr-audit": [
+          "AB1: [checked], [indeterminate], [disabled] — all visual via attributes",
+          "CG2: ::before on [data-box] for check/dash icon",
+          "CG3: ::after { content: attr(label) } — label rendered in CSS, overflow: hidden on ::after only",
+          "CG4: gap uses 2 * space (tightened from 3 * space)",
+          ":has(> input:focus-visible) — focus ring on visual box"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<aui-checkbox label=\"Accept terms\"></aui-checkbox>",
+          "description": "Default unchecked checkbox."
+        },
+        {
+          "html": "<aui-checkbox label=\"Newsletter\" checked></aui-checkbox>",
+          "description": "Pre-checked checkbox."
+        },
+        {
+          "html": "<aui-checkbox label=\"Select all\" indeterminate></aui-checkbox>",
+          "description": "Indeterminate state."
+        },
+        {
+          "html": "<aui-checkbox label=\"Unavailable\" disabled></aui-checkbox>",
+          "description": "Disabled checkbox."
+        },
+        {
+          "html": "<aui-checkbox label=\"Enabled\" checked accent></aui-checkbox>",
+          "description": "Accent-colored checked checkbox."
+        }
+      ]
+    },
+    {
+      "name": "aui-chip",
+      "tag": "aui-chip",
+      "type": "component",
+      "summary": "Compact pill-shaped label for tags, filters, and selected items.",
+      "description": "Inline pill element for tags, filter tokens, and selected items. Supports intent colors via boolean attributes and a removable variant that stamps a close button and dispatches a remove event.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "removable": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Stamps an X close button. Clicking it dispatches a \"remove\" CustomEvent (bubbles) and removes the element from the DOM.\n"
+        }
+      },
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "default",
+          "values": [
+            "sm"
+          ],
+          "description": "Compact variant with smaller padding and font."
+        },
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "neutral",
+          "values": [
+            "accent",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Tinted background and text color."
+        }
+      },
+      "content": {
+        "model": "inline",
+        "accepts": [
+          "text",
+          "aui-icon"
+        ],
+        "required": true,
+        "description": "Short label text. May include a leading aui-icon. Keep concise.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "text",
+            "aui-icon"
+          ],
+          "required": true,
+          "description": "Chip label. Icons allowed before text."
+        }
+      },
+      "composition": {
+        "parents": [
+          "aui-stack",
+          "aui-wrap",
+          "div",
+          "span"
+        ],
+        "children": [
+          "aui-icon"
+        ],
+        "context": "Inline element. Group chips in aui-stack direction=\"row\" or aui-wrap. Used inside tag inputs, filter bars, member labels.\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-chip>TypeScript</aui-chip>",
+          "description": "Default chip."
+        },
+        {
+          "html": "<aui-chip accent>Active</aui-chip>",
+          "description": "Accent intent chip."
+        },
+        {
+          "html": "<aui-chip success>Deployed</aui-chip>",
+          "description": "Success intent chip."
+        },
+        {
+          "html": "<aui-chip removable>React</aui-chip>",
+          "description": "Removable chip with close button."
+        },
+        {
+          "html": "<aui-chip size=\"sm\">Small</aui-chip>",
+          "description": "Compact size variant."
+        },
+        {
+          "html": "<aui-chip>\n  <aui-icon name=\"tag\" size=\"xs\"></aui-icon>\n  Label\n</aui-chip>\n",
+          "description": "Chip with leading icon."
+        }
+      ]
+    },
+    {
+      "name": "aui-code-block",
+      "tag": "aui-code-block",
+      "type": "component",
+      "summary": "Fenced code block with optional language header, filename, and copy button.",
+      "description": "Wraps an aui-code element with an optional header bar showing a language label, filename, and copy-to-clipboard button. Text content placed directly inside is automatically wrapped in an aui-code child. The header is stamped by JS when language, filename, or copyable attributes are present. The copy button writes the code text to the clipboard via the Clipboard API.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "language": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Programming language label shown in the header bar. Also useful for syntax-highlighting integrations.\n"
+        },
+        "filename": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Filename shown in the header bar. Takes precedence over language for the displayed label.\n"
+        },
+        "copyable": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "When present, shows a \"Copy\" button in the header bar. Clicking copies the code content to the clipboard.\n"
+        },
+        "max-height": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "CSS max-height applied to the code body. When set, the code area becomes scrollable if content overflows.\n"
+        }
+      },
+      "content": {
+        "model": "text",
+        "accepts": [
+          "text",
+          "aui-code"
+        ],
+        "required": true,
+        "description": "Code text content. Plain text is automatically wrapped in an aui-code element by JS. An explicit aui-code child is also accepted.\n"
+      },
+      "tokens": [
+        {
+          "name": "--aui-code-block-background",
+          "default": "var(--aui-control)",
+          "description": "Header background color."
+        },
+        {
+          "name": "--aui-code-block-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color for the outer container and header divider."
         },
         {
-          "name": "--aui-checkbox-box-border",
-          "default": "var(--aui-stroke)",
-          "description": "Unchecked box border color."
+          "name": "--aui-code-block-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Corner radius of the outer container."
         },
         {
-          "name": "--aui-checkbox-box-border-radius",
-          "default": "calc(var(--aui-radius) * 0.4)",
-          "description": "Box corner radius."
+          "name": "--aui-code-block-header-font-size",
+          "default": "var(--aui-font-xs)",
+          "description": "Font size of the header label text."
         },
         {
-          "name": "--aui-checkbox-checked-background",
-          "default": "var(--aui-accent)",
-          "description": "Checked box background."
+          "name": "--aui-code-block-header-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Text color of the header label."
         },
         {
-          "name": "--aui-checkbox-checked-border",
-          "default": "var(--aui-accent)",
-          "description": "Checked box border color."
+          "name": "--aui-code-block-header-padding",
+          "default": "calc(var(--aui-space) * 2) calc(var(--aui-space) * 3)",
+          "description": "Padding inside the header bar."
         },
         {
-          "name": "--aui-checkbox-checked-color",
-          "default": "var(--aui-solid-ink)",
-          "description": "Check mark color."
+          "name": "--aui-code-block-copy-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Copy button text color."
         },
         {
-          "name": "--aui-checkbox-border-hover",
-          "default": "var(--aui-stroke-hover, var(--aui-border-hover))",
-          "description": "Box border color on hover."
+          "name": "--aui-code-block-copy-color-hover",
+          "default": "var(--aui-ink)",
+          "description": "Copy button text color on hover."
+        }
+      ],
+      "a11y": {
+        "role": "figure",
+        "aria": {
+          "aria-label": "Set from language or filename when present."
+        }
+      },
+      "use-cases": [
+        "Code snippets in documentation pages.",
+        "Chat message code blocks in agent conversations.",
+        "Copyable terminal commands.",
+        "File previews with filename headers."
+      ],
+      "examples": [
+        {
+          "html": "<aui-code-block language=\"typescript\">\nexport function normalize(tokens: string[]) {\n  return tokens.map(t => t.trim())\n}\n</aui-code-block>\n",
+          "description": "Code block with language header."
         },
         {
-          "name": "--aui-checkbox-background-disabled",
-          "default": "var(--aui-fill-disabled, var(--aui-action-disabled))",
-          "description": "Box background when disabled."
+          "html": "<aui-code-block language=\"python\" filename=\"main.py\" copyable>\nimport pandas as pd\ndf = pd.read_csv(\"data.csv\")\nprint(df.head())\n</aui-code-block>\n",
+          "description": "Code block with filename and copy button."
         },
         {
-          "name": "--aui-checkbox-border-disabled",
-          "default": "var(--aui-stroke-disabled, var(--aui-border-disabled))",
-          "description": "Box border color when disabled."
+          "html": "<aui-code-block>\nnpm install @agent-ui-kit/web-components\n</aui-code-block>\n",
+          "description": "Plain code block without header."
+        }
+      ]
+    },
+    {
+      "name": "aui-color-picker",
+      "tag": "aui-color-picker",
+      "type": "component",
+      "summary": "Compound color picker composing area, sliders, and field.",
+      "description": "A unified color picker that stamps and syncs aui-color-area, aui-color-slider (hue + optional alpha), and aui-color-field sub-components. All sub-components sync bidirectionally — changing any part updates the others. Parses and serializes hex color values internally, converting to/from HSL for the area and slider controls.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "#000000",
+          "description": "Current color value in hex format."
+        },
+        "format": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "hex",
+          "description": "Display format for the color field (hex, rgb, oklch)."
+        },
+        "show-alpha": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Show the alpha transparency slider."
+        },
+        "disabled": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Disables all sub-components."
         }
-      ],
-      "css-notes": {
-        "attr-audit": [
-          "AB1: [checked], [indeterminate], [disabled] — all visual via attributes",
-          "CG2: ::before on [data-box] for check/dash icon",
-          "CG3: ::after { content: attr(label) } — label rendered in CSS, overflow: hidden on ::after only",
-          "CG4: gap uses 2 * space (tightened from 3 * space)",
-          ":has(> input:focus-visible) — focus ring on visual box"
-        ]
       },
-      "examples": [
+      "tokens": [
         {
-          "html": "<aui-checkbox label=\"Accept terms\"></aui-checkbox>",
-          "description": "Default unchecked checkbox."
+          "name": "--aui-color-picker-gap",
+          "default": "calc(var(--aui-space) * 2)",
+          "description": "Gap between sub-components."
         },
         {
-          "html": "<aui-checkbox label=\"Newsletter\" checked></aui-checkbox>",
-          "description": "Pre-checked checkbox."
+          "name": "--aui-color-picker-area-height",
+          "default": "10rem",
+          "description": "Height of the color area surface."
         },
         {
-          "html": "<aui-checkbox label=\"Select all\" indeterminate></aui-checkbox>",
-          "description": "Indeterminate state."
+          "name": "--aui-color-picker-width",
+          "default": "14rem",
+          "description": "Width of the entire picker."
+        }
+      ],
+      "a11y": {
+        "role": "group",
+        "keyboard": {
+          "ArrowKeys": "Control the active sub-component (area, slider, or field)."
+        }
+      },
+      "events": {
+        "change": {
+          "description": "Fired when the color changes via any sub-component. Detail contains { value, h, s, l, a }.\n"
+        }
+      },
+      "dependencies": [
+        "aui-color-area",
+        "aui-color-slider",
+        "aui-color-field"
+      ],
+      "composition": {
+        "parents": [
+          "aui-container",
+          "any"
+        ],
+        "children": []
+      },
+      "examples": [
+        {
+          "html": "<aui-color-picker value=\"#3b82f6\"></aui-color-picker>\n",
+          "description": "Basic color picker with initial blue value."
         },
         {
-          "html": "<aui-checkbox label=\"Unavailable\" disabled></aui-checkbox>",
-          "description": "Disabled checkbox."
+          "html": "<aui-color-picker value=\"#ef444480\" show-alpha></aui-color-picker>\n",
+          "description": "Color picker with alpha transparency slider."
         },
         {
-          "html": "<aui-checkbox label=\"Enabled\" checked accent></aui-checkbox>",
-          "description": "Accent-colored checked checkbox."
+          "html": "<aui-color-picker value=\"#10b981\" disabled></aui-color-picker>\n",
+          "description": "Disabled color picker."
         }
       ]
     },
@@ -2934,68 +3738,311 @@
           ],
           "pattern": "The standard card pattern is header + body + footer. For simple content, use aui-inset directly.\n"
         },
-        "context": "Use for cards in grids, settings panels, dashboard tiles, detail panes. The bordered modifier is the most common — shadow/elevation is for floating/overlay surfaces.\n"
-      },
-      "constraints": [
-        {
-          "when": "interactive",
-          "require": "href or click handler",
-          "reason": "Interactive containers need a destination or action."
+        "context": "Use for cards in grids, settings panels, dashboard tiles, detail panes. The bordered modifier is the most common — shadow/elevation is for floating/overlay surfaces.\n"
+      },
+      "constraints": [
+        {
+          "when": "interactive",
+          "require": "href or click handler",
+          "reason": "Interactive containers need a destination or action."
+        }
+      ],
+      "a11y": {
+        "role": "When interactive, role=\"button\" is set automatically.",
+        "keyboard": {
+          "Enter": "Navigates to href (when interactive).",
+          "Space": "Navigates to href (when interactive)."
+        },
+        "focus": {
+          "default": "Not focusable unless interactive.",
+          "interactive": "tabindex=\"0\"."
+        }
+      },
+      "events": {
+        "click": {
+          "description": "Fires on interactive containers. Navigates to href if set."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-container-background",
+          "default": "var(--aui-card, var(--aui-doc))",
+          "description": "Background color of the container surface."
+        },
+        {
+          "name": "--aui-container-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the container."
+        },
+        {
+          "name": "--aui-container-font-size",
+          "default": "var(--aui-font-lg)",
+          "description": "Base font size for the container."
+        }
+      ],
+      "examples": [
+        {
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <aui-stack gap=\"1\">\n      <aui-heading>Project Settings</aui-heading>\n      <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-button scrim>Cancel</aui-button>\n        <aui-button primary accent>Save changes</aui-button>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
+          "description": "Card kind — Settings form (1.25rem padding)."
+        },
+        {
+          "html": "<aui-stack direction=\"row\" gap=\"3\" style=\"flex-wrap: wrap;\">\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Active Users</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">12</aui-heading>\n          <aui-badge accent>+3 today</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Uptime</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">99.9%</aui-heading>\n          <aui-badge success>All systems operational</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Open Issues</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">3</aui-heading>\n          <aui-badge warning>Needs review</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n</aui-stack>\n",
+          "description": "Widget kind — Compact dashboard stat cards (0.75rem padding)."
+        },
+        {
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-avatar size=\"lg\" square><aui-icon name=\"user\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Team Members</aui-heading>\n          <aui-text muted size=\"sm\">Manage who has access to this project.</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button primary accent>Invite</aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Alice Johnson</aui-heading>\n            <aui-text muted size=\"sm\">alice@acme.com · Engineer</aui-text>\n          </aui-stack>\n          <aui-badge>Admin</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>BK</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Bob Kim</aui-heading>\n            <aui-text muted size=\"sm\">bob@acme.com · Designer</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>CL</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Carol Lee</aui-heading>\n            <aui-text muted size=\"sm\">carol@acme.com · Product Manager</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
+          "description": "Panel kind — Spacious member list (1.75rem padding)."
+        },
+        {
+          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" success max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" style=\"text-align: center;\">\n      <aui-icon name=\"check\" size=\"xl\"></aui-icon>\n      <aui-heading size=\"xl\">Payment Successful</aui-heading>\n      <aui-text muted>Your subscription has been renewed. You'll receive a confirmation email shortly.</aui-text>\n      <aui-button primary>Go to Dashboard</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
+          "description": "Elevated success card with centered content."
+        },
+        {
+          "html": "<aui-container kind=\"widget\" bordered interactive href=\"#\" max-width=\"sm\">\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar square><aui-icon name=\"gear\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" style=\"flex: 1;\">\n        <aui-heading size=\"md\" weight=\"medium\">Preferences</aui-heading>\n        <aui-text muted size=\"sm\">Language, theme, and notifications</aui-text>\n      </aui-stack>\n      <aui-icon name=\"caret-right\" muted></aui-icon>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
+          "description": "Widget kind — Compact clickable navigation card."
+        }
+      ]
+    },
+    {
+      "name": "aui-context-menu",
+      "tag": "aui-context-menu",
+      "type": "component",
+      "summary": "Right-click triggered context menu using the Popover API.",
+      "description": "Declarative context menu that listens for contextmenu events on a target element and positions a popover at the pointer location. Reuses aui-option for menu items and aui-optgroup for grouped sections. Supports keyboard navigation with arrow keys, Enter to select, and Escape to close.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "target": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "CSS selector for the element to attach the contextmenu listener to. Falls back to parent element."
+        },
+        "disabled": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Prevents the menu from opening."
+        },
+        "open": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the menu is currently open."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-context-menu-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for menu items."
+        },
+        {
+          "name": "--aui-context-menu-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for menu items."
+        },
+        {
+          "name": "--aui-context-menu-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color for menu items."
+        },
+        {
+          "name": "--aui-context-menu-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the menu."
+        },
+        {
+          "name": "--aui-context-menu-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the menu."
+        },
+        {
+          "name": "--aui-context-menu-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the menu."
+        },
+        {
+          "name": "--aui-context-menu-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the menu."
+        }
+      ],
+      "a11y": {
+        "role": "menu",
+        "keyboard": {
+          "ArrowDown": "Move to next menu item.",
+          "ArrowUp": "Move to previous menu item.",
+          "Home": "Move to first menu item.",
+          "End": "Move to last menu item.",
+          "Enter": "Select the active menu item.",
+          "Space": "Select the active menu item.",
+          "Escape": "Close the menu."
+        }
+      },
+      "events": {
+        "select": {
+          "description": "Fired when a menu item is selected. Detail contains { value }."
+        }
+      },
+      "dependencies": [
+        "aui-option",
+        "aui-optgroup"
+      ],
+      "composition": {
+        "parents": [
+          "any"
+        ],
+        "children": [
+          "aui-option",
+          "aui-optgroup"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<div id=\"ctx-target\" style=\"padding: 2rem; border: 1px dashed var(--aui-border-muted); border-radius: var(--aui-radius); text-align: center; color: var(--aui-ink-muted);\">\n  Right-click here\n</div>\n<aui-context-menu target=\"#ctx-target\">\n  <aui-option value=\"edit\">Edit</aui-option>\n  <aui-option value=\"duplicate\">Duplicate</aui-option>\n  <aui-option value=\"delete\">Delete</aui-option>\n</aui-context-menu>\n",
+          "description": "Basic context menu — right-click the target area to open."
+        },
+        {
+          "html": "<div id=\"ctx-grouped\" style=\"padding: 2rem; border: 1px dashed var(--aui-border-muted); border-radius: var(--aui-radius); text-align: center; color: var(--aui-ink-muted);\">\n  Right-click for grouped menu\n</div>\n<aui-context-menu target=\"#ctx-grouped\">\n  <aui-optgroup label=\"Edit\">\n    <aui-option value=\"cut\">Cut</aui-option>\n    <aui-option value=\"copy\">Copy</aui-option>\n    <aui-option value=\"paste\">Paste</aui-option>\n  </aui-optgroup>\n  <aui-optgroup label=\"Danger\" divider>\n    <aui-option value=\"delete\">Delete</aui-option>\n  </aui-optgroup>\n</aui-context-menu>\n",
+          "description": "Context menu with grouped options."
+        }
+      ]
+    },
+    {
+      "name": "aui-date-field",
+      "tag": "aui-date-field",
+      "type": "component",
+      "summary": "Segmented date input with independently editable month, day, and year segments.",
+      "description": "An inline date entry control where month, day, and year are separate focusable segments. Segment order and separator are determined by the format attribute (MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD). Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation. Validates dates on commit (e.g. Feb 30 clamps to Feb 28/29). Value is always stored as ISO YYYY-MM-DD. No native form elements.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Date value in ISO format (YYYY-MM-DD)."
+        },
+        "min": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Earliest allowed date (YYYY-MM-DD)."
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Latest allowed date (YYYY-MM-DD)."
+        },
+        "format": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "MM/DD/YYYY",
+          "description": "Segment display order (MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD)."
+        },
+        "placeholder": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Placeholder shown in empty segments."
+        },
+        "disabled": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Prevents interaction. Dims visually."
         }
-      ],
+      },
       "a11y": {
-        "role": "When interactive, role=\"button\" is set automatically.",
+        "role": "spinbutton (on each segment)",
         "keyboard": {
-          "Enter": "Navigates to href (when interactive).",
-          "Space": "Navigates to href (when interactive)."
+          "ArrowUp": "Increment focused segment.",
+          "ArrowDown": "Decrement focused segment.",
+          "ArrowLeft": "Move to previous segment.",
+          "ArrowRight": "Move to next segment.",
+          "Tab": "Move between segments.",
+          "0-9": "Digit entry with auto-advance.",
+          "Backspace": "Clear segment."
         },
-        "focus": {
-          "default": "Not focusable unless interactive.",
-          "interactive": "tabindex=\"0\"."
-        }
-      },
-      "events": {
-        "click": {
-          "description": "Fires on interactive containers. Navigates to href if set."
+        "aria": {
+          "aria-label": "Segment name (Month, Day, Year).",
+          "aria-valuemin": "Segment minimum.",
+          "aria-valuemax": "Segment maximum."
         }
       },
       "tokens": [
         {
-          "name": "--aui-container-background",
-          "default": "var(--aui-card, var(--aui-doc))",
-          "description": "Background color of the container surface."
+          "name": "--aui-date-field-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Field background."
         },
         {
-          "name": "--aui-container-border-radius",
+          "name": "--aui-date-field-border",
+          "default": "var(--aui-stroke)",
+          "description": "Field border color."
+        },
+        {
+          "name": "--aui-date-field-border-radius",
           "default": "var(--aui-radius)",
-          "description": "Border radius of the container."
+          "description": "Field corner radius."
         },
         {
-          "name": "--aui-container-font-size",
-          "default": "var(--aui-font-lg)",
-          "description": "Base font size for the container."
+          "name": "--aui-date-field-border-hover",
+          "default": "var(--aui-stroke-hover)",
+          "description": "Border on hover."
+        },
+        {
+          "name": "--aui-date-field-border-focus",
+          "default": "var(--aui-focus)",
+          "description": "Border when focused."
+        },
+        {
+          "name": "--aui-date-field-font-size",
+          "default": "var(--aui-font-sm)",
+          "description": "Text size."
+        },
+        {
+          "name": "--aui-date-field-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color."
+        },
+        {
+          "name": "--aui-date-field-segment-bg-focus",
+          "default": "var(--aui-accent-100)",
+          "description": "Focused segment background."
+        },
+        {
+          "name": "--aui-date-field-segment-color-focus",
+          "default": "var(--aui-accent-700)",
+          "description": "Focused segment text color."
         }
       ],
+      "composition": {
+        "parents": [
+          "aui-field",
+          "aui-stack",
+          "aui-container",
+          "div"
+        ],
+        "children": [],
+        "context": "Standalone date entry for inline forms. Use inside aui-field for labeled forms. For full calendar popup, use aui-calendar-picker.\n"
+      },
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <aui-stack gap=\"1\">\n      <aui-heading>Project Settings</aui-heading>\n      <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-button scrim>Cancel</aui-button>\n        <aui-button primary accent>Save changes</aui-button>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Card kind — Settings form (1.25rem padding)."
-        },
-        {
-          "html": "<aui-stack direction=\"row\" gap=\"3\" style=\"flex-wrap: wrap;\">\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Active Users</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">12</aui-heading>\n          <aui-badge accent>+3 today</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Uptime</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">99.9%</aui-heading>\n          <aui-badge success>All systems operational</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered style=\"flex: 1; min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Open Issues</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" style=\"flex: 1;\">3</aui-heading>\n          <aui-badge warning>Needs review</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n</aui-stack>\n",
-          "description": "Widget kind — Compact dashboard stat cards (0.75rem padding)."
+          "html": "<aui-date-field value=\"2026-03-21\"></aui-date-field>",
+          "description": "Default MM/DD/YYYY date field."
         },
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-avatar size=\"lg\" square><aui-icon name=\"user\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Team Members</aui-heading>\n          <aui-text muted size=\"sm\">Manage who has access to this project.</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button primary accent>Invite</aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Alice Johnson</aui-heading>\n            <aui-text muted size=\"sm\">alice@acme.com · Engineer</aui-text>\n          </aui-stack>\n          <aui-badge>Admin</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>BK</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Bob Kim</aui-heading>\n            <aui-text muted size=\"sm\">bob@acme.com · Designer</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>CL</aui-avatar>\n          <aui-stack gap=\"1\" style=\"flex: 1;\">\n            <aui-heading size=\"md\">Carol Lee</aui-heading>\n            <aui-text muted size=\"sm\">carol@acme.com · Product Manager</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Panel kind — Spacious member list (1.75rem padding)."
+          "html": "<aui-date-field value=\"2026-03-21\" format=\"DD/MM/YYYY\"></aui-date-field>",
+          "description": "European DD/MM/YYYY format."
         },
         {
-          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" success max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" style=\"text-align: center;\">\n      <aui-icon name=\"check\" size=\"xl\"></aui-icon>\n      <aui-heading size=\"xl\">Payment Successful</aui-heading>\n      <aui-text muted>Your subscription has been renewed. You'll receive a confirmation email shortly.</aui-text>\n      <aui-button primary>Go to Dashboard</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Elevated success card with centered content."
+          "html": "<aui-date-field value=\"2026-03-21\" format=\"YYYY-MM-DD\"></aui-date-field>",
+          "description": "ISO format."
         },
         {
-          "html": "<aui-container kind=\"widget\" bordered interactive href=\"#\" max-width=\"sm\">\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar square><aui-icon name=\"gear\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" style=\"flex: 1;\">\n        <aui-heading size=\"md\" weight=\"medium\">Preferences</aui-heading>\n        <aui-text muted size=\"sm\">Language, theme, and notifications</aui-text>\n      </aui-stack>\n      <aui-icon name=\"caret-right\" muted></aui-icon>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Widget kind — Compact clickable navigation card."
+          "html": "<aui-date-field value=\"2026-03-21\" disabled></aui-date-field>",
+          "description": "Disabled date field."
         }
       ]
     },
@@ -3135,6 +4182,124 @@
         }
       ]
     },
+    {
+      "name": "aui-disclosure",
+      "tag": "aui-disclosure",
+      "type": "component",
+      "summary": "Collapsible content section with animated expand/collapse.",
+      "description": "Standalone collapsible section with a clickable trigger row. Stamps a button with the summary text and a chevron icon. Content height animates via CSS grid-template-rows transition. Toggle the open attribute to expand or collapse programmatically.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "summary": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Text displayed in the trigger row header.\n"
+        },
+        "open": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the content is expanded. Toggle to open/close.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "any"
+        ],
+        "required": true,
+        "description": "The collapsible content. Can contain any elements — forms, stacks, text, nested disclosures, etc.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "any"
+          ],
+          "required": true,
+          "description": "Content revealed when open."
+        }
+      },
+      "composition": {
+        "parents": [
+          "aui-stack",
+          "aui-content",
+          "aui-inset",
+          "div"
+        ],
+        "children": [
+          "any"
+        ],
+        "context": "Block-level element. Nest inside stacks, content areas, or sidebars. Supports nesting (disclosure inside disclosure).\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-disclosure summary=\"More details\">\n  <p>Hidden content revealed on click.</p>\n</aui-disclosure>\n",
+          "description": "Basic collapsed disclosure."
+        },
+        {
+          "html": "<aui-disclosure summary=\"Advanced Settings\" open>\n  <aui-stack gap=\"3\">\n    <p>Setting A</p>\n    <p>Setting B</p>\n  </aui-stack>\n</aui-disclosure>\n",
+          "description": "Initially open disclosure."
+        },
+        {
+          "html": "<aui-disclosure summary=\"Section A\">\n  <aui-disclosure summary=\"Sub-section A.1\">\n    Nested content.\n  </aui-disclosure>\n</aui-disclosure>\n",
+          "description": "Nested disclosures."
+        }
+      ]
+    },
+    {
+      "name": "aui-disclosure-group",
+      "tag": "aui-disclosure-group",
+      "type": "component",
+      "summary": "Coordinates child aui-disclosure elements with optional exclusive (accordion) mode.",
+      "description": "Groups multiple aui-disclosure children. When the exclusive attribute is present, opening one disclosure automatically closes all siblings, creating accordion behavior. Without exclusive, all disclosures can be open independently. Uses a MutationObserver to detect open attribute changes on child disclosures.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "exclusive": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "When set, only one child disclosure can be open at a time. Opening a disclosure closes all siblings.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-disclosure"
+        ],
+        "required": true,
+        "description": "One or more aui-disclosure children. The group coordinates their open/close state.\n"
+      },
+      "composition": {
+        "parents": [
+          "aui-stack",
+          "aui-content",
+          "aui-inset",
+          "div"
+        ],
+        "children": [
+          "aui-disclosure"
+        ],
+        "context": "Block-level element. Contains aui-disclosure children. Use inside stacks, content areas, or sidebars.\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-disclosure-group>\n  <aui-disclosure summary=\"Section 1\"><p>Content 1</p></aui-disclosure>\n  <aui-disclosure summary=\"Section 2\"><p>Content 2</p></aui-disclosure>\n</aui-disclosure-group>\n",
+          "description": "Independent disclosure group (all can be open)."
+        },
+        {
+          "html": "<aui-disclosure-group exclusive>\n  <aui-disclosure summary=\"General\" open><p>General settings...</p></aui-disclosure>\n  <aui-disclosure summary=\"Security\"><p>Security settings...</p></aui-disclosure>\n  <aui-disclosure summary=\"Notifications\"><p>Notification prefs...</p></aui-disclosure>\n</aui-disclosure-group>\n",
+          "description": "Exclusive accordion mode."
+        }
+      ],
+      "use-cases": [
+        "FAQ pages with accordion behavior.",
+        "Settings panels with grouped expandable sections.",
+        "Sidebar navigation with collapsible groups.",
+        "Documentation with expandable sections.",
+        "Form sections with progressive disclosure."
+      ]
+    },
     {
       "name": "aui-drawer",
       "tag": "aui-drawer",
@@ -3217,49 +4382,224 @@
       },
       "tokens": [
         {
-          "name": "--aui-drawer-background",
-          "default": "var(--aui-modal, var(--aui-doc))",
-          "description": "Background color of the drawer content panel."
+          "name": "--aui-drawer-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the drawer content panel."
+        },
+        {
+          "name": "--aui-drawer-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color inside the drawer."
+        },
+        {
+          "name": "--aui-drawer-border",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the drawer edge and child separators."
+        },
+        {
+          "name": "--aui-drawer-width",
+          "default": "24rem",
+          "description": "Width of the drawer when anchored left or right."
+        },
+        {
+          "name": "--aui-drawer-height",
+          "default": "24rem",
+          "description": "Height of the drawer when anchored top or bottom."
+        },
+        {
+          "name": "--aui-drawer-backdrop-color",
+          "default": "var(--aui-backdrop-color, oklch(0% 0 0))",
+          "description": "Color of the backdrop overlay."
+        },
+        {
+          "name": "--aui-drawer-backdrop-opacity",
+          "default": "var(--aui-backdrop-opacity, 0.3)",
+          "description": "Opacity of the backdrop overlay."
+        }
+      ],
+      "examples": [
+        {
+          "html": "<aui-container bordered max-width=\"sm\">\n  <aui-header>\n    <span>Filters</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Category\">\n          <aui-input placeholder=\"All\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Status\">\n          <aui-radio-group name=\"status\">\n            <aui-radio label=\"Active\" value=\"active\"></aui-radio>\n            <aui-radio label=\"Archived\" value=\"archived\"></aui-radio>\n          </aui-radio-group>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-button primary accent>Apply</aui-button>\n    </span>\n  </aui-footer>\n</aui-container>\n",
+          "description": "Filter drawer structure (header / body / footer). In use, wrap with aui-drawer side=\"right\" and control via open.\n"
+        },
+        {
+          "html": "<aui-container bordered max-width=\"xs\">\n  <aui-header>\n    <span>Navigation</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <a href=\"/\" style=\"color: var(--aui-ink); text-decoration: none;\">Home</a>\n        <a href=\"/settings\" style=\"color: var(--aui-ink); text-decoration: none;\">Settings</a>\n        <a href=\"/help\" style=\"color: var(--aui-ink); text-decoration: none;\">Help</a>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
+          "description": "Navigation drawer structure. Wrap with aui-drawer side=\"left\" for slide-out behavior.\n"
+        }
+      ]
+    },
+    {
+      "name": "aui-dropdown-menu",
+      "tag": "aui-dropdown-menu",
+      "type": "component",
+      "summary": "Trigger button + popover menu for actions (not selection).",
+      "description": "A dropdown menu that stamps a trigger button and opens a popover with action items. Unlike aui-select, does not track selection state — items are fire-and-forget actions that emit a select event. Supports label, icon-leading, hide-label for icon-only triggers, and grouped items via aui-optgroup. Keyboard accessible with arrow navigation, Enter to select, and Escape to close.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "label": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Text label for the trigger button."
+        },
+        "icon-leading": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Icon name for leading position in trigger."
+        },
+        "icon-trailing": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Icon name for trailing position in trigger."
+        },
+        "hide-label": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Visually hide the label text (keeps aria-label)."
+        },
+        "disabled": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Prevents interaction."
+        },
+        "open": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the menu popover is currently open."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-dropdown-menu-font-family",
+          "default": "var(--aui-font-family)",
+          "description": "Font family for the trigger and menu items."
+        },
+        {
+          "name": "--aui-dropdown-menu-font-size",
+          "default": "var(--aui-font-size)",
+          "description": "Font size for the trigger and menu items."
         },
         {
-          "name": "--aui-drawer-color",
+          "name": "--aui-dropdown-menu-font-weight",
+          "default": "var(--aui-control-font-weight)",
+          "description": "Font weight for the trigger label."
+        },
+        {
+          "name": "--aui-dropdown-menu-color",
           "default": "var(--aui-ink)",
-          "description": "Text color inside the drawer."
+          "description": "Default text color."
         },
         {
-          "name": "--aui-drawer-border",
-          "default": "var(--aui-border-muted)",
-          "description": "Border color of the drawer edge and child separators."
+          "name": "--aui-dropdown-menu-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Background color of the trigger button."
         },
         {
-          "name": "--aui-drawer-width",
-          "default": "24rem",
-          "description": "Width of the drawer when anchored left or right."
+          "name": "--aui-dropdown-menu-border-color",
+          "default": "var(--aui-stroke)",
+          "description": "Border color of the trigger button."
         },
         {
-          "name": "--aui-drawer-height",
-          "default": "24rem",
-          "description": "Height of the drawer when anchored top or bottom."
+          "name": "--aui-dropdown-menu-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius for the trigger and dropdown."
         },
         {
-          "name": "--aui-drawer-backdrop-color",
-          "default": "var(--aui-backdrop-color, oklch(0% 0 0))",
-          "description": "Color of the backdrop overlay."
+          "name": "--aui-dropdown-menu-size",
+          "default": "var(--aui-size)",
+          "description": "Height of the trigger button."
         },
         {
-          "name": "--aui-drawer-backdrop-opacity",
-          "default": "var(--aui-backdrop-opacity, 0.3)",
-          "description": "Opacity of the backdrop overlay."
+          "name": "--aui-dropdown-menu-padding-inline",
+          "default": "var(--aui-pad-control-inline)",
+          "description": "Inline padding for the trigger."
+        },
+        {
+          "name": "--aui-dropdown-menu-gap",
+          "default": "var(--aui-pad-gap-control)",
+          "description": "Gap between trigger icon, label, and chevron."
+        },
+        {
+          "name": "--aui-dropdown-menu-icon-size",
+          "default": "var(--aui-icon-size)",
+          "description": "Size of the chevron icon."
+        },
+        {
+          "name": "--aui-dropdown-menu-chevron-color",
+          "default": "var(--aui-ink-muted)",
+          "description": "Color of the dropdown chevron."
+        },
+        {
+          "name": "--aui-dropdown-menu-dropdown-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background of the dropdown popover."
+        },
+        {
+          "name": "--aui-dropdown-menu-dropdown-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the dropdown popover."
+        },
+        {
+          "name": "--aui-dropdown-menu-dropdown-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the dropdown popover."
+        },
+        {
+          "name": "--aui-dropdown-menu-dropdown-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the dropdown popover."
+        }
+      ],
+      "a11y": {
+        "role": "button (trigger), menu (popover)",
+        "keyboard": {
+          "ArrowDown": "Open menu or navigate to next item.",
+          "ArrowUp": "Open menu or navigate to previous item.",
+          "Enter": "Open menu or select active item.",
+          "Space": "Open menu or select active item.",
+          "Escape": "Close menu and return focus to trigger.",
+          "Home": "First item.",
+          "End": "Last item."
+        }
+      },
+      "events": {
+        "select": {
+          "description": "Fired when a menu item is activated. Detail contains { value }."
         }
+      },
+      "dependencies": [
+        "aui-option",
+        "aui-optgroup"
       ],
+      "composition": {
+        "parents": [
+          "aui-header",
+          "aui-footer",
+          "aui-stack",
+          "any"
+        ],
+        "children": [
+          "aui-option",
+          "aui-optgroup"
+        ]
+      },
       "examples": [
         {
-          "html": "<aui-container bordered max-width=\"sm\">\n  <aui-header>\n    <span>Filters</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Category\">\n          <aui-input placeholder=\"All\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Status\">\n          <aui-radio-group name=\"status\">\n            <aui-radio label=\"Active\" value=\"active\"></aui-radio>\n            <aui-radio label=\"Archived\" value=\"archived\"></aui-radio>\n          </aui-radio-group>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"trailing\">\n      <aui-button primary accent>Apply</aui-button>\n    </span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Filter drawer structure (header / body / footer). In use, wrap with aui-drawer side=\"right\" and control via open.\n"
+          "html": "<aui-dropdown-menu label=\"Actions\">\n  <aui-option value=\"edit\">Edit</aui-option>\n  <aui-option value=\"duplicate\">Duplicate</aui-option>\n  <aui-option value=\"delete\">Delete</aui-option>\n</aui-dropdown-menu>\n",
+          "description": "Basic dropdown menu with labeled trigger."
         },
         {
-          "html": "<aui-container bordered max-width=\"xs\">\n  <aui-header>\n    <span>Navigation</span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <a href=\"/\" style=\"color: var(--aui-ink); text-decoration: none;\">Home</a>\n        <a href=\"/settings\" style=\"color: var(--aui-ink); text-decoration: none;\">Settings</a>\n        <a href=\"/help\" style=\"color: var(--aui-ink); text-decoration: none;\">Help</a>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Navigation drawer structure. Wrap with aui-drawer side=\"left\" for slide-out behavior.\n"
+          "html": "<aui-dropdown-menu label=\"Actions\" ghost>\n  <aui-optgroup label=\"Edit\">\n    <aui-option value=\"cut\">Cut</aui-option>\n    <aui-option value=\"copy\">Copy</aui-option>\n    <aui-option value=\"paste\">Paste</aui-option>\n  </aui-optgroup>\n  <aui-optgroup label=\"Danger\" divider>\n    <aui-option value=\"delete\">Delete</aui-option>\n  </aui-optgroup>\n</aui-dropdown-menu>\n",
+          "description": "Ghost-style dropdown with grouped options."
+        },
+        {
+          "html": "<aui-dropdown-menu label=\"Actions\" disabled>\n  <aui-option value=\"edit\">Edit</aui-option>\n</aui-dropdown-menu>\n",
+          "description": "Disabled dropdown menu."
         }
       ]
     },
@@ -4203,6 +5543,103 @@
         }
       ]
     },
+    {
+      "name": "aui-hover-card",
+      "tag": "aui-hover-card",
+      "type": "component",
+      "summary": "Rich preview card shown on hover/focus with configurable delay.",
+      "description": "A popover card that appears after a hover delay on an anchor element. Uses the Popover API with CSS anchor positioning. The card stays visible when the pointer moves into it, and hides after a leave delay. Supports side placement (top/bottom/left/right) and custom show/hide delays.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "anchor": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "CSS selector for the anchor element. Falls back to previous sibling or parent."
+        },
+        "delay": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "300",
+          "description": "Show delay in milliseconds after hover starts."
+        },
+        "hide-delay": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "200",
+          "description": "Hide delay in milliseconds after hover ends."
+        },
+        "side": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "bottom",
+          "description": "Preferred placement side — top, bottom, left, or right."
+        }
+      },
+      "modifiers": {
+        "open": {
+          "syntax": "boolean",
+          "description": "Whether the hover card is currently visible."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-hover-card-background",
+          "default": "var(--aui-modal, var(--aui-doc))",
+          "description": "Background color of the card."
+        },
+        {
+          "name": "--aui-hover-card-border-color",
+          "default": "var(--aui-border-muted)",
+          "description": "Border color of the card."
+        },
+        {
+          "name": "--aui-hover-card-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Border radius of the card."
+        },
+        {
+          "name": "--aui-hover-card-shadow",
+          "default": "var(--aui-shadow-lg)",
+          "description": "Box shadow of the card."
+        },
+        {
+          "name": "--aui-hover-card-padding",
+          "default": "calc(var(--aui-space) * 3)",
+          "description": "Padding inside the card."
+        },
+        {
+          "name": "--aui-hover-card-max-width",
+          "default": "20rem",
+          "description": "Maximum width of the card."
+        }
+      ],
+      "a11y": {
+        "role": "tooltip (popover)",
+        "keyboard": {
+          "Escape": "Close the hover card."
+        }
+      },
+      "events": {},
+      "composition": {
+        "parents": [
+          "any"
+        ],
+        "children": [
+          "any"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<span id=\"hc-anchor\" style=\"text-decoration: underline; cursor: pointer; color: var(--aui-ink);\">Hover over me</span>\n<aui-hover-card anchor=\"#hc-anchor\">\n  <aui-heading size=\"sm\">Preview Card</aui-heading>\n  <aui-text muted>This is a rich hover preview with any content.</aui-text>\n</aui-hover-card>\n",
+          "description": "Basic hover card — hover to show, move pointer away to hide."
+        },
+        {
+          "html": "<span id=\"hc-top\" style=\"text-decoration: underline; cursor: pointer; color: var(--aui-ink);\">Hover (top side)</span>\n<aui-hover-card anchor=\"#hc-top\" side=\"top\" delay=\"200\">\n  <aui-text>This card appears above the anchor.</aui-text>\n</aui-hover-card>\n",
+          "description": "Hover card positioned above the anchor with shorter delay."
+        }
+      ]
+    },
     {
       "name": "aui-icon",
       "tag": "aui-icon",
@@ -4581,6 +6018,18 @@
           "type": "string",
           "default": "",
           "description": "Browser autocomplete hint. Forwarded to the native input."
+        },
+        "debounce": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "200",
+          "description": "Debounce delay in ms for the search event. Only applies when type=\"search\"."
+        },
+        "no-clear": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Hides the auto-stamped clear button. Only applies when type=\"search\"."
         }
       },
       "content": {
@@ -4657,6 +6106,9 @@
         },
         "change": {
           "description": "Fires on blur or enter. Bubbles from the native input."
+        },
+        "search": {
+          "description": "Debounced event fired after typing stops (type=\"search\" only). Detail contains { value: string }.\n"
         }
       },
       "css-notes": {
@@ -4754,47 +6206,304 @@
           "default": "var(--aui-focus)",
           "description": "Border and outline color on focus."
         }
-      ],
+      ],
+      "examples": [
+        {
+          "html": "<aui-input placeholder=\"Enter text\"></aui-input>",
+          "description": "Basic text input."
+        },
+        {
+          "html": "<aui-input type=\"email\" placeholder=\"you@example.com\"></aui-input>",
+          "description": "Email input."
+        },
+        {
+          "html": "<aui-input type=\"password\" placeholder=\"Password\"></aui-input>",
+          "description": "Password input."
+        },
+        {
+          "html": "<aui-input placeholder=\"Search\" clearable></aui-input>",
+          "description": "Clearable input with clear button."
+        },
+        {
+          "html": "<aui-input placeholder=\"Disabled\" disabled></aui-input>",
+          "description": "Disabled input."
+        },
+        {
+          "html": "<aui-input value=\"Read only\" readonly></aui-input>",
+          "description": "Read-only input with dashed border."
+        },
+        {
+          "html": "<aui-input placeholder=\"Search\">\n  <span slot=\"leading\">🔍</span>\n</aui-input>\n",
+          "description": "Input with leading icon."
+        },
+        {
+          "html": "<aui-input type=\"email\" placeholder=\"Email\">\n  <span slot=\"leading\">✉</span>\n  <span slot=\"trailing\">✓</span>\n</aui-input>\n",
+          "description": "Input with leading and trailing icons."
+        },
+        {
+          "html": "<aui-field label=\"Email\" required>\n  <aui-input type=\"email\" placeholder=\"you@example.com\"></aui-input>\n</aui-field>\n",
+          "description": "Input inside a labeled field."
+        },
+        {
+          "html": "<aui-field label=\"Username\" error=\"Already taken.\">\n  <aui-input value=\"admin\"></aui-input>\n</aui-field>\n",
+          "description": "Input with error state via parent field."
+        },
+        {
+          "html": "<aui-input type=\"search\" placeholder=\"Search...\"></aui-input>",
+          "description": "Search input with automatic leading icon and clear button."
+        },
+        {
+          "html": "<aui-input type=\"search\" placeholder=\"Search...\" debounce=\"500\"></aui-input>",
+          "description": "Search input with custom 500ms debounce."
+        },
+        {
+          "html": "<aui-input type=\"search\" placeholder=\"Search...\" no-clear></aui-input>",
+          "description": "Search input without the clear button."
+        }
+      ]
+    },
+    {
+      "name": "aui-link",
+      "tag": "aui-link",
+      "type": "component",
+      "summary": "Styled anchor for inline and standalone links.",
+      "description": "Inline link element with consistent styling, hover underline, and focus ring. Supports muted and intent coloring. External attribute appends an arrow icon via CSS ::after pseudo-element.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "accent",
+          "values": [
+            "accent",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Link color family."
+        }
+      },
+      "modifiers": {
+        "muted": {
+          "syntax": "boolean",
+          "description": "Uses muted text color instead of accent. Hover restores full text color.\n"
+        },
+        "external": {
+          "syntax": "boolean",
+          "description": "Appends an external-link arrow icon via CSS ::after. Indicates the link opens an external destination.\n"
+        }
+      },
+      "attributes": {
+        "href": {
+          "type": "URL",
+          "required": false,
+          "description": "Link destination URL."
+        }
+      },
+      "content": {
+        "model": "inline",
+        "accepts": [
+          "text",
+          "aui-icon"
+        ],
+        "required": true,
+        "description": "Link label text. Keep concise — one to a few words.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "text",
+            "aui-icon"
+          ],
+          "required": true,
+          "description": "Link label text."
+        }
+      },
+      "tokens": {
+        "color": [
+          "--aui-link-color",
+          "--aui-link-color-hover"
+        ],
+        "shape": [
+          "--aui-link-radius"
+        ]
+      },
       "examples": [
         {
-          "html": "<aui-input placeholder=\"Enter text\"></aui-input>",
-          "description": "Basic text input."
+          "html": "<aui-link href=\"/about\">Learn more</aui-link>",
+          "description": "Basic accent link."
         },
         {
-          "html": "<aui-input type=\"email\" placeholder=\"you@example.com\"></aui-input>",
-          "description": "Email input."
+          "html": "<aui-link href=\"https://example.com\" external>Visit site</aui-link>",
+          "description": "External link with arrow icon."
         },
         {
-          "html": "<aui-input type=\"password\" placeholder=\"Password\"></aui-input>",
-          "description": "Password input."
+          "html": "<aui-text>\n  Read the <aui-link href=\"/terms\">terms of service</aui-link> before continuing.\n</aui-text>\n",
+          "description": "Inline link within text flow."
+        }
+      ]
+    },
+    {
+      "name": "aui-meter",
+      "tag": "aui-meter",
+      "type": "component",
+      "summary": "Visual gauge for known-range scalar values.",
+      "description": "Static measurement gauge within a known range. Fill width driven by --aui-meter-pct CSS custom property computed from value, min, and max attributes. Semantically distinct from aui-progress — meters represent a static measurement (disk usage, budget), not task completion. Intent colors indicate threshold states.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "md",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "Track height — sm (4px), md (6px), lg (10px)."
         },
-        {
-          "html": "<aui-input placeholder=\"Search\" clearable></aui-input>",
-          "description": "Clearable input with clear button."
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "accent",
+          "values": [
+            "accent",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Fill color reflecting threshold state."
+        }
+      },
+      "attributes": {
+        "value": {
+          "type": "number",
+          "default": "0",
+          "description": "Current measurement value."
+        },
+        "min": {
+          "type": "number",
+          "default": "0",
+          "description": "Range minimum."
         },
+        "max": {
+          "type": "number",
+          "default": "100",
+          "description": "Range maximum."
+        }
+      },
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No content — meter is a visual gauge only.\n"
+      },
+      "slots": {},
+      "tokens": {
+        "sizing": [
+          "--aui-meter-height"
+        ],
+        "color": [
+          "--aui-meter-background",
+          "--aui-meter-fill"
+        ],
+        "shape": [
+          "--aui-meter-radius"
+        ]
+      },
+      "examples": [
         {
-          "html": "<aui-input placeholder=\"Disabled\" disabled></aui-input>",
-          "description": "Disabled input."
+          "html": "<aui-meter value=\"45\"></aui-meter>",
+          "description": "Default accent meter at 45%."
         },
         {
-          "html": "<aui-input value=\"Read only\" readonly></aui-input>",
-          "description": "Read-only input with dashed border."
+          "html": "<aui-meter value=\"75\" warning></aui-meter>",
+          "description": "Warning meter at 75%."
         },
         {
-          "html": "<aui-input placeholder=\"Search\">\n  <span slot=\"leading\">🔍</span>\n</aui-input>\n",
-          "description": "Input with leading icon."
+          "html": "<aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n  <aui-text size=\"xs\" muted>Disk usage</aui-text>\n  <aui-meter value=\"82\" warning style=\"flex: 1\"></aui-meter>\n  <aui-text size=\"xs\" muted>82%</aui-text>\n</aui-stack>\n",
+          "description": "Meter with context labels in a row."
+        }
+      ]
+    },
+    {
+      "name": "aui-nav-item",
+      "tag": "aui-nav-item",
+      "type": "component",
+      "summary": "Navigation list item with icon, label, badge, and active state.",
+      "description": "Flex row navigation item with hover, active, and disabled states. Supports icons and inline text. Use [active] to indicate the current page. CSS-only element with no JS behavior beyond extending AgentElement.\n",
+      "base": "AgentElement",
+      "modifiers": {
+        "active": {
+          "syntax": "boolean",
+          "description": "Marks the item as the current/active page. Applies stronger text color, medium font weight, and a subtle background fill.\n"
         },
+        "disabled": {
+          "syntax": "boolean",
+          "description": "Disables the item. Dims color and prevents pointer interaction.\n"
+        },
+        "muted": {
+          "syntax": "boolean",
+          "description": "Reduces opacity for de-emphasized items.\n"
+        }
+      },
+      "content": {
+        "model": "inline",
+        "accepts": [
+          "text",
+          "aui-icon",
+          "aui-badge"
+        ],
+        "required": true,
+        "description": "Label text and optional leading icon or trailing badge. Icons and text are laid out in a flex row.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "text",
+            "aui-icon",
+            "aui-badge"
+          ],
+          "required": true,
+          "description": "Nav item content — icon, label text, optional badge."
+        }
+      },
+      "tokens": {
+        "sizing": [
+          "--aui-nav-item-gap",
+          "--aui-nav-item-padding-block",
+          "--aui-nav-item-padding-inline",
+          "--aui-nav-item-border-radius"
+        ],
+        "typography": [
+          "--aui-nav-item-font-size",
+          "--aui-nav-item-font-weight",
+          "--aui-nav-item-font-weight-active"
+        ],
+        "color": [
+          "--aui-nav-item-color",
+          "--aui-nav-item-color-hover",
+          "--aui-nav-item-color-active",
+          "--aui-nav-item-color-disabled",
+          "--aui-nav-item-background-hover",
+          "--aui-nav-item-background-active"
+        ]
+      },
+      "examples": [
         {
-          "html": "<aui-input type=\"email\" placeholder=\"Email\">\n  <span slot=\"leading\">✉</span>\n  <span slot=\"trailing\">✓</span>\n</aui-input>\n",
-          "description": "Input with leading and trailing icons."
+          "html": "<aui-nav-item>Dashboard</aui-nav-item>",
+          "description": "Default nav item."
         },
         {
-          "html": "<aui-field label=\"Email\" required>\n  <aui-input type=\"email\" placeholder=\"you@example.com\"></aui-input>\n</aui-field>\n",
-          "description": "Input inside a labeled field."
+          "html": "<aui-nav-item active>Dashboard</aui-nav-item>",
+          "description": "Active nav item (current page)."
         },
         {
-          "html": "<aui-field label=\"Username\" error=\"Already taken.\">\n  <aui-input value=\"admin\"></aui-input>\n</aui-field>\n",
-          "description": "Input with error state via parent field."
+          "html": "<aui-stack gap=\"1\">\n  <aui-nav-item active>\n    <aui-icon name=\"home\"></aui-icon>\n    Dashboard\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"settings\"></aui-icon>\n    Settings\n  </aui-nav-item>\n  <aui-nav-item disabled>\n    <aui-icon name=\"lock\"></aui-icon>\n    Admin\n  </aui-nav-item>\n</aui-stack>\n",
+          "description": "Nav list with active, default, and disabled items."
         }
       ]
     },
@@ -5611,61 +7320,268 @@
           "element": "aui-editor[data-role=\"canvas\"]",
           "description": "Full-viewport aui-editor with background=\"dots\". Contains a single aui-editor-layer named \"content\" which holds a div[data-role=\"content\"] where preview HTML is injected.\n"
         },
-        "command-palette": {
-          "element": "aui-dialog > aui-command",
-          "description": "A small aui-dialog (size=\"sm\") positioned at 20% from top, containing an aui-command with input, grouped list of all items and section links, and an empty state. Opened/closed via Cmd+K. Selecting an item navigates by updating the URL query parameter.\n"
+        "command-palette": {
+          "element": "aui-dialog > aui-command",
+          "description": "A small aui-dialog (size=\"sm\") positioned at 20% from top, containing an aui-command with input, grouped list of all items and section links, and an empty state. Opened/closed via Cmd+K. Selecting an item navigates by updating the URL query parameter.\n"
+        },
+        "empty-state": {
+          "element": "div[data-role=\"empty\"]",
+          "description": "Shown when no item is selected. Centered text prompting the user to select from the section.\n"
+        }
+      },
+      "item-loading": {
+        "description": "When an item is selected, the component resolves three files relative to the preview.json base path. The item's file field (or default \"{slug}/{slug}.html\") provides the HTML. CSS is loaded as \"{dir}/{dir}.css\" via a <link> appended to <head>. TS is imported as \"{dir}/{dir}.ts\" via dynamic import. HTML content children are measured, positioned absolutely with a 40px gap, and given drag and resize traits via attachTrait().\n"
+      },
+      "a11y": {
+        "role": "No implicit role. Acts as a full-screen application shell.",
+        "keyboard": {
+          "Cmd/Ctrl+K": "Toggle command palette open/closed.",
+          "Alt+ArrowLeft": "Navigate to previous item (wraps to last).",
+          "Alt+ArrowRight": "Navigate to next item (wraps to first).",
+          "Escape": "Close command palette (delegated to aui-dialog native behavior)."
+        }
+      },
+      "composition": {
+        "parents": [
+          "body",
+          "div"
+        ],
+        "children": [
+          "internal -- all DOM is stamped by the component"
+        ],
+        "context": "Place as the sole child of <body> for a full-screen preview experience. The component manages its own layout (position: fixed, inset: 0) and stamps all internal structure on activation.\n"
+      },
+      "tokens": {
+        "color": [
+          "--aui-doc",
+          "--aui-ink",
+          "--aui-ink-muted",
+          "--aui-ink-strong",
+          "--aui-border-muted",
+          "--aui-focus"
+        ],
+        "typography": [
+          "--aui-font-family",
+          "--aui-font-size",
+          "--aui-font-sm",
+          "--aui-font-weight-semibold"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<aui-preview-app src=\"./preview.json\"></aui-preview-app>\n",
+          "description": "Standard usage. Place in an HTML page alongside the preview.json manifest. The component fetches the manifest and renders the full preview shell.\n"
+        },
+        {
+          "html": "<aui-preview-app src=\"/blocks/preview.json\"></aui-preview-app>\n",
+          "description": "Absolute path to a manifest in a different directory. Useful when the preview page is not co-located with the manifest.\n"
+        }
+      ]
+    },
+    {
+      "name": "aui-progress",
+      "tag": "aui-progress",
+      "type": "component",
+      "summary": "Horizontal progress bar with value, size, and intent variants.",
+      "description": "A simple horizontal progress indicator. The fill width is driven by the value attribute (0–100), which JS clamps and maps to the --aui-progress-value custom property. The bar itself is rendered via a CSS ::after pseudo-element — no inner DOM required. Size and intent variants control height and fill color respectively.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "default",
+          "values": [
+            "sm",
+            "lg"
+          ],
+          "description": "Controls the bar height. Default is 4px. sm = 2px, lg = 6px.\n"
+        },
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "neutral",
+          "values": [
+            "success",
+            "warning",
+            "danger",
+            "info"
+          ],
+          "description": "Color family for the fill bar. Default uses the accent color.\n"
+        }
+      },
+      "attributes": {
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "0",
+          "description": "Progress percentage (0–100). Clamped by JS and set as --aui-progress-value for the CSS width calculation.\n"
+        }
+      },
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No child content. The bar is rendered entirely via CSS ::after.\n"
+      },
+      "tokens": [
+        {
+          "name": "--aui-progress-height",
+          "default": "4px",
+          "description": "Bar height. Overridden by size attribute."
+        },
+        {
+          "name": "--aui-progress-border-radius",
+          "default": "2px",
+          "description": "Corner radius for both track and fill."
+        },
+        {
+          "name": "--aui-progress-background",
+          "default": "var(--aui-control)",
+          "description": "Track background color."
+        },
+        {
+          "name": "--aui-progress-fill",
+          "default": "var(--aui-accent)",
+          "description": "Fill bar color. Overridden by intent attributes."
+        }
+      ],
+      "a11y": {
+        "role": "progressbar",
+        "aria": {
+          "aria-valuenow": "Set from value attribute.",
+          "aria-valuemin": "0",
+          "aria-valuemax": "100"
+        }
+      },
+      "use-cases": [
+        "Upload or download progress indicator.",
+        "Step completion percentage in onboarding flows.",
+        "Resource usage bar (storage, quota, CPU).",
+        "Form completion meter."
+      ],
+      "examples": [
+        {
+          "html": "<aui-progress value=\"40\"></aui-progress>",
+          "description": "Default progress bar at 40%."
+        },
+        {
+          "html": "<aui-progress value=\"90\" size=\"sm\" success></aui-progress>",
+          "description": "Small bar with success intent."
+        },
+        {
+          "html": "<aui-progress value=\"60\" size=\"lg\" warning></aui-progress>",
+          "description": "Large bar with warning intent."
+        },
+        {
+          "html": "<aui-progress value=\"95\" danger></aui-progress>",
+          "description": "Danger intent at high usage."
+        },
+        {
+          "html": "<aui-progress value=\"100\" success></aui-progress>",
+          "description": "Completed progress with success color."
+        }
+      ]
+    },
+    {
+      "name": "aui-progress-circle",
+      "tag": "aui-progress-circle",
+      "type": "component",
+      "summary": "Circular SVG ring progress indicator with value, size, and intent variants.",
+      "description": "Circular progress ring rendered as an SVG arc. The value attribute (0-100) is clamped by JS and mapped to stroke-dasharray via the --aui-progress-circle-value custom property. Supports optional center label text, size variants, and intent colors.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "default",
+          "values": [
+            "sm",
+            "lg"
+          ],
+          "description": "Controls the ring diameter. Default is 48px. sm = 32px, lg = 64px.\n"
+        },
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "accent",
+          "values": [
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Color family for the fill stroke. Default uses the accent color.\n"
+        }
+      },
+      "attributes": {
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "0",
+          "description": "Progress percentage (0-100). Clamped by JS and set as --aui-progress-circle-value for the CSS stroke-dasharray calculation.\n"
         },
-        "empty-state": {
-          "element": "div[data-role=\"empty\"]",
-          "description": "Shown when no item is selected. Centered text prompting the user to select from the section.\n"
+        "label": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Center text displayed over the ring (e.g. \"75%\").\n"
         }
       },
-      "item-loading": {
-        "description": "When an item is selected, the component resolves three files relative to the preview.json base path. The item's file field (or default \"{slug}/{slug}.html\") provides the HTML. CSS is loaded as \"{dir}/{dir}.css\" via a <link> appended to <head>. TS is imported as \"{dir}/{dir}.ts\" via dynamic import. HTML content children are measured, positioned absolutely with a 40px gap, and given drag and resize traits via attachTrait().\n"
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No child content. The SVG ring and label are stamped by JS.\n"
       },
+      "tokens": [
+        {
+          "name": "--aui-progress-circle-value",
+          "default": "0",
+          "description": "Fill percentage set by JS. Drives stroke-dasharray."
+        }
+      ],
       "a11y": {
-        "role": "No implicit role. Acts as a full-screen application shell.",
-        "keyboard": {
-          "Cmd/Ctrl+K": "Toggle command palette open/closed.",
-          "Alt+ArrowLeft": "Navigate to previous item (wraps to last).",
-          "Alt+ArrowRight": "Navigate to next item (wraps to first).",
-          "Escape": "Close command palette (delegated to aui-dialog native behavior)."
+        "role": "progressbar",
+        "aria": {
+          "aria-valuenow": "Set from value attribute.",
+          "aria-valuemin": "0",
+          "aria-valuemax": "100"
         }
       },
-      "composition": {
-        "parents": [
-          "body",
-          "div"
-        ],
-        "children": [
-          "internal -- all DOM is stamped by the component"
-        ],
-        "context": "Place as the sole child of <body> for a full-screen preview experience. The component manages its own layout (position: fixed, inset: 0) and stamps all internal structure on activation.\n"
-      },
-      "tokens": {
-        "color": [
-          "--aui-doc",
-          "--aui-ink",
-          "--aui-ink-muted",
-          "--aui-ink-strong",
-          "--aui-border-muted",
-          "--aui-focus"
-        ],
-        "typography": [
-          "--aui-font-family",
-          "--aui-font-size",
-          "--aui-font-sm",
-          "--aui-font-weight-semibold"
-        ]
-      },
+      "use-cases": [
+        "Usage/billing panels (storage, API quota rings).",
+        "Dashboard KPI cards with circular metrics.",
+        "Upload progress indicators.",
+        "Profile completion rings.",
+        "Plan limit indicators."
+      ],
       "examples": [
         {
-          "html": "<aui-preview-app src=\"./preview.json\"></aui-preview-app>\n",
-          "description": "Standard usage. Place in an HTML page alongside the preview.json manifest. The component fetches the manifest and renders the full preview shell.\n"
+          "html": "<aui-progress-circle value=\"75\"></aui-progress-circle>",
+          "description": "Default progress circle at 75%."
         },
         {
-          "html": "<aui-preview-app src=\"/blocks/preview.json\"></aui-preview-app>\n",
-          "description": "Absolute path to a manifest in a different directory. Useful when the preview page is not co-located with the manifest.\n"
+          "html": "<aui-progress-circle value=\"75\" label=\"75%\"></aui-progress-circle>",
+          "description": "Circle with center label."
+        },
+        {
+          "html": "<aui-progress-circle value=\"90\" warning></aui-progress-circle>",
+          "description": "Warning intent at 90%."
+        },
+        {
+          "html": "<aui-progress-circle value=\"100\" success></aui-progress-circle>",
+          "description": "Complete with success color."
+        },
+        {
+          "html": "<aui-progress-circle value=\"60\" size=\"sm\"></aui-progress-circle>",
+          "description": "Small size variant."
+        },
+        {
+          "html": "<aui-progress-circle value=\"60\" size=\"lg\" label=\"60%\"></aui-progress-circle>",
+          "description": "Large size with label."
         }
       ]
     },
@@ -6866,35 +8782,389 @@
           "default": "var(--aui-ink-strong)",
           "description": "Text color on header/footer nav item hover."
         },
-        {
-          "name": "--aui-sidebar-header-nav-background-hover",
-          "default": "var(--aui-action)",
-          "description": "Background color on header/footer nav item hover."
+        {
+          "name": "--aui-sidebar-header-nav-background-hover",
+          "default": "var(--aui-action)",
+          "description": "Background color on header/footer nav item hover."
+        },
+        {
+          "name": "--aui-sidebar-resize-handle-background",
+          "default": "var(--aui-action-active)",
+          "description": "Background color of the resize handle on hover/drag."
+        },
+        {
+          "name": "--aui-sidebar-connector-color",
+          "default": "var(--aui-border)",
+          "description": "Color of the vertical connector line on open nav groups."
+        },
+        {
+          "name": "--aui-sidebar-indicator-color",
+          "default": "var(--aui-focus)",
+          "description": "Color of the sliding active indicator bar."
+        }
+      ],
+      "examples": [
+        {
+          "html": "<aui-sidebar width=\"260\" collapsible>\n  <aui-sidebar-header>\n    <aui-nav-item label=\"Workspace\" icon=\"grid\"></aui-nav-item>\n  </aui-sidebar-header>\n  <aui-sidebar-content>\n    <aui-nav-item label=\"Dashboard\" icon=\"home\"></aui-nav-item>\n    <aui-nav-item label=\"Settings\" icon=\"settings\"></aui-nav-item>\n  </aui-sidebar-content>\n  <aui-sidebar-footer>\n    <aui-nav-item label=\"Account\" icon=\"user\"></aui-nav-item>\n  </aui-sidebar-footer>\n</aui-sidebar>\n",
+          "description": "Collapsible sidebar with header, scrollable content, and footer.\n"
+        },
+        {
+          "html": "<aui-sidebar side=\"right\" width=\"300\">\n  <aui-sidebar-content>\n    <aui-nav-item label=\"Inspector\" icon=\"sliders\"></aui-nav-item>\n    <aui-nav-item label=\"Properties\" icon=\"list\"></aui-nav-item>\n  </aui-sidebar-content>\n</aui-sidebar>\n",
+          "description": "Right-side sidebar for detail panels or inspectors."
+        }
+      ]
+    },
+    {
+      "name": "aui-skeleton",
+      "tag": "aui-skeleton",
+      "type": "component",
+      "summary": "Loading placeholder with shimmer animation.",
+      "description": "Animated placeholder element for content that has not yet loaded. Uses a gradient shimmer animation. Shape variants for text lines, circles, and rectangles. Width and height set via inline style bridging to CSS custom properties.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "md",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "Controls placeholder height. xs=0.5rem, sm=0.75rem, md=1rem, lg=1.5rem."
+        },
+        "type": {
+          "syntax": "key-value",
+          "attribute": "type",
+          "cascades": false,
+          "default": "text",
+          "values": [
+            "text",
+            "circle",
+            "rect"
+          ],
+          "description": "Shape variant — text line, avatar circle, or image rectangle."
+        }
+      },
+      "modifiers": {
+        "round": {
+          "syntax": "boolean",
+          "description": "Fully rounded corners (pill shape). Applies radius-full regardless of type.\n"
+        }
+      },
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No content — skeleton is a visual placeholder only.\n"
+      },
+      "slots": {},
+      "tokens": {
+        "sizing": [
+          "--aui-skeleton-width",
+          "--aui-skeleton-height"
+        ],
+        "color": [
+          "--aui-skeleton-base",
+          "--aui-skeleton-highlight"
+        ],
+        "shape": [
+          "--aui-skeleton-radius"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<aui-skeleton></aui-skeleton>",
+          "description": "Default text line placeholder."
+        },
+        {
+          "html": "<aui-skeleton type=\"circle\"></aui-skeleton>",
+          "description": "Circle placeholder for avatars."
+        },
+        {
+          "html": "<aui-stack gap=\"2\">\n  <aui-skeleton></aui-skeleton>\n  <aui-skeleton style=\"--aui-skeleton-width: 80%\"></aui-skeleton>\n  <aui-skeleton style=\"--aui-skeleton-width: 60%\"></aui-skeleton>\n</aui-stack>\n",
+          "description": "Multiple text lines with decreasing widths."
+        }
+      ]
+    },
+    {
+      "name": "aui-sparkline",
+      "tag": "aui-sparkline",
+      "type": "component",
+      "summary": "Inline bar sparkline with configurable highlight and color.",
+      "description": "A compact bar chart rendered as a row of flex-aligned divs. Values are passed as a comma-separated string and normalized against the maximum. Each bar is stamped by JS with a percentage height and chart color. The highlight attribute controls which bar is shown at full opacity — \"last\" (default), \"max\", or \"none\".\n",
+      "base": "AgentElement",
+      "attributes": {
+        "values": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Comma-separated numeric values. Each value becomes one bar whose height is proportional to the maximum value.\n"
+        },
+        "color": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "1",
+          "description": "Chart color index (1–8). Maps to --aui-chart-{n} token.\n"
+        },
+        "highlight": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "last",
+          "values": [
+            "last",
+            "max",
+            "none"
+          ],
+          "description": "Which bar to render at full opacity. \"last\" highlights the final bar, \"max\" highlights the tallest bar, \"none\" shows all bars at full opacity.\n"
+        }
+      },
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No child content. Bars are stamped by JS from the values attribute.\n"
+      },
+      "tokens": [
+        {
+          "name": "--aui-sparkline-height",
+          "default": "2rem",
+          "description": "Overall height of the sparkline container."
+        },
+        {
+          "name": "--aui-sparkline-gap",
+          "default": "calc(var(--aui-space) * 1)",
+          "description": "Gap between adjacent bars."
+        },
+        {
+          "name": "--aui-sparkline-bar-radius",
+          "default": "var(--aui-radius)",
+          "description": "Corner radius of each bar."
+        }
+      ],
+      "a11y": {
+        "role": "img",
+        "aria": {
+          "aria-label": "Derived from values attribute for screen readers."
+        }
+      },
+      "use-cases": [
+        "Inline trend indicator in table cells.",
+        "Dashboard metric sparkline beside a stat card.",
+        "Activity or usage micro-chart."
+      ],
+      "examples": [
+        {
+          "html": "<aui-sparkline values=\"40,55,35,70,60,80,95\"></aui-sparkline>",
+          "description": "Default sparkline with last bar highlighted."
+        },
+        {
+          "html": "<aui-sparkline values=\"60,45,55,50,70,65,85\" highlight=\"max\" color=\"2\"></aui-sparkline>",
+          "description": "Sparkline with max bar highlighted, color 2."
+        },
+        {
+          "html": "<aui-sparkline values=\"30,50,40,60,55,45,50\" highlight=\"none\" color=\"3\"></aui-sparkline>",
+          "description": "All bars at full opacity, color 3."
+        }
+      ]
+    },
+    {
+      "name": "aui-spinner",
+      "tag": "aui-spinner",
+      "type": "component",
+      "summary": "Animated loading indicator.",
+      "description": "CSS-only spinning ring indicator for inline and block-level loading states. Border-based animation with configurable size and intent coloring. Uses currentColor by default so it inherits text color from its parent.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "size": {
+          "syntax": "key-value",
+          "attribute": "size",
+          "cascades": false,
+          "default": "md",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg"
+          ],
+          "description": "Diameter of the spinner ring. xs=1rem, sm=1.25rem, md=1.5rem, lg=2rem."
+        },
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": null,
+          "values": [
+            "accent",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Color of the spinning ring segment."
+        }
+      },
+      "content": {
+        "model": "empty",
+        "accepts": [],
+        "required": false,
+        "description": "No content — spinner is a visual indicator only.\n"
+      },
+      "slots": {},
+      "tokens": {
+        "sizing": [
+          "--aui-spinner-size",
+          "--aui-spinner-border-width"
+        ],
+        "color": [
+          "--aui-spinner-track",
+          "--aui-spinner-fill"
+        ]
+      },
+      "examples": [
+        {
+          "html": "<aui-spinner></aui-spinner>",
+          "description": "Default medium spinner."
+        },
+        {
+          "html": "<aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n  <aui-spinner size=\"xs\"></aui-spinner>\n  <aui-spinner size=\"sm\"></aui-spinner>\n  <aui-spinner></aui-spinner>\n  <aui-spinner size=\"lg\"></aui-spinner>\n</aui-stack>\n",
+          "description": "All four sizes side by side."
+        },
+        {
+          "html": "<aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n  <aui-spinner size=\"xs\"></aui-spinner>\n  <aui-text size=\"sm\">Loading...</aui-text>\n</aui-stack>\n",
+          "description": "Inline spinner with loading text."
+        }
+      ]
+    },
+    {
+      "name": "aui-step",
+      "tag": "aui-step",
+      "type": "component",
+      "summary": "Individual step within a stepper, with state-driven connector colors.",
+      "description": "A single step inside an aui-stepper. Renders as a flex row with a connector line drawn via ::before to the next sibling. State attributes control the connector color.\n",
+      "base": "AgentElement",
+      "modifiers": {
+        "completed": {
+          "syntax": "boolean",
+          "description": "Step is completed. Colors the connector green (success).\n"
+        },
+        "active": {
+          "syntax": "boolean",
+          "description": "Step is currently active. Colors the connector with accent.\n"
         },
+        "error": {
+          "syntax": "boolean",
+          "description": "Step has an error. Colors the connector red (danger).\n"
+        }
+      },
+      "attributes": {
+        "state": {
+          "syntax": "key-value",
+          "type": "enum",
+          "values": [
+            "done",
+            "running"
+          ],
+          "default": null,
+          "description": "Legacy step state. \"done\" maps to completed, \"running\" maps to active.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-badge",
+          "aui-icon",
+          "aui-text",
+          "aui-heading",
+          "aui-stack"
+        ],
+        "required": true,
+        "description": "Step content. Typically starts with a visual indicator (badge or icon) followed by a label or description.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "aui-badge",
+            "aui-icon",
+            "aui-text",
+            "aui-heading",
+            "aui-stack"
+          ],
+          "required": true,
+          "description": "Step indicator and content."
+        }
+      },
+      "tokens": {
+        "sizing": [
+          "--aui-step-gap",
+          "--aui-step-connector-width",
+          "--aui-step-connector-offset"
+        ],
+        "color": [
+          "--aui-step-connector-color"
+        ]
+      },
+      "examples": [
         {
-          "name": "--aui-sidebar-resize-handle-background",
-          "default": "var(--aui-action-active)",
-          "description": "Background color of the resize handle on hover/drag."
+          "html": "<aui-step completed>\n  <aui-badge success>1</aui-badge>\n  <aui-text>Account created</aui-text>\n</aui-step>\n",
+          "description": "Completed step with success badge."
         },
         {
-          "name": "--aui-sidebar-connector-color",
-          "default": "var(--aui-border)",
-          "description": "Color of the vertical connector line on open nav groups."
+          "html": "<aui-step active>\n  <aui-badge accent>2</aui-badge>\n  <aui-text>In progress</aui-text>\n</aui-step>\n",
+          "description": "Active step with accent badge."
         },
         {
-          "name": "--aui-sidebar-indicator-color",
-          "default": "var(--aui-focus)",
-          "description": "Color of the sliding active indicator bar."
+          "html": "<aui-step>\n  <aui-badge>3</aui-badge>\n  <aui-text>Pending</aui-text>\n</aui-step>\n",
+          "description": "Pending step with neutral badge."
         }
-      ],
+      ]
+    },
+    {
+      "name": "aui-stepper",
+      "tag": "aui-stepper",
+      "type": "component",
+      "summary": "Multi-step progress container with connector lines.",
+      "description": "Vertical step sequence container. Each child aui-step draws a connector line to the next step. CSS-only element with no JS behavior beyond extending AgentElement.\n",
+      "base": "AgentElement",
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-step"
+        ],
+        "required": true,
+        "description": "Contains one or more aui-step children. Each step draws a connector line to the next sibling.\n"
+      },
+      "slots": {
+        "default": {
+          "accepts": [
+            "aui-step"
+          ],
+          "required": true,
+          "description": "Step children."
+        }
+      },
+      "tokens": {
+        "sizing": [
+          "--aui-stepper-gap",
+          "--aui-stepper-connector-width"
+        ],
+        "color": [
+          "--aui-stepper-connector-color"
+        ]
+      },
       "examples": [
         {
-          "html": "<aui-sidebar width=\"260\" collapsible>\n  <aui-sidebar-header>\n    <aui-nav-item label=\"Workspace\" icon=\"grid\"></aui-nav-item>\n  </aui-sidebar-header>\n  <aui-sidebar-content>\n    <aui-nav-item label=\"Dashboard\" icon=\"home\"></aui-nav-item>\n    <aui-nav-item label=\"Settings\" icon=\"settings\"></aui-nav-item>\n  </aui-sidebar-content>\n  <aui-sidebar-footer>\n    <aui-nav-item label=\"Account\" icon=\"user\"></aui-nav-item>\n  </aui-sidebar-footer>\n</aui-sidebar>\n",
-          "description": "Collapsible sidebar with header, scrollable content, and footer.\n"
+          "html": "<aui-stepper>\n  <aui-step state=\"done\">\n    <aui-badge success>1</aui-badge>\n    <aui-text>Account created</aui-text>\n  </aui-step>\n  <aui-step state=\"running\">\n    <aui-badge accent>2</aui-badge>\n    <aui-text>Profile setup</aui-text>\n  </aui-step>\n  <aui-step>\n    <aui-badge>3</aui-badge>\n    <aui-text>Complete</aui-text>\n  </aui-step>\n</aui-stepper>\n",
+          "description": "Vertical stepper with done, running, and pending steps."
         },
         {
-          "html": "<aui-sidebar side=\"right\" width=\"300\">\n  <aui-sidebar-content>\n    <aui-nav-item label=\"Inspector\" icon=\"sliders\"></aui-nav-item>\n    <aui-nav-item label=\"Properties\" icon=\"list\"></aui-nav-item>\n  </aui-sidebar-content>\n</aui-sidebar>\n",
-          "description": "Right-side sidebar for detail panels or inspectors."
+          "html": "<aui-stepper>\n  <aui-step completed>\n    <aui-badge success>1</aui-badge>\n    <aui-text>Order placed</aui-text>\n  </aui-step>\n  <aui-step completed>\n    <aui-badge success>2</aui-badge>\n    <aui-text>Payment confirmed</aui-text>\n  </aui-step>\n  <aui-step active>\n    <aui-badge accent>3</aui-badge>\n    <aui-text>Shipping</aui-text>\n  </aui-step>\n</aui-stepper>\n",
+          "description": "Stepper with completed and active steps."
+        },
+        {
+          "html": "<aui-stepper>\n  <aui-step completed>\n    <aui-badge success>1</aui-badge>\n    <aui-text>Build</aui-text>\n  </aui-step>\n  <aui-step error>\n    <aui-badge danger>2</aui-badge>\n    <aui-text>Deploy</aui-text>\n  </aui-step>\n  <aui-step>\n    <aui-badge>3</aui-badge>\n    <aui-text>Verify</aui-text>\n  </aui-step>\n</aui-stepper>\n",
+          "description": "Stepper with an error state step."
         }
       ]
     },
@@ -7827,6 +10097,77 @@
         }
       ]
     },
+    {
+      "name": "aui-tag-group",
+      "tag": "aui-tag-group",
+      "type": "component",
+      "summary": "Keyboard-navigable container for aui-chip elements with focus management.",
+      "description": "Groups aui-chip children with arrow-key navigation between them. Roving tabindex moves focus with Left/Right/Home/End keys. Delete/Backspace on a removable chip removes it and shifts focus to the nearest neighbor. Optional max attribute limits the number of tags allowed.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "label": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Accessible label for the group. Set as aria-label.\n"
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Maximum number of tags allowed. Use the atMax property to check if the limit is reached.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-chip"
+        ],
+        "required": true,
+        "description": "One or more aui-chip children. The group provides keyboard navigation and focus management across them.\n"
+      },
+      "events": [
+        {
+          "name": "remove",
+          "detail": "{ value: string, chip: HTMLElement }",
+          "description": "Bubbles from child chip when removed."
+        }
+      ],
+      "composition": {
+        "parents": [
+          "aui-stack",
+          "aui-content",
+          "aui-inset",
+          "div",
+          "form"
+        ],
+        "children": [
+          "aui-chip"
+        ],
+        "context": "Inline or block-level element. Use inside forms, filter bars, or tag input fields. Wraps chips in a flex-wrap layout.\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-tag-group label=\"Skills\">\n  <aui-chip removable>React</aui-chip>\n  <aui-chip removable>Vue</aui-chip>\n  <aui-chip removable>TypeScript</aui-chip>\n</aui-tag-group>\n",
+          "description": "Basic tag group with removable chips."
+        },
+        {
+          "html": "<aui-tag-group label=\"Tags\" max=\"5\">\n  <aui-chip removable>Design</aui-chip>\n  <aui-chip removable>Frontend</aui-chip>\n</aui-tag-group>\n",
+          "description": "Tag group with max limit."
+        },
+        {
+          "html": "<aui-tag-group label=\"Categories\">\n  <aui-chip>Open Source</aui-chip>\n  <aui-chip>MIT License</aui-chip>\n</aui-tag-group>\n",
+          "description": "Read-only tag group (no removable chips)."
+        }
+      ],
+      "use-cases": [
+        "Tag input fields (skills, interests, labels).",
+        "Filter bars with removable filter chips.",
+        "Multi-select displays.",
+        "Email recipient lists (To field chips).",
+        "Category / label management."
+      ]
+    },
     {
       "name": "aui-textarea",
       "tag": "aui-textarea",
@@ -8119,6 +10460,151 @@
         }
       ]
     },
+    {
+      "name": "aui-time-field",
+      "tag": "aui-time-field",
+      "type": "component",
+      "summary": "Segmented time input with independently editable hour and minute segments.",
+      "description": "A time entry control where hour and minute (and optional AM/PM) are separate focusable segments. Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation between segments. Supports 12h and 24h formats with configurable minute step. No native form elements.\n",
+      "base": "AgentElement",
+      "attributes": {
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Time value in HH:MM (24h) format."
+        },
+        "min": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Earliest allowed time (HH:MM)."
+        },
+        "max": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Latest allowed time (HH:MM)."
+        },
+        "step": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "1",
+          "description": "Minute increment for arrow key navigation."
+        },
+        "format": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "24h",
+          "description": "Display format (12h or 24h)."
+        },
+        "placeholder": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Placeholder shown in empty segments."
+        },
+        "disabled": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Prevents interaction. Dims visually."
+        }
+      },
+      "a11y": {
+        "role": "spinbutton (on each segment)",
+        "keyboard": {
+          "ArrowUp": "Increment focused segment.",
+          "ArrowDown": "Decrement focused segment.",
+          "ArrowLeft": "Move to previous segment.",
+          "ArrowRight": "Move to next segment.",
+          "Tab": "Move between segments.",
+          "0-9": "Digit entry with auto-advance.",
+          "Backspace": "Clear segment.",
+          "a/p": "Toggle AM/PM (12h format)."
+        },
+        "aria": {
+          "aria-label": "Segment name (Hour, Minute, AM/PM).",
+          "aria-valuemin": "Segment minimum.",
+          "aria-valuemax": "Segment maximum."
+        }
+      },
+      "tokens": [
+        {
+          "name": "--aui-time-field-background",
+          "default": "var(--aui-control, var(--aui-fill))",
+          "description": "Field background."
+        },
+        {
+          "name": "--aui-time-field-border",
+          "default": "var(--aui-stroke)",
+          "description": "Field border color."
+        },
+        {
+          "name": "--aui-time-field-border-radius",
+          "default": "var(--aui-radius)",
+          "description": "Field corner radius."
+        },
+        {
+          "name": "--aui-time-field-border-hover",
+          "default": "var(--aui-stroke-hover)",
+          "description": "Border on hover."
+        },
+        {
+          "name": "--aui-time-field-border-focus",
+          "default": "var(--aui-focus)",
+          "description": "Border when focused."
+        },
+        {
+          "name": "--aui-time-field-font-size",
+          "default": "var(--aui-font-sm)",
+          "description": "Text size."
+        },
+        {
+          "name": "--aui-time-field-color",
+          "default": "var(--aui-ink)",
+          "description": "Text color."
+        },
+        {
+          "name": "--aui-time-field-segment-bg-focus",
+          "default": "var(--aui-accent-100)",
+          "description": "Focused segment background."
+        },
+        {
+          "name": "--aui-time-field-segment-color-focus",
+          "default": "var(--aui-accent-700)",
+          "description": "Focused segment text color."
+        }
+      ],
+      "composition": {
+        "parents": [
+          "aui-field",
+          "aui-stack",
+          "aui-container",
+          "div"
+        ],
+        "children": [],
+        "context": "Standalone time entry. Use inside aui-field for labeled forms. Not an aui-input variant -- separate segmented control.\n"
+      },
+      "examples": [
+        {
+          "html": "<aui-time-field value=\"14:30\"></aui-time-field>",
+          "description": "24h time field."
+        },
+        {
+          "html": "<aui-time-field value=\"02:30\" format=\"12h\"></aui-time-field>",
+          "description": "12h format with AM/PM."
+        },
+        {
+          "html": "<aui-time-field value=\"09:00\" step=\"15\"></aui-time-field>",
+          "description": "15-minute increments."
+        },
+        {
+          "html": "<aui-time-field value=\"14:30\" disabled></aui-time-field>",
+          "description": "Disabled time field."
+        }
+      ]
+    },
     {
       "name": "aui-toast",
       "tag": "aui-toast",
@@ -10943,7 +13429,7 @@
       "name": "chart-interactive",
       "type": "block",
       "summary": "Wide chart card with stat summaries and dense bar visualization.",
-      "description": "A dashboard hero chart card. Header shows the title on the left with stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.\n",
+      "description": "A dashboard hero chart card. Header shows the title on the left with aui-stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -10953,12 +13439,13 @@
         "aui-stack",
         "aui-heading",
         "aui-text",
+        "aui-stat",
         "aui-bar"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"4\">\n        <aui-stack gap=\"1\" align-items=\"end\">\n          <aui-text muted size=\"xs\">Desktop</aui-text>\n          <aui-heading size=\"xl\">24,828</aui-heading>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"end\">\n          <aui-text muted size=\"xs\">Mobile</aui-text>\n          <aui-heading size=\"xl\">25,010</aui-heading>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"min-height: 10rem;\" data-chart-bars>\n        <aui-bar label=\"Apr 1 · 3,120\" style=\"height: 35%;\"></aui-bar>\n        <aui-bar label=\"Apr 8 · 4,890\" style=\"height: 55%;\"></aui-bar>\n        <aui-bar label=\"Apr 15 · 3,740\" style=\"height: 42%;\"></aui-bar>\n        <aui-bar label=\"Apr 22 · 6,050\" style=\"height: 68%;\"></aui-bar>\n        <aui-bar label=\"Apr 29 · 4,010\" style=\"height: 45%;\"></aui-bar>\n        <aui-bar label=\"May 6 · 6,940\" style=\"height: 78%;\"></aui-bar>\n        <aui-bar label=\"May 13 · 4,630\" style=\"height: 52%;\"></aui-bar>\n        <aui-bar label=\"May 20 · 5,340\" style=\"height: 60%;\"></aui-bar>\n        <aui-bar label=\"May 27 · 8,010\" style=\"height: 90%;\" highlighted></aui-bar>\n        <aui-bar label=\"Jun 3 · 6,410\" style=\"height: 72%;\"></aui-bar>\n        <aui-bar label=\"Jun 10 · 4,270\" style=\"height: 48%;\"></aui-bar>\n        <aui-bar label=\"Jun 17 · 3,380\" style=\"height: 38%;\" highlighted></aui-bar>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">April 1 – June 29, 2026</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"4\">\n        <aui-stat label=\"Desktop\" value=\"24,828\"></aui-stat>\n        <aui-stat label=\"Mobile\" value=\"25,010\"></aui-stat>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"min-height: 10rem;\" data-chart-bars>\n        <aui-bar label=\"Apr 1 · 3,120\" style=\"height: 35%;\"></aui-bar>\n        <aui-bar label=\"Apr 8 · 4,890\" style=\"height: 55%;\"></aui-bar>\n        <aui-bar label=\"Apr 15 · 3,740\" style=\"height: 42%;\"></aui-bar>\n        <aui-bar label=\"Apr 22 · 6,050\" style=\"height: 68%;\"></aui-bar>\n        <aui-bar label=\"Apr 29 · 4,010\" style=\"height: 45%;\"></aui-bar>\n        <aui-bar label=\"May 6 · 6,940\" style=\"height: 78%;\"></aui-bar>\n        <aui-bar label=\"May 13 · 4,630\" style=\"height: 52%;\"></aui-bar>\n        <aui-bar label=\"May 20 · 5,340\" style=\"height: 60%;\"></aui-bar>\n        <aui-bar label=\"May 27 · 8,010\" style=\"height: 90%;\" highlighted></aui-bar>\n        <aui-bar label=\"Jun 3 · 6,410\" style=\"height: 72%;\"></aui-bar>\n        <aui-bar label=\"Jun 10 · 4,270\" style=\"height: 48%;\"></aui-bar>\n        <aui-bar label=\"Jun 17 · 3,380\" style=\"height: 38%;\" highlighted></aui-bar>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">April 1 – June 29, 2026</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
           "description": "Wide dashboard chart with stat tabs and 12-bar dense visualization."
         }
       ]
@@ -10990,7 +13477,7 @@
       "name": "checkout-form",
       "type": "block",
       "summary": "Payment form with card details and billing address.",
-      "description": "A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout, a billing address section with a \"Same as shipping\" checkbox, optional comments, and submit/cancel actions.\n",
+      "description": "A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout. The billing address section uses aui-fieldset legend=\"Billing Address\" (borderless) with a \"Same as shipping\" checkbox, optional comments. Footer uses aui-button-group for submit/cancel actions.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11001,16 +13488,18 @@
         "aui-heading",
         "aui-text",
         "aui-field",
+        "aui-fieldset",
         "aui-input",
         "aui-textarea",
         "aui-checkbox",
         "aui-button",
+        "aui-button-group",
         "aui-divider"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Payment Method</aui-heading>\n        <aui-text muted size=\"sm\">All transactions are secure and encrypted</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\">\n        <aui-field label=\"Name on Card\" width=\"full\">\n          <aui-input width=\"full\" placeholder=\"John Doe\"></aui-input>\n        </aui-field>\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-field label=\"Card Number\" width=\"full\" grow=\"3\">\n            <aui-input width=\"full\" placeholder=\"1234 5678 9012 3456\"></aui-input>\n          </aui-field>\n          <aui-field label=\"CVV\" grow=\"1\">\n            <aui-input width=\"full\" placeholder=\"123\"></aui-input>\n          </aui-field>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"md\">Billing Address</aui-heading>\n          <aui-text muted size=\"sm\">The address associated with your payment method</aui-text>\n        </aui-stack>\n        <aui-checkbox>Same as shipping address</aui-checkbox>\n        <aui-field label=\"Comments\" width=\"full\">\n          <aui-textarea width=\"full\" placeholder=\"Add any additional comments\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\">\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Submit Payment</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Payment Method</aui-heading>\n        <aui-text muted size=\"sm\">All transactions are secure and encrypted</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\">\n        <aui-field label=\"Name on Card\" width=\"full\">\n          <aui-input width=\"full\" placeholder=\"John Doe\"></aui-input>\n        </aui-field>\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-field label=\"Card Number\" width=\"full\" grow=\"3\">\n            <aui-input width=\"full\" placeholder=\"1234 5678 9012 3456\"></aui-input>\n          </aui-field>\n          <aui-field label=\"CVV\" grow=\"1\">\n            <aui-input width=\"full\" placeholder=\"123\"></aui-input>\n          </aui-field>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-fieldset legend=\"Billing Address\" borderless>\n          <aui-text muted size=\"sm\">The address associated with your payment method</aui-text>\n          <aui-checkbox>Same as shipping address</aui-checkbox>\n          <aui-field label=\"Comments\" width=\"full\">\n            <aui-textarea width=\"full\" placeholder=\"Add any additional comments\"></aui-textarea>\n          </aui-field>\n        </aui-fieldset>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Submit Payment</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
           "description": "Payment form with card details, billing address toggle, comments, and submit/cancel actions."
         }
       ]
@@ -11033,8 +13522,8 @@
     {
       "name": "contributors",
       "type": "block",
-      "summary": "Contributors card showing avatar grid with count and overflow link.",
-      "description": "A card displaying project contributors as a grid of avatars with a count badge. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.\n",
+      "summary": "Contributors card showing overlapping avatar group with count and overflow link.",
+      "description": "A card displaying project contributors as an overlapping avatar group with a count badge and automatic +N overflow counter. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11045,13 +13534,14 @@
         "aui-heading",
         "aui-text",
         "aui-avatar",
+        "aui-avatar-group",
         "aui-badge"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-heading size=\"lg\">Contributors</aui-heading>\n        <aui-badge>312</aui-badge>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-wrap gap=\"2\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-avatar>BK</aui-avatar>\n          <aui-avatar>CL</aui-avatar>\n          <aui-avatar>DM</aui-avatar>\n          <aui-avatar>EP</aui-avatar>\n          <aui-avatar>FW</aui-avatar>\n          <aui-avatar>GR</aui-avatar>\n          <aui-avatar>HN</aui-avatar>\n          <aui-avatar>IQ</aui-avatar>\n          <aui-avatar>JT</aui-avatar>\n          <aui-avatar>KS</aui-avatar>\n          <aui-avatar>LV</aui-avatar>\n          <aui-avatar>MX</aui-avatar>\n          <aui-avatar>NY</aui-avatar>\n          <aui-avatar>OZ</aui-avatar>\n          <aui-avatar>PA</aui-avatar>\n        </aui-wrap>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-text muted size=\"sm\" style=\"text-decoration: underline; cursor: pointer;\">+ 810 contributors</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Contributors grid with count badge and overflow link."
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-heading size=\"lg\">Contributors</aui-heading>\n        <aui-badge>312</aui-badge>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-avatar-group max=\"8\">\n        <aui-avatar>AJ</aui-avatar>\n        <aui-avatar>BK</aui-avatar>\n        <aui-avatar>CL</aui-avatar>\n        <aui-avatar>DM</aui-avatar>\n        <aui-avatar>EP</aui-avatar>\n        <aui-avatar>FW</aui-avatar>\n        <aui-avatar>GR</aui-avatar>\n        <aui-avatar>HN</aui-avatar>\n        <aui-avatar>IQ</aui-avatar>\n        <aui-avatar>JT</aui-avatar>\n        <aui-avatar>KS</aui-avatar>\n        <aui-avatar>LV</aui-avatar>\n        <aui-avatar>MX</aui-avatar>\n        <aui-avatar>NY</aui-avatar>\n        <aui-avatar>OZ</aui-avatar>\n        <aui-avatar>PA</aui-avatar>\n      </aui-avatar-group>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-text muted size=\"sm\" style=\"text-decoration: underline; cursor: pointer;\">+ 810 contributors</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
+          "description": "Contributors avatar group with count badge and overflow link."
         }
       ]
     },
@@ -11074,7 +13564,7 @@
       "name": "dashboard-layout",
       "type": "block",
       "summary": "Application shell with sidebar, page header, and content grid.",
-      "description": "A production-ready app shell combining a compact sidebar with a main content area. The sidebar uses card kind with elevation for visual separation, tight nav items with an active state, and a user footer. The main area has a welcoming page header and a responsive grid of stat cards. This is a starting composition — the content area would hold tables, charts, or lists in a real app.\n",
+      "description": "A production-ready app shell combining a compact sidebar with a main content area. The sidebar uses card kind with elevation for visual separation, aui-nav-item elements with an active state, and a user footer. The main area has a welcoming page header and a responsive grid of aui-stat widgets. This is a starting composition — the content area would hold tables, charts, or lists in a real app.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11085,16 +13575,17 @@
         "aui-wrap",
         "aui-heading",
         "aui-text",
+        "aui-stat",
         "aui-icon",
         "aui-avatar",
-        "aui-badge",
-        "aui-divider"
+        "aui-divider",
+        "aui-nav-item"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-stack direction=\"row\" gap=\"0\" style=\"min-height: 28rem;\">\n  <!-- Sidebar -->\n  <aui-container kind=\"card\" elevation=\"2\" style=\"width: 14rem; flex-shrink: 0;\">\n    <aui-header>\n      <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n      <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack gap=\"2\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius); background: var(--aui-control);\">\n            <aui-icon name=\"house\" size=\"sm\"></aui-icon>\n            <aui-text size=\"sm\" weight=\"medium\">Dashboard</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n            <aui-icon name=\"star\" size=\"sm\" muted></aui-icon>\n            <aui-text size=\"sm\" muted>Projects</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n            <aui-icon name=\"user\" size=\"sm\" muted></aui-icon>\n            <aui-text size=\"sm\" muted>Team</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n            <aui-icon name=\"gear\" size=\"sm\" muted></aui-icon>\n            <aui-text size=\"sm\" muted>Settings</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </aui-inset>\n    </aui-content>\n    <aui-footer>\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"sm\">AJ</aui-avatar>\n          <aui-stack gap=\"0\" spacer>\n            <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n            <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </span>\n    </aui-footer>\n  </aui-container>\n\n  <!-- Main -->\n  <aui-stack gap=\"0\" spacer>\n    <!-- Page header -->\n    <aui-header style=\"padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--aui-border-muted);\">\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Dashboard</aui-heading>\n          <aui-text muted size=\"sm\">Welcome back, Alice. Here's what's happening today.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n\n    <!-- Content -->\n    <aui-stack gap=\"3\" style=\"padding: 1.5rem;\">\n      <aui-wrap gap=\"3\">\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stack gap=\"2\">\n              <aui-text muted size=\"sm\">Revenue</aui-text>\n              <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n                <aui-heading size=\"2xl\" spacer>$24,500</aui-heading>\n                <aui-badge accent>+12%</aui-badge>\n              </aui-stack>\n            </aui-stack>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stack gap=\"2\">\n              <aui-text muted size=\"sm\">Active Users</aui-text>\n              <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n                <aui-heading size=\"2xl\" spacer>1,240</aui-heading>\n                <aui-badge success>+8%</aui-badge>\n              </aui-stack>\n            </aui-stack>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stack gap=\"2\">\n              <aui-text muted size=\"sm\">Open Tasks</aui-text>\n              <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n                <aui-heading size=\"2xl\" spacer>17</aui-heading>\n                <aui-badge warning>3 overdue</aui-badge>\n              </aui-stack>\n            </aui-stack>\n          </aui-inset>\n        </aui-container>\n      </aui-wrap>\n\n      <!-- Placeholder for table/chart area -->\n      <aui-container kind=\"card\" bordered style=\"min-height: 10rem;\">\n        <aui-inset>\n          <aui-stack gap=\"1\" align-items=\"center\" text=\"center\" style=\"padding: 2rem 0;\">\n            <aui-icon name=\"star\" style=\"--aui-icon-size: 3rem;\" muted></aui-icon>\n            <aui-text muted size=\"sm\">Charts and tables will appear here.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-container>\n    </aui-stack>\n  </aui-stack>\n</aui-stack>\n",
-          "description": "Full dashboard shell with sidebar, page header, stat cards, and content placeholder."
+          "html": "<aui-stack direction=\"row\" gap=\"0\" style=\"min-height: 28rem;\">\n  <!-- Sidebar -->\n  <aui-container kind=\"card\" elevation=\"2\" style=\"width: 14rem; flex-shrink: 0;\">\n    <aui-header>\n      <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n      <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack gap=\"2\">\n          <aui-nav-item active>\n            <aui-icon name=\"house\"></aui-icon>\n            Dashboard\n          </aui-nav-item>\n          <aui-nav-item muted>\n            <aui-icon name=\"star\"></aui-icon>\n            Projects\n          </aui-nav-item>\n          <aui-nav-item muted>\n            <aui-icon name=\"user\"></aui-icon>\n            Team\n          </aui-nav-item>\n          <aui-nav-item muted>\n            <aui-icon name=\"gear\"></aui-icon>\n            Settings\n          </aui-nav-item>\n        </aui-stack>\n      </aui-inset>\n    </aui-content>\n    <aui-footer>\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"sm\">AJ</aui-avatar>\n          <aui-stack gap=\"0\" spacer>\n            <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n            <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </span>\n    </aui-footer>\n  </aui-container>\n\n  <!-- Main -->\n  <aui-stack gap=\"0\" spacer>\n    <!-- Page header -->\n    <aui-header style=\"padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--aui-border-muted);\">\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Dashboard</aui-heading>\n          <aui-text muted size=\"sm\">Welcome back, Alice. Here's what's happening today.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n\n    <!-- Content -->\n    <aui-stack gap=\"3\" style=\"padding: 1.5rem;\">\n      <aui-wrap gap=\"3\">\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Revenue\" value=\"$24,500\" trend=\"up\" change=\"+12%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Active Users\" value=\"1,240\" trend=\"up\" change=\"+8%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Open Tasks\" value=\"17\" change=\"3 overdue\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n      </aui-wrap>\n\n      <!-- Placeholder for table/chart area -->\n      <aui-container kind=\"card\" bordered style=\"min-height: 10rem;\">\n        <aui-inset>\n          <aui-stack gap=\"1\" align-items=\"center\" text=\"center\" style=\"padding: 2rem 0;\">\n            <aui-icon name=\"star\" size=\"3xl\" muted></aui-icon>\n            <aui-text muted size=\"sm\">Charts and tables will appear here.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-container>\n    </aui-stack>\n  </aui-stack>\n</aui-stack>\n",
+          "description": "Full dashboard shell with sidebar, page header, aui-stat widgets, and content placeholder."
         }
       ]
     },
@@ -11156,17 +13647,13 @@
       "description": "A card shown when a section has no data to display. Centered layout with a large muted icon, heading, descriptive text, and a primary action button to guide the user toward their first step. Use this to replace blank space in lists, tables, or dashboards so users always have a clear path forward.\n",
       "components": [
         "aui-container",
-        "aui-inset",
-        "aui-stack",
-        "aui-heading",
-        "aui-text",
-        "aui-icon",
+        "aui-empty-state",
         "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"star\" style=\"--aui-icon-size: 3rem;\" muted></aui-icon>\n      <aui-heading size=\"xl\">No projects yet</aui-heading>\n      <aui-text muted>Create your first project to get started. Projects help you organize your work and collaborate with your team.</aui-text>\n      <aui-button primary accent width=\"full\">Create project</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-empty-state icon=\"star\" heading=\"No projects yet\" description=\"Create your first project to get started. Projects help you organize your work and collaborate with your team.\">\n    <aui-button accent>Create project</aui-button>\n  </aui-empty-state>\n</aui-container>\n",
           "description": "Empty state prompting the user to create their first project."
         }
       ]
@@ -11175,7 +13662,7 @@
       "name": "env-variables",
       "type": "block",
       "summary": "Environment variables panel with masked secrets and deploy action.",
-      "description": "A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer has edit and deploy actions.\n",
+      "description": "A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer uses aui-button-group for edit and deploy actions.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11186,7 +13673,8 @@
         "aui-heading",
         "aui-text",
         "aui-input",
-        "aui-button"
+        "aui-button",
+        "aui-button-group"
       ],
       "kind": "card",
       "examples": [
@@ -11200,7 +13688,7 @@
       "name": "feature-upgrade",
       "type": "block",
       "summary": "Feature upgrade card with checklist, note, and call-to-action.",
-      "description": "A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions.\n",
+      "description": "A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions in an aui-button-group.\n",
       "components": [
         "aui-container",
         "aui-content",
@@ -11212,12 +13700,13 @@
         "aui-avatar",
         "aui-icon",
         "aui-badge",
-        "aui-button"
+        "aui-button",
+        "aui-button-group"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Ship faster & safer with AI Agent</aui-heading>\n          <aui-text muted size=\"sm\">Your use is subject to the Public Beta Agreement and AI Product Terms.</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-container kind=\"widget\" elevation=\"3\">\n          <aui-inset>\n            <aui-text muted size=\"sm\">Pro teams get $100 in trial credit for 2 weeks after activation.</aui-text>\n          </aui-inset>\n        </aui-container>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\">\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Enable with $100 credits</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Ship faster & safer with AI Agent</aui-heading>\n          <aui-text muted size=\"sm\">Your use is subject to the Public Beta Agreement and AI Product Terms.</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-container kind=\"widget\" elevation=\"3\">\n          <aui-inset>\n            <aui-text muted size=\"sm\">Pro teams get $100 in trial credit for 2 weeks after activation.</aui-text>\n          </aui-inset>\n        </aui-container>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Enable with $100 credits</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
           "description": "Feature upgrade card with benefits checklist and trial credit offer."
         }
       ]
@@ -11304,7 +13793,7 @@
       "name": "issue-assign",
       "type": "block",
       "summary": "Issue assignment card with user search and selected token chips.",
-      "description": "A compact card for assigning users to an issue. Header shows the task title with an add button. Content area shows selected users as removable token chips. Use for project management, code review assignment, or task delegation.\n",
+      "description": "A compact card for assigning users to an issue. Header shows the task title with an add button. Content area shows selected users as removable aui-chip elements with avatar and name. Use for project management, code review assignment, or task delegation.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11314,13 +13803,14 @@
         "aui-heading",
         "aui-text",
         "aui-avatar",
+        "aui-chip",
         "aui-button",
         "aui-icon"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Assign Issue</aui-heading>\n        <aui-text muted size=\"sm\">Select users to assign to this issue.</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button ghost size=\"sm\"><aui-icon name=\"plus\"></aui-icon></aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <div style=\"padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius); display: flex; align-items: center; gap: 0.5rem;\">\n        <aui-avatar size=\"sm\">AO</aui-avatar>\n        <aui-text size=\"sm\" spacer>AgentOS</aui-text>\n        <aui-button ghost size=\"sm\"><aui-icon name=\"x\"></aui-icon></aui-button>\n      </div>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Assign Issue</aui-heading>\n        <aui-text muted size=\"sm\">Select users to assign to this issue.</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button ghost size=\"sm\"><aui-icon name=\"plus\"></aui-icon></aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-chip removable>\n        <aui-avatar size=\"sm\">AO</aui-avatar>\n        AgentOS\n      </aui-chip>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
           "description": "Issue assignment with selected user token and add action."
         }
       ]
@@ -11678,7 +14168,7 @@
       "name": "profile-card",
       "type": "block",
       "summary": "User profile card with avatar, bio, stats, and actions.",
-      "description": "A card displaying a user's profile information at a glance. Centered layout with a large avatar, name, role, short bio, and a row of key stats. Footer provides edit and messaging actions. Useful for team directories, account pages, or social-style dashboards where you need to present identity alongside engagement metrics.\n",
+      "description": "A card displaying a user's profile information at a glance. Centered layout with a large avatar, name, role, short bio, and an aui-stat row for key metrics. Footer provides edit and messaging actions. Useful for team directories, account pages, or social-style dashboards where you need to present identity alongside engagement metrics.\n",
       "components": [
         "aui-container",
         "aui-inset",
@@ -11688,13 +14178,14 @@
         "aui-stack",
         "aui-heading",
         "aui-text",
+        "aui-stat",
         "aui-avatar",
         "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n        <aui-avatar size=\"lg\">SR</aui-avatar>\n        <aui-stack gap=\"1\" align-items=\"center\">\n          <aui-heading size=\"xl\">Sofia Rodriguez</aui-heading>\n          <aui-text muted size=\"sm\">Senior Product Designer</aui-text>\n        </aui-stack>\n        <aui-text muted size=\"sm\">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>\n        <aui-stack direction=\"row\" gap=\"4\">\n          <aui-stack gap=\"1\" align-items=\"center\">\n            <aui-heading size=\"lg\">12</aui-heading>\n            <aui-text muted size=\"sm\">Projects</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"1\" align-items=\"center\">\n            <aui-heading size=\"lg\">1.2k</aui-heading>\n            <aui-text muted size=\"sm\">Followers</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"1\" align-items=\"center\">\n            <aui-heading size=\"lg\">340</aui-heading>\n            <aui-text muted size=\"sm\">Following</aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-button scrim spacer>Edit profile</aui-button>\n          <aui-button primary accent spacer>Message</aui-button>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n        <aui-avatar size=\"lg\">SR</aui-avatar>\n        <aui-stack gap=\"1\" align-items=\"center\">\n          <aui-heading size=\"xl\">Sofia Rodriguez</aui-heading>\n          <aui-text muted size=\"sm\">Senior Product Designer</aui-text>\n        </aui-stack>\n        <aui-text muted size=\"sm\">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>\n        <aui-stack direction=\"row\" gap=\"4\">\n          <aui-stat label=\"Projects\" value=\"12\"></aui-stat>\n          <aui-stat label=\"Followers\" value=\"1.2k\"></aui-stat>\n          <aui-stat label=\"Following\" value=\"340\"></aui-stat>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-button scrim spacer>Edit profile</aui-button>\n          <aui-button primary accent spacer>Message</aui-button>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
           "description": "User profile card with avatar, bio, stats, and contact actions."
         }
       ]
@@ -11718,7 +14209,7 @@
       "name": "settings-form",
       "type": "block",
       "summary": "Card with header, form fields, and action footer.",
-      "description": "A structured settings form inside a bordered card container. Header holds the title and description, content holds the fields, footer holds cancel and save actions trailing-aligned.\n",
+      "description": "A structured settings form inside a bordered card container. Header holds the title and description, content holds the fields, footer uses aui-button-group for cancel and save actions.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11731,12 +14222,13 @@
         "aui-field",
         "aui-input",
         "aui-textarea",
-        "aui-button"
+        "aui-button",
+        "aui-button-group"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Project Settings</aui-heading>\n        <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\" width=\"full\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\" width=\"full\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\">\n      <aui-button primary grow=\"1\">Save changes</aui-button>\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Project Settings</aui-heading>\n        <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\" width=\"full\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\" width=\"full\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\">Save changes</aui-button>\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
           "description": "Project settings form with name and description fields."
         }
       ]
@@ -11772,7 +14264,7 @@
       "name": "sidebar-nav",
       "type": "block",
       "summary": "Compact app sidebar with icon navigation and user footer.",
-      "description": "A fixed-width sidebar for app-level navigation. Uses card kind for tighter padding than panel. Nav items are simple row stacks — the active item uses the current attribute for visual distinction. Footer shows the signed-in user with avatar and email. Designed to sit at the left edge of a layout at 14-16rem width.\n",
+      "description": "A fixed-width sidebar for app-level navigation. Uses card kind for tighter padding than panel. Nav items use aui-nav-item elements — the active item uses the active attribute for visual distinction. Footer shows the signed-in user with avatar and email. Designed to sit at the left edge of a layout at 14-16rem width.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11784,12 +14276,13 @@
         "aui-text",
         "aui-icon",
         "aui-avatar",
-        "aui-divider"
+        "aui-divider",
+        "aui-nav-item"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered elevation=\"2\" max-width=\"xs\">\n  <aui-header>\n    <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n    <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" current style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius); background: var(--aui-control);\">\n          <aui-icon name=\"house\" size=\"sm\"></aui-icon>\n          <aui-text size=\"sm\" weight=\"medium\">Dashboard</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n          <aui-icon name=\"star\" size=\"sm\" muted></aui-icon>\n          <aui-text size=\"sm\" muted>Projects</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n          <aui-icon name=\"user\" size=\"sm\" muted></aui-icon>\n          <aui-text size=\"sm\" muted>Team</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);\">\n          <aui-icon name=\"gear\" size=\"sm\" muted></aui-icon>\n          <aui-text size=\"sm\" muted>Settings</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar size=\"sm\">AJ</aui-avatar>\n        <aui-stack gap=\"0\" spacer>\n          <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n          <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered elevation=\"2\" max-width=\"xs\">\n  <aui-header>\n    <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n    <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-nav-item active>\n          <aui-icon name=\"house\"></aui-icon>\n          Dashboard\n        </aui-nav-item>\n        <aui-nav-item muted>\n          <aui-icon name=\"star\"></aui-icon>\n          Projects\n        </aui-nav-item>\n        <aui-nav-item muted>\n          <aui-icon name=\"user\"></aui-icon>\n          Team\n        </aui-nav-item>\n        <aui-nav-item muted>\n          <aui-icon name=\"gear\"></aui-icon>\n          Settings\n        </aui-nav-item>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar size=\"sm\">AJ</aui-avatar>\n        <aui-stack gap=\"0\" spacer>\n          <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n          <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
           "description": "App sidebar with active Dashboard item, three inactive links, and user footer."
         }
       ]
@@ -11824,20 +14317,18 @@
       "name": "stat-cards",
       "type": "block",
       "summary": "Row of compact KPI stat widgets.",
-      "description": "Dashboard-style stat cards in a horizontal row. Each widget shows a muted label, a large numeric value, and a status badge. Uses widget kind for compact padding.\n",
+      "description": "Dashboard-style stat cards in a horizontal row using aui-stat. Each widget shows a label, large value, and optional change text. Intent attrs (success) color the value for positive status. Uses widget kind for compact padding.\n",
       "components": [
         "aui-container",
         "aui-inset",
-        "aui-stack",
-        "aui-heading",
-        "aui-text",
-        "aui-badge"
+        "aui-wrap",
+        "aui-stat"
       ],
       "kind": "widget",
       "examples": [
         {
-          "html": "<aui-wrap gap=\"3\">\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Active Users</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" spacer>12</aui-heading>\n          <aui-badge accent>+3 today</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Uptime</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" spacer>99.9%</aui-heading>\n          <aui-badge success>All systems operational</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-text muted size=\"sm\">Open Issues</aui-text>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-heading size=\"2xl\" spacer>3</aui-heading>\n          <aui-badge warning>Needs review</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n</aui-wrap>\n",
-          "description": "Three KPI stat cards showing active users, uptime, and open issues."
+          "html": "<aui-wrap gap=\"3\">\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Active Users\" value=\"12\" trend=\"up\" change=\"+3 today\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Uptime\" value=\"99.9%\" success change=\"All systems operational\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Open Issues\" value=\"3\" change=\"Needs review\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n</aui-wrap>\n",
+          "description": "Three KPI stat cards using aui-stat with trend and status change text."
         }
       ]
     },
@@ -11853,7 +14344,8 @@
         "aui-heading",
         "aui-text",
         "aui-icon",
-        "aui-button"
+        "aui-button",
+        "aui-button-group"
       ],
       "kind": "card",
       "examples": [
@@ -11862,7 +14354,7 @@
           "description": "Success confirmation after payment."
         },
         {
-          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" danger max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"warning-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Something went wrong</aui-heading>\n      <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>\n      <aui-stack direction=\"row\" gap=\"2\" width=\"full\">\n        <aui-button outline width=\"full\">Contact Support</aui-button>\n        <aui-button primary width=\"full\">Try Again</aui-button>\n      </aui-stack>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" danger max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"warning-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Something went wrong</aui-heading>\n      <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>\n      <aui-button-group>\n        <aui-button outline width=\"full\">Contact Support</aui-button>\n        <aui-button primary width=\"full\">Try Again</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
           "description": "Error state with retry and support actions."
         }
       ]
@@ -11871,7 +14363,7 @@
       "name": "suggested-labs",
       "type": "block",
       "summary": "Lab order card with categorized tests and routing actions.",
-      "description": "A clinical decision-support card listing suggested laboratory tests. Each row shows the test panel name, a brief rationale, and a condition badge. A primary action routes the order to the assigned physician, with secondary actions for drafting or staging.\n",
+      "description": "A clinical decision-support card listing suggested laboratory tests. Each row shows the test panel name, a brief rationale, and a condition badge. A primary action routes the order to the assigned physician, with secondary actions in an aui-button-group for drafting or staging.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11883,12 +14375,13 @@
         "aui-text",
         "aui-badge",
         "aui-button",
+        "aui-button-group",
         "aui-divider"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Suggested Labs</aui-heading>\n        <aui-text muted size=\"sm\">Based on your symptoms and family history</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"3\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">RF + Anti-CCP</aui-heading>\n            <aui-text muted size=\"sm\">Rheumatoid Arthritis markers</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ESR + CRP</aui-heading>\n            <aui-text muted size=\"sm\">Inflammation levels</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA / Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">TSH + Free T4</aui-heading>\n            <aui-text muted size=\"sm\">Thyroid function</aui-text>\n          </aui-stack>\n          <aui-badge accent>Hypothyroidism</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ANA</aui-heading>\n            <aui-text muted size=\"sm\">Autoimmune screen</aui-text>\n          </aui-stack>\n          <aui-badge accent>Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">CBC + Ferritin</aui-heading>\n            <aui-text muted size=\"sm\">Anemia workup</aui-text>\n          </aui-stack>\n          <aui-badge accent>Iron Deficiency</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack gap=\"2\">\n      <aui-button primary width=\"full\">Order Now — Route to Dr. Martinez</aui-button>\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-button scrim grow=\"1\">Add to Draft Order</aui-button>\n        <aui-button scrim grow=\"1\">Build Draft for Doctor</aui-button>\n      </aui-stack>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Suggested Labs</aui-heading>\n        <aui-text muted size=\"sm\">Based on your symptoms and family history</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"3\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">RF + Anti-CCP</aui-heading>\n            <aui-text muted size=\"sm\">Rheumatoid Arthritis markers</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ESR + CRP</aui-heading>\n            <aui-text muted size=\"sm\">Inflammation levels</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA / Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">TSH + Free T4</aui-heading>\n            <aui-text muted size=\"sm\">Thyroid function</aui-text>\n          </aui-stack>\n          <aui-badge accent>Hypothyroidism</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ANA</aui-heading>\n            <aui-text muted size=\"sm\">Autoimmune screen</aui-text>\n          </aui-stack>\n          <aui-badge accent>Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">CBC + Ferritin</aui-heading>\n            <aui-text muted size=\"sm\">Anemia workup</aui-text>\n          </aui-stack>\n          <aui-badge accent>Iron Deficiency</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack gap=\"2\">\n      <aui-button primary width=\"full\">Order Now — Route to Dr. Martinez</aui-button>\n      <aui-button-group>\n        <aui-button scrim grow=\"1\">Add to Draft Order</aui-button>\n        <aui-button scrim grow=\"1\">Build Draft for Doctor</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
           "description": "Suggested lab panel card with condition badges and physician routing actions."
         }
       ]
@@ -11912,7 +14405,7 @@
       "name": "survey-card",
       "type": "block",
       "summary": "Survey question card with checkbox options and submit action.",
-      "description": "A card presenting a multiple-choice survey question. Each option is a labeled checkbox that users can toggle. Includes a submit button so the card feels complete and actionable — not just a floating question. Useful for onboarding flows, feedback, or preference selection.\n",
+      "description": "A card presenting a multiple-choice survey question. Checkbox options are grouped in an aui-fieldset legend=\"Sources\" (borderless) for semantic grouping. Footer uses aui-button-group for skip/continue actions. Useful for onboarding flows, feedback, or preference selection.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11923,13 +14416,15 @@
         "aui-heading",
         "aui-text",
         "aui-field",
+        "aui-fieldset",
         "aui-checkbox",
-        "aui-button"
+        "aui-button",
+        "aui-button-group"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\" style=\"min-width: 22rem;\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">How did you hear about us?</aui-heading>\n        <aui-text muted size=\"sm\">Select all that apply.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"3\">\n        <aui-field>\n          <aui-checkbox>Social Media</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Search Engine</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Friend or Colleague</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Blog or Article</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Other</aui-checkbox>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\">\n      <aui-button scrim grow=\"1\">Skip</aui-button>\n      <aui-button primary grow=\"1\">Continue</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\" style=\"min-width: 22rem;\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">How did you hear about us?</aui-heading>\n        <aui-text muted size=\"sm\">Select all that apply.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-fieldset legend=\"Sources\" borderless>\n        <aui-field>\n          <aui-checkbox>Social Media</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Search Engine</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Friend or Colleague</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Blog or Article</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Other</aui-checkbox>\n        </aui-field>\n      </aui-fieldset>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\">Skip</aui-button>\n      <aui-button primary grow=\"1\">Continue</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
           "description": "Survey with checkbox options, header/content/footer structure, and skip/continue actions."
         }
       ]
@@ -11956,7 +14451,7 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"content\">\n      <aui-segmented-control value=\"codespaces\">\n        <aui-segment value=\"codespaces\">Codespaces</aui-segment>\n        <aui-segment value=\"local\">Local</aui-segment>\n      </aui-segmented-control>\n    </span>\n  </aui-header>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Codespaces</aui-heading>\n        <aui-text muted size=\"sm\">Your workspaces in the cloud</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-button label=\"Add\" icon-leading=\"plus\" scrim hide-label></aui-button>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\" align-items=\"center\" text=\"center\" style=\"padding: 1.5rem 0;\">\n        <div style=\"width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;\">\n          <aui-icon name=\"gear\" style=\"--aui-icon-size: 3rem;\" muted></aui-icon>\n        </div>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"md\">No codespaces</aui-heading>\n          <aui-text muted size=\"sm\">You don't have any codespaces with this repository checked out</aui-text>\n        </aui-stack>\n        <aui-button primary accent>Create Codespace</aui-button>\n        <aui-text muted size=\"xs\"><a href=\"#\">Learn more about codespaces</a></aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"xs\">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"content\">\n      <aui-segmented-control value=\"codespaces\">\n        <aui-segment value=\"codespaces\">Codespaces</aui-segment>\n        <aui-segment value=\"local\">Local</aui-segment>\n      </aui-segmented-control>\n    </span>\n  </aui-header>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Codespaces</aui-heading>\n        <aui-text muted size=\"sm\">Your workspaces in the cloud</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-button label=\"Add\" icon-leading=\"plus\" scrim hide-label></aui-button>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\" align-items=\"center\" text=\"center\" style=\"padding: 1.5rem 0;\">\n        <div style=\"width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;\">\n          <aui-icon name=\"gear\" size=\"3xl\" muted></aui-icon>\n        </div>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"md\">No codespaces</aui-heading>\n          <aui-text muted size=\"sm\">You don't have any codespaces with this repository checked out</aui-text>\n        </aui-stack>\n        <aui-button primary accent>Create Codespace</aui-button>\n        <aui-text muted size=\"xs\"><a href=\"#\">Learn more about codespaces</a></aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"xs\">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
           "description": "Codespaces panel with tab selector and empty state."
         }
       ]
@@ -11965,21 +14460,16 @@
       "name": "team-empty",
       "type": "block",
       "summary": "Empty state for team member lists with invite action.",
-      "description": "An inviting empty state shown when a team or project has no members yet. Features a large user icon in a contained avatar, a clear heading, helpful description, and an invite action button. Simpler than the generic empty-state block — purpose-built for team contexts.\n",
+      "description": "An inviting empty state shown when a team or project has no members yet. Uses aui-empty-state with a users icon, heading, description, and an invite action button. Purpose-built for team contexts.\n",
       "components": [
         "aui-container",
-        "aui-inset",
-        "aui-stack",
-        "aui-heading",
-        "aui-text",
-        "aui-avatar",
-        "aui-icon",
+        "aui-empty-state",
         "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-avatar size=\"xl\" square><aui-icon name=\"user\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">No Team Members</aui-heading>\n        <aui-text muted size=\"sm\">Invite your team to collaborate on this project.</aui-text>\n      </aui-stack>\n      <aui-button primary accent>Invite Members</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-empty-state icon=\"users-three\" heading=\"No Team Members\" description=\"Invite your team to collaborate on this project.\">\n    <aui-button accent>Invite Members</aui-button>\n  </aui-empty-state>\n</aui-container>\n",
           "description": "Team empty state with icon, heading, description, and invite button."
         }
       ]
@@ -11987,8 +14477,8 @@
     {
       "name": "usage-billing",
       "type": "block",
-      "summary": "Billing usage panel with SVG progress rings and cost breakdown.",
-      "description": "A card showing current billing cycle usage broken down by service line item. Each row has a circular SVG progress ring showing utilization, a service name, and a cost or usage/limit value. Rings use stroke-dashoffset to render accurate fill levels. Use for billing dashboards, plan overviews, or resource monitoring.\n",
+      "summary": "Billing usage panel with progress circle rings and cost breakdown.",
+      "description": "A card showing current billing cycle usage broken down by service line item. Each row has an aui-progress-circle size=\"sm\" showing utilization, a service name, and a cost or usage/limit value. Use for billing dashboards, plan overviews, or resource monitoring.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -11997,13 +14487,14 @@
         "aui-stack",
         "aui-heading",
         "aui-text",
-        "aui-divider"
+        "aui-divider",
+        "aui-progress-circle"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"content\"><aui-text muted size=\"sm\">5 days remaining in cycle</aui-text></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"0\">\n\n        <!-- Edge Requests: 91% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-1);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"4.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>Edge Requests</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$1.83K</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Fast Data Transfer: 73% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-2);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"13.6\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>Fast Data Transfer</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$952.51</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Monitoring Data Points: 58% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-3);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"21.1\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>Monitoring Data Points</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$901.20</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Web Analytics Events: 42% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-4);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"29.2\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>Web Analytics Events</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$603.71</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- ISR Writes: 26% (524K / 2M) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-5);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"37.2\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>ISR Writes</aui-text>\n          <aui-text muted size=\"sm\">524.52K / 2M</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Function Duration: 0.5% (5.11 / 1K GB Hrs) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style=\"flex-shrink: 0;\" transform=\"rotate(-90)\">\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"var(--aui-border-muted)\" stroke-width=\"2\"/>\n            <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" style=\"stroke: var(--aui-chart-6);\" stroke-width=\"2\"\n              stroke-dasharray=\"50.3\" stroke-dashoffset=\"50\" stroke-linecap=\"round\"/>\n          </svg>\n          <aui-text size=\"sm\" spacer>Function Duration</aui-text>\n          <aui-text muted size=\"sm\">5.11 GB Hrs / 1K GB Hrs</aui-text>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Six billing line items with SVG progress rings at varied fill levels across the color spectrum."
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"content\"><aui-text muted size=\"sm\">5 days remaining in cycle</aui-text></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"0\">\n\n        <!-- Edge Requests: 91% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"91\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>Edge Requests</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$1.83K</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Fast Data Transfer: 73% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"73\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>Fast Data Transfer</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$952.51</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Monitoring Data Points: 58% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"58\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>Monitoring Data Points</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$901.20</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Web Analytics Events: 42% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"42\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>Web Analytics Events</aui-text>\n          <aui-text size=\"sm\" weight=\"medium\">$603.71</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- ISR Writes: 26% (524K / 2M) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"26\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>ISR Writes</aui-text>\n          <aui-text muted size=\"sm\">524.52K / 2M</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Function Duration: 0.5% (5.11 / 1K GB Hrs) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"1\" size=\"sm\"></aui-progress-circle>\n          <aui-text size=\"sm\" spacer>Function Duration</aui-text>\n          <aui-text muted size=\"sm\">5.11 GB Hrs / 1K GB Hrs</aui-text>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
+          "description": "Six billing line items with aui-progress-circle size=\"sm\" at varied fill levels."
         }
       ]
     }