@agent-ui-kit/web-components 0.0.3 → 0.0.4

package/dist/docs/blocks/agent-chat.yaml

@@ -0,0 +1,111 @@
+name: agent-chat
+type: block
+summary: Full agent chat interface with message feed, composer, and suggestion chips.
+description: >
+  Complete chat composition showing a multi-turn conversation between
+  user and AI assistant. Uses aui-agent-panel as the outer shell to
+  coordinate header, feed, and input. Includes message feed with
+  auto-scroll, threaded messages with avatars, markdown rendering,
+  activity indicators, bordered prompt input with action toolbar,
+  and suggestion chips. Demonstrates all aui-agent-* components
+  working together as a cohesive chat experience.
+
+components: [aui-agent-panel, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge, aui-button, aui-icon, aui-agent-feed, aui-agent-thread, aui-agent-message, aui-agent-text, aui-agent-activity, aui-agent-seeds, aui-agent-input, aui-agent-prompt]
+kind: panel
+
+examples:
+  - html: |
+      <aui-agent-panel panel-title="Design Assistant" max-width="xl" style="height: 32rem;">
+        <aui-header dividers>
+          <span slot="leading">
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar square>AI</aui-avatar>
+              <aui-stack gap="0">
+                <aui-heading size="sm">Design Assistant</aui-heading>
+                <aui-text muted size="xs">Claude 3.5 Sonnet</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </span>
+          <aui-badge accent slot="trailing">Online</aui-badge>
+        </aui-header>
+        <aui-agent-feed auto-scroll scrollable>
+          <aui-agent-thread role="user" sender="You">
+            <aui-agent-message role="user">
+              <aui-agent-text format="plain">How should I structure the color system for a component library?</aui-agent-text>
+            </aui-agent-message>
+          </aui-agent-thread>
+          <aui-agent-thread role="assistant" sender="Claude">
+            <aui-avatar>C</aui-avatar>
+            <aui-agent-message role="assistant">
+              <aui-agent-text>I recommend a three-layer approach:
+
+              1. **Primitives** — raw OKLCH values organized by hue family
+              2. **Semantic tokens** — purpose-driven aliases like `--ink`, `--fill`, `--border`
+              3. **Component tokens** — scoped overrides like `--button-bg`, `--card-border`
+
+              This gives you theme-ability at layer 1, consistency at layer 2, and precision at layer 3.</aui-agent-text>
+            </aui-agent-message>
+            <aui-agent-message role="assistant">
+              <aui-agent-text>Want me to draft a token file for your palette?</aui-agent-text>
+            </aui-agent-message>
+          </aui-agent-thread>
+          <aui-agent-thread role="user" sender="You">
+            <aui-agent-message role="user">
+              <aui-agent-text format="plain">Yes, use OKLCH with a blue accent.</aui-agent-text>
+            </aui-agent-message>
+          </aui-agent-thread>
+          <aui-agent-thread role="assistant" sender="Claude">
+            <aui-avatar>C</aui-avatar>
+            <aui-agent-message role="assistant" status="streaming">
+              <aui-agent-activity type="thinking" active></aui-agent-activity>
+            </aui-agent-message>
+          </aui-agent-thread>
+        </aui-agent-feed>
+        <aui-agent-input>
+          <aui-agent-prompt>
+            <aui-textarea placeholder="Ask a follow-up question..."></aui-textarea>
+          </aui-agent-prompt>
+        </aui-agent-input>
+        <aui-agent-seeds options='[{"value":"tokens","label":"Generate token file"},{"value":"themes","label":"Add dark theme"},{"value":"chart","label":"Chart palette"}]'></aui-agent-seeds>
+      </aui-agent-panel>
+    description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips.
+
+  - html: |
+      <aui-agent-panel panel-title="Code Review" max-width="xl" style="height: 28rem;">
+        <aui-header dividers>
+          <span slot="leading">
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar square>C</aui-avatar>
+              <aui-heading size="sm">Code Review</aui-heading>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-agent-feed auto-scroll scrollable>
+          <aui-agent-thread role="assistant" sender="Claude">
+            <aui-avatar>C</aui-avatar>
+            <aui-agent-message role="assistant">
+              <aui-agent-text>I've analyzed your pull request. Here's what I found:
+
+              **2 issues**, **1 suggestion**, **0 blockers**
+
+              ### Issue 1: Memory leak in useSubscription
+
+              The useEffect cleanup doesn't unsubscribe from the WebSocket channel. This will cause duplicate listeners on hot reload.
+
+              ### Issue 2: Missing error boundary
+
+              The Dashboard component catches render errors but doesn't report them to your monitoring service.
+
+              ### Suggestion
+
+              Consider extracting the polling logic into a custom usePolling hook — it's duplicated in 3 files.</aui-agent-text>
+            </aui-agent-message>
+          </aui-agent-thread>
+        </aui-agent-feed>
+        <aui-agent-input>
+          <aui-agent-prompt>
+            <aui-textarea placeholder="Ask about the review..."></aui-textarea>
+          </aui-agent-prompt>
+        </aui-agent-input>
+      </aui-agent-panel>
+    description: Code review chat with structured markdown feedback.

package/dist/docs/blocks/announcement-card.yaml

@@ -0,0 +1,30 @@
+name: announcement-card
+type: block
+summary: Announcement card with image area, description, and contextual footer actions.
+description: >
+  A card featuring a tall image or illustration area at top, followed by
+  a title, description, and footer with a primary action and a contextual
+  badge or label. Use for product announcements, deprecation notices, or
+  feature highlights.
+
+components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm" style="overflow: hidden;">
+        <div style="height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);"></div>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-badge warning>Warning</aui-badge>
+              <aui-heading size="lg">Observability Plus is replacing Monitoring</aui-heading>
+              <aui-text muted size="sm">Switch to the improved way to explore your data with natural language. Monitoring will no longer be available on the Pro plan in November, 2025</aui-text>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading"><aui-button primary>Create Query</aui-button></span>
+        </aui-footer>
+      </aui-container>
+    description: Deprecation announcement with gradient image placeholder and warning badge.

package/dist/docs/blocks/bpm-process.yaml

@@ -0,0 +1,7 @@
+name: bpm-process
+type: block
+summary: Cross-Functional BPM — 16 nodes, 20 connections.
+description: >
+  Visual graph block rendered from the Cross-Functional BPM dataset using
+  aui-graph components with port-selector noodle connections.
+components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]

package/dist/docs/blocks/chart-activity.yaml

@@ -0,0 +1,73 @@
+name: chart-activity
+type: block
+summary: Weekly activity chart with labeled columns and rounded bars.
+description: >
+  A card showing a 7-day activity grid. Each column has a day label and a
+  tall container with a rounded bar showing the day's activity level. The
+  bar height is proportional to the value. Use for fitness summaries,
+  commit frequency, or daily usage patterns.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Weekly Fitness Summary</aui-heading>
+              <aui-text muted size="sm">Calories and workout load by day</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack direction="row" gap="2">
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">M</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 78%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">T</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">W</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">T</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">F</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">S</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 25%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+              <aui-stack gap="1" align-items="center" spacer>
+                <aui-text muted size="xs">S</aui-text>
+                <div style="width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;">
+                  <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </div>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Weekly activity bars with day labels showing fitness load.

package/dist/docs/blocks/chart-card.yaml

@@ -0,0 +1,55 @@
+name: chart-card
+type: block
+summary: Simple vertical bar chart card with month labels.
+description: >
+  A card showing a 6-month bar chart built with CSS. Header has the
+  chart title and date range, content shows proportional bars with
+  month labels, footer shows a trend summary. The simplest chart
+  pattern — one data series, one color, clear labels.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Visitors</aui-heading>
+              <aui-text muted size="sm">January – June 2026</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="1">
+              <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 8rem;">
+                <div style="flex: 1; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 72%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 58%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 85%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <aui-stack direction="row" gap="1">
+                <aui-text muted size="xs" spacer align-items="center">Jan</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Feb</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Mar</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Apr</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">May</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Jun</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="md">Trending up by 5.2% this month</aui-heading>
+              <aui-text muted size="sm">Showing total visitors for the last 6 months</aui-text>
+            </aui-stack>
+          </span>
+        </aui-footer>
+      </aui-container>
+    description: Simple 6-month visitor bar chart with trend footer.

package/dist/docs/blocks/chart-donut.yaml

@@ -0,0 +1,83 @@
+name: chart-donut
+type: block
+summary: Donut chart card with center stat, legend, and selected segment footer.
+description: >
+  A card showing a CSS-drawn donut/ring chart with a center value, a legend
+  row below the chart, and a footer showing the selected segment's value.
+  Use for distribution data like browser share, traffic sources, or
+  category breakdowns.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Browser Share</aui-heading>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-badge>Firefox</aui-badge>
+                <aui-text muted size="sm">January – June 2026</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4" align-items="center">
+              <!-- Donut chart via SVG -->
+              <div style="position: relative; width: 9rem; height: 9rem;">
+                <svg viewBox="0 0 100 100" style="width: 100%; height: 100%; transform: rotate(-90deg);">
+                  <!--
+                    C = 2π × 38 = 238.76  Gap = 2 units per segment end
+                    Seg1 (60%): draw = 143.26 - 2 = 141.26  offset = 0
+                    Seg2 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 143.26 = 95.5
+                    Seg3 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 191.01 = 47.75
+                  -->
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-1);" stroke-width="12" stroke-dasharray="141.26 238.76" stroke-dashoffset="0"    stroke-linecap="butt"/>
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-2);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="95.5"  stroke-linecap="butt"/>
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-3);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="47.75" stroke-linecap="butt"/>
+                </svg>
+                <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
+                  <aui-heading size="xl">1,125</aui-heading>
+                  <aui-text muted size="xs">Visitors</aui-text>
+                </div>
+              </div>
+              <!-- Legend -->
+              <aui-wrap gap="3" style="justify-content: center;">
+                <aui-stack direction="row" gap="1" align-items="center">
+                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-1); flex-shrink: 0;"></div>
+                  <aui-text muted size="xs">Chrome</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="1" align-items="center">
+                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-2); flex-shrink: 0;"></div>
+                  <aui-text muted size="xs">Safari</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="1" align-items="center">
+                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-3); flex-shrink: 0;"></div>
+                  <aui-text muted size="xs">Firefox</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="1" align-items="center">
+                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-4); flex-shrink: 0;"></div>
+                  <aui-text muted size="xs">Edge</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="1" align-items="center">
+                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-5); flex-shrink: 0;"></div>
+                  <aui-text muted size="xs">Other</aui-text>
+                </aui-stack>
+              </aui-wrap>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading">
+            <aui-stack direction="row" gap="2" align-items="center" width="full">
+              <aui-heading size="md" spacer>Firefox</aui-heading>
+              <aui-text muted size="sm">26%</aui-text>
+            </aui-stack>
+          </span>
+        </aui-footer>
+      </aui-container>
+    description: Donut chart showing browser share with Firefox selected.

package/dist/docs/blocks/chart-grouped.yaml

@@ -0,0 +1,75 @@
+name: chart-grouped
+type: block
+summary: Grouped vertical bar chart comparing two data series.
+description: >
+  A card showing paired vertical bars per category for comparing
+  two metrics side by side (e.g. Desktop vs Mobile). Labels are
+  in a separate row below so bar height percentages resolve
+  correctly against the constrained bar area.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Visitors by Device</aui-heading>
+              <aui-text muted size="sm">January – June 2026</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="1">
+              <!-- Bars: paired groups as direct children of align-items="end" row -->
+              <aui-stack direction="row" gap="3" align-items="end" spacer style="min-height: 9rem;">
+                <!-- Chrome: Desktop 55%, Mobile 40% -->
+                <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
+                  <div style="flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                  <div style="flex: 1; height: 40%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </aui-stack>
+                <!-- Safari: Desktop 45%, Mobile 50% -->
+                <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
+                  <div style="flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                  <div style="flex: 1; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </aui-stack>
+                <!-- Firefox: Desktop 70%, Mobile 90% -->
+                <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
+                  <div style="flex: 1; height: 70%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                  <div style="flex: 1; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </aui-stack>
+                <!-- Edge: Desktop 35%, Mobile 30% -->
+                <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
+                  <div style="flex: 1; height: 35%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                  <div style="flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </aui-stack>
+                <!-- Other: Desktop 25%, Mobile 20% -->
+                <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
+                  <div style="flex: 1; height: 25%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                  <div style="flex: 1; height: 20%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                </aui-stack>
+              </aui-stack>
+              <!-- Category labels row -->
+              <aui-stack direction="row" gap="3">
+                <aui-text muted size="xs" spacer align-items="center">Chrome</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Safari</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Firefox</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Edge</aui-text>
+                <aui-text muted size="xs" spacer align-items="center">Other</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="md">Mobile overtook Desktop in March</aui-heading>
+              <aui-text muted size="sm">Showing Desktop (light) and Mobile (dark) visitors</aui-text>
+            </aui-stack>
+          </span>
+        </aui-footer>
+      </aui-container>
+    description: Grouped bars with category labels below, Desktop at 60% opacity and Mobile at full opacity.

package/dist/docs/blocks/chart-horizontal.yaml

@@ -0,0 +1,59 @@
+name: chart-horizontal
+type: block
+summary: Horizontal bar chart with category labels.
+description: >
+  A card showing horizontal bars for comparing categories. Each row
+  has a fixed-width right-aligned label and a proportional bar sized
+  via max-width percentage. Useful for browser share, feature usage,
+  or any ranked categorical data.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Browser Share</aui-heading>
+              <aui-text muted size="sm">January – June 2026</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="3">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-text size="sm" text="right" style="width: 4rem;">Chrome</aui-text>
+                <div style="width: 85%; height: 1.25rem; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-text size="sm" text="right" style="width: 4rem;">Safari</aui-text>
+                <div style="width: 65%; height: 1.25rem; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-text size="sm" text="right" style="width: 4rem;">Firefox</aui-text>
+                <div style="width: 55%; height: 1.25rem; background: var(--aui-chart-3); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-text size="sm" text="right" style="width: 4rem;">Edge</aui-text>
+                <div style="width: 45%; height: 1.25rem; background: var(--aui-chart-4); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-text size="sm" text="right" style="width: 4rem;">Other</aui-text>
+                <div style="width: 25%; height: 1.25rem; background: var(--aui-chart-5); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="md">Chrome leads at 42%</aui-heading>
+              <aui-text muted size="sm">Showing browser usage for the last 6 months</aui-text>
+            </aui-stack>
+          </span>
+        </aui-footer>
+      </aui-container>
+    description: Horizontal bar chart comparing browser market share with proportional bars.

package/dist/docs/blocks/chart-interactive.yaml

@@ -0,0 +1,58 @@
+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.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-bar]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered>
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Total Visitors</aui-heading>
+              <aui-text muted size="sm">Last 3 months</aui-text>
+            </aui-stack>
+          </span>
+          <span slot="trailing">
+            <aui-stack direction="row" gap="4">
+              <aui-stack gap="1" align-items="end">
+                <aui-text muted size="xs">Desktop</aui-text>
+                <aui-heading size="xl">24,828</aui-heading>
+              </aui-stack>
+              <aui-stack gap="1" align-items="end">
+                <aui-text muted size="xs">Mobile</aui-text>
+                <aui-heading size="xl">25,010</aui-heading>
+              </aui-stack>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 10rem;" data-chart-bars>
+              <aui-bar label="Apr 1 · 3,120" style="height: 35%;"></aui-bar>
+              <aui-bar label="Apr 8 · 4,890" style="height: 55%;"></aui-bar>
+              <aui-bar label="Apr 15 · 3,740" style="height: 42%;"></aui-bar>
+              <aui-bar label="Apr 22 · 6,050" style="height: 68%;"></aui-bar>
+              <aui-bar label="Apr 29 · 4,010" style="height: 45%;"></aui-bar>
+              <aui-bar label="May 6 · 6,940" style="height: 78%;"></aui-bar>
+              <aui-bar label="May 13 · 4,630" style="height: 52%;"></aui-bar>
+              <aui-bar label="May 20 · 5,340" style="height: 60%;"></aui-bar>
+              <aui-bar label="May 27 · 8,010" style="height: 90%;" highlighted></aui-bar>
+              <aui-bar label="Jun 3 · 6,410" style="height: 72%;"></aui-bar>
+              <aui-bar label="Jun 10 · 4,270" style="height: 48%;"></aui-bar>
+              <aui-bar label="Jun 17 · 3,380" style="height: 38%;" highlighted></aui-bar>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="content"><aui-text muted size="sm">April 1 – June 29, 2026</aui-text></span>
+        </aui-footer>
+      </aui-container>
+    description: Wide dashboard chart with stat tabs and 12-bar dense visualization.

package/dist/docs/blocks/chart-labeled.yaml

@@ -0,0 +1,66 @@
+name: chart-labeled
+type: block
+summary: Vertical bar chart with value labels above each bar.
+description: >
+  A card showing vertical bars with exact values displayed above
+  and month labels below. Labels and bars are in separate rows so
+  percentage heights resolve correctly. Alternating opacity adds
+  visual rhythm. Useful when exact numbers matter as much as the trend.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Monthly Visitors</aui-heading>
+              <aui-text muted size="sm">January – June 2026</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="1">
+              <!-- Value labels row -->
+              <aui-stack direction="row" gap="2">
+                <aui-text muted size="xs" spacer text="center">186</aui-text>
+                <aui-text muted size="xs" spacer text="center">305</aui-text>
+                <aui-text muted size="xs" spacer text="center">237</aui-text>
+                <aui-text muted size="xs" spacer text="center">73</aui-text>
+                <aui-text muted size="xs" spacer text="center">209</aui-text>
+                <aui-text muted size="xs" spacer text="center">214</aui-text>
+              </aui-stack>
+              <!-- Bars: direct children of align-items="end" row so height % resolves against 8rem -->
+              <aui-stack direction="row" gap="2" align-items="end" spacer style="min-height: 8rem;">
+                <div style="flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 75%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 58%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 18%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 51%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
+                <div style="flex: 1; height: 52%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
+              </aui-stack>
+              <!-- Month labels row -->
+              <aui-stack direction="row" gap="2">
+                <aui-text muted size="xs" spacer text="center">Jan</aui-text>
+                <aui-text muted size="xs" spacer text="center">Feb</aui-text>
+                <aui-text muted size="xs" spacer text="center">Mar</aui-text>
+                <aui-text muted size="xs" spacer text="center">Apr</aui-text>
+                <aui-text muted size="xs" spacer text="center">May</aui-text>
+                <aui-text muted size="xs" spacer text="center">Jun</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="md">February peaked at 305 visitors</aui-heading>
+              <aui-text muted size="sm">Showing total visitors for the last 6 months</aui-text>
+            </aui-stack>
+          </span>
+        </aui-footer>
+      </aui-container>
+    description: Labeled bar chart with value labels row, bar row, and month labels row.