@agent-ui-kit/web-components 0.0.16 → 0.0.17

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

@@ -33,7 +33,7 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 10rem;" data-chart-bars>
+            <aui-stack direction="row" gap="1" align-items="end" style="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>

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

@@ -38,7 +38,7 @@ examples:
                 <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="height: 10rem;">
+              <aui-stack direction="row" gap="2" align-items="end" style="height: 10rem;">
                 <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>

package/dist/docs/blocks/commerce-pricing-table.yaml

@@ -0,0 +1,142 @@
+name: commerce-pricing-table
+type: block
+summary: Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.
+description: |
+  A pricing page layout with a centered header (title + subtitle), a monthly/yearly billing toggle using aui-segmented-control, and three tier cards in a responsive row. The featured Pro tier uses the accent intent on its container for visual emphasis and a "Most Popular" badge. Each card has a tier name, description, price heading, divider, feature checklist with success check icons using color: var(--aui-solid) for intent color, and a CTA button (outline for standard tiers, primary accent width="full" for the featured tier). The Pro card's "Most Popular" badge sits above the heading in a centered stack (align-items="center" text="center"), not in the CTA row. Cards use spacer for equal flex sizing.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-divider
+  - aui-segmented-control
+  - aui-segment
+kind: card
+examples:
+  - description: Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.
+    html: |-
+      <aui-stack gap="4" align-items="center" text="center">
+
+        <!-- Header -->
+        <aui-stack gap="2" align-items="center">
+          <aui-heading size="xl">Simple, transparent pricing</aui-heading>
+          <aui-text muted>Choose the plan that fits your team. Upgrade or downgrade anytime.</aui-text>
+        </aui-stack>
+
+        <!-- Billing toggle -->
+        <aui-segmented-control value="monthly">
+          <aui-segment value="monthly" selected>Monthly</aui-segment>
+          <aui-segment value="yearly">Yearly</aui-segment>
+        </aui-segmented-control>
+
+        <!-- Pricing cards -->
+        <aui-stack direction="row" gap="3" wrap align-items="start">
+
+          <!-- Starter -->
+          <aui-container kind="card" bordered spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2">
+                  <aui-heading size="md">Starter</aui-heading>
+                  <aui-text muted size="sm">For individuals and small projects.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">$9<aui-text muted size="sm" inline> / mo</aui-text></aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">3 projects</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">1 GB storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Email support</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button outline width="full">Get started</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+          <!-- Pro (featured) -->
+          <aui-container kind="card" bordered accent spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2" align-items="center" text="center">
+                  <aui-badge accent>Most Popular</aui-badge>
+                  <aui-heading size="md">Pro</aui-heading>
+                  <aui-text muted size="sm">For growing teams with advanced needs.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">$29<aui-text muted size="sm" inline> / mo</aui-text></aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Unlimited projects</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">50 GB storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Priority support</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">API access</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button primary accent width="full">Get started</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+          <!-- Enterprise -->
+          <aui-container kind="card" bordered spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2">
+                  <aui-heading size="md">Enterprise</aui-heading>
+                  <aui-text muted size="sm">For large organizations with custom requirements.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">Custom</aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Everything in Pro</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Unlimited storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">SSO & SAML</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Dedicated account manager</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button outline width="full">Contact sales</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+        </aui-stack>
+      </aui-stack>

package/dist/docs/blocks/comms-chat-thread.yaml

@@ -0,0 +1,88 @@
+name: comms-chat-thread
+type: block
+summary: Direct message chat thread with sent/received bubbles, typing indicator, and input bar.
+description: |
+  A chat interface panel (max-width="sm", fixed height) with header (avatar, name/status stack with spacer, aui-dropdown-menu for more actions), scrollable message area with received (control background, padding, radius) and sent (solid background, color: var(--aui-solid-ink), padding, radius) message bubbles aligned left/right at max-width: 80%, timestamps, a typing indicator, and a footer input bar with attach button, full-width input (min-width: 0), and primary accent send button.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-input
+  - aui-button
+  - aui-dropdown-menu
+  - aui-option
+  - aui-optgroup
+kind: panel
+examples:
+  - description: Direct message chat thread with sent/received bubbles, typing indicator, and input bar.
+    html: |-
+      <aui-container kind="panel" bordered max-width="sm" style="height: 28rem;">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-avatar size="sm">SC</aui-avatar>
+            <aui-stack gap="0" spacer>
+              <aui-heading size="sm">Sarah Chen</aui-heading>
+              <aui-text muted size="xs">Online</aui-text>
+            </aui-stack>
+            <aui-dropdown-menu label="More" ghost hide-label size="sm">
+              <aui-option value="mute">Mute</aui-option>
+              <aui-option value="search">Search</aui-option>
+              <aui-option value="pin">Pin conversation</aui-option>
+              <aui-optgroup divider>
+                <aui-option value="delete" danger>Delete</aui-option>
+              </aui-optgroup>
+            </aui-dropdown-menu>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack>
+
+              <!-- Received message -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text size="sm">Hey! Have you had a chance to review the token pipeline PR?</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:42 AM</aui-text>
+              </aui-stack>
+
+              <!-- Sent message -->
+              <aui-stack gap="1" align-items="end" style="max-width: 80%; align-self: end;">
+                <aui-container kind="widget" accent class="aui-chat-thread-bubble aui-chat-thread-bubble-sent">
+                  <aui-text size="sm">Yes! Just finished reviewing it. Left a few comments on the transform stage.</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:44 AM</aui-text>
+              </aui-stack>
+
+              <!-- Received message -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text size="sm">Great, I'll take a look. Want to pair on the CSS output format?</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:45 AM</aui-text>
+              </aui-stack>
+
+              <!-- Typing indicator -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text muted size="sm">typing…</aui-text>
+                </aui-container>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-button ghost hide-label label="Attach" icon-leading="paperclip" size="sm"></aui-button>
+            <aui-input placeholder="Type a message…" width="full" size="sm"></aui-input>
+            <aui-button primary accent hide-label label="Send" icon-leading="arrow-up" size="sm"></aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/comms-notification-list.yaml

@@ -0,0 +1,88 @@
+name: comms-notification-list
+type: block
+summary: Notification panel with count badge, mark-all-read action, and categorized items.
+description: |
+  A notifications panel (max-width="sm") with a header showing title heading (no spacer), count badge next to heading, spacer, then a scrim mark-all-read button. Notification items have category-colored solid avatars using the solid attribute (comment=accent chat-dots, mention=warning user, assign=success check, alert=danger warning). Each item has a heading with strong actor/entity names, muted xs timestamp, and optional unread accent dot badge. Items use gap="4" for vertical spacing.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+kind: panel
+examples:
+  - description: Notification panel with count badge, mark-all-read action, and categorized items.
+    html: |-
+      <aui-container kind="panel" bordered max-width="sm">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg">Notifications</aui-heading>
+            <aui-badge>12</aui-badge>
+            <aui-text spacer></aui-text>
+            <aui-button scrim size="sm">Mark all read</aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" accent solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Sarah Chen</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                  <aui-text muted size="xs">2 minutes ago</aui-text>
+                </aui-stack>
+                <aui-badge accent dot></aui-badge>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" warning solid><aui-icon name="user" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Alex Rivera</strong> mentioned you in <strong>Sprint planning</strong></aui-heading>
+                  <aui-text muted size="xs">15 minutes ago</aui-text>
+                </aui-stack>
+                <aui-badge accent dot></aui-badge>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>James Wilson</strong> assigned you to <strong>API migration</strong></aui-heading>
+                  <aui-text muted size="xs">1 hour ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" danger solid><aui-icon name="warning" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm">Build failed on <strong>main</strong> branch</aui-heading>
+                  <aui-text muted size="xs">3 hours ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" accent solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Maria Santos</strong> replied to your comment</aui-heading>
+                  <aui-text muted size="xs">5 hours ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Liam Walker</strong> approved your PR <strong>#142</strong></aui-heading>
+                  <aui-text muted size="xs">Yesterday</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/content-article-card.yaml

@@ -0,0 +1,47 @@
+name: content-article-card
+type: block
+summary: Article preview card with thumbnail, tags, title, excerpt, and author row.
+description: |
+  A vertical article card for content grids and feeds. Top zone is a 16:9 aspect-ratio thumbnail placeholder. Body contains colored tag badges, a title heading, a 3-line clamped excerpt, a divider, and an author row with avatar initials, name, date, and right-aligned read time. The container uses the interactive attribute for hover/click affordance. Suitable for blog listings, documentation indexes, and content hubs.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-avatar
+  - aui-icon
+  - aui-divider
+kind: card
+examples:
+  - description: Article preview card with thumbnail, tags, title, excerpt, and author row.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm" interactive>
+
+        <!-- Thumbnail -->
+        <div style="aspect-ratio: 16/9; background: var(--aui-neutral-3); display: flex; align-items: center; justify-content: center;">
+          <aui-icon name="image" style="--aui-icon-size: 2rem;" muted></aui-icon>
+        </div>
+
+        <!-- Body -->
+        <aui-inset>
+          <aui-stack>
+            <aui-stack direction="row" gap="2">
+              <aui-badge accent>Engineering</aui-badge>
+              <aui-badge success>New</aui-badge>
+            </aui-stack>
+            <aui-stack gap="1">
+              <aui-heading size="md">Building a Scalable Design Token Pipeline</aui-heading>
+              <aui-text muted size="sm" style="-webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;">How we automated our design-to-code workflow using Style Dictionary, custom transforms, and a CI pipeline that keeps tokens in sync across web, iOS, and Android platforms.</aui-text>
+            </aui-stack>
+            <aui-divider></aui-divider>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar size="sm">SR</aui-avatar>
+              <aui-text size="xs" spacer>Sarah Rivera · Mar 12</aui-text>
+              <aui-text size="xs" muted>6 min read</aui-text>
+            </aui-stack>
+          </aui-stack>
+        </aui-inset>
+
+      </aui-container>

package/dist/docs/blocks/dashboard-kpi-grid.yaml

@@ -0,0 +1,72 @@
+name: dashboard-kpi-grid
+type: block
+summary: Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.
+description: |
+  A dashboard overview layout. Header has a title, date range subtitle, and a segmented control for time period selection (24h/7d/30d/90d). Below is a responsive 4-card KPI grid using aui-stat components, each with label, large value, trend direction, change amount, and an aui-sparkline child for inline visualization. Intent attrs (danger, success) color the value when trend direction differs from sentiment.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-segmented-control
+  - aui-segment
+  - aui-sparkline
+kind: widget
+examples:
+  - description: Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.
+    html: |-
+      <aui-stack gap="4">
+
+        <!-- Dashboard header -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-stack gap="1" spacer>
+            <aui-heading size="xl">Overview</aui-heading>
+            <aui-text muted size="sm">Mon, Mar 10 – Sun, Mar 16</aui-text>
+          </aui-stack>
+          <aui-segmented-control value="7d" size="sm">
+            <aui-segment value="24h">24h</aui-segment>
+            <aui-segment value="7d" selected>7d</aui-segment>
+            <aui-segment value="30d">30d</aui-segment>
+            <aui-segment value="90d">90d</aui-segment>
+          </aui-segmented-control>
+        </aui-stack>
+
+        <!-- KPI grid -->
+        <aui-stack direction="row" gap="3" wrap>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Revenue" value="$48.2k" trend="up" change="+12.3%">
+                <aui-sparkline values="40,55,70,60,80,75,95" color="1" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Users" value="2,847" trend="up" change="+8.1%">
+                <aui-sparkline values="50,60,55,70,65,75,90" color="2" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Conversion" value="4.2%" trend="down" change="−0.3%" danger>
+                <aui-sparkline values="70,60,50,55,45,40,35" color="3" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Latency" value="142ms" trend="down" change="−18ms" success>
+                <aui-sparkline values="60,55,65,50,45,40,35" color="4" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+        </aui-stack>
+      </aui-stack>

package/dist/docs/blocks/dashboard-layout.yaml

@@ -16,7 +16,6 @@ components:
   - aui-stat
   - aui-icon
   - aui-avatar
-  - aui-divider
   - aui-nav-item
 kind: card
 examples:

package/dist/docs/blocks/data-activity-log.yaml

@@ -0,0 +1,99 @@
+name: data-activity-log
+type: block
+summary: Chronological activity feed with date groups, semantic icons, and filter controls.
+description: |
+  A panel listing recent activity entries grouped by date. Header has a title and a segmented control for filtering (All/Changes/Comments). Each date group has an uppercase label and a list of activity items. Each item uses a solid-color avatar with a semantic icon (deploy=success, comment=warning, update=accent, create=success, delete=danger), a text description with bold actor and entity names, optional monospace detail, and a timestamp. Groups are separated by dividers.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-segmented-control
+  - aui-segment
+  - aui-divider
+kind: panel
+examples:
+  - description: Chronological activity feed with date groups, semantic icons, and filter controls.
+    html: |-
+      <aui-container kind="panel" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>Activity</aui-heading>
+            <aui-segmented-control value="all" size="sm">
+              <aui-segment value="all" selected>All</aui-segment>
+              <aui-segment value="changes">Changes</aui-segment>
+              <aui-segment value="comments">Comments</aui-segment>
+            </aui-segmented-control>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Today group -->
+              <aui-stack gap="3">
+                <aui-heading group>Today</aui-heading>
+
+                <aui-stack gap="3">
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="arrow-up" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong> to production</aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">commit a1b2c3d</aui-text>
+                      <aui-text size="xs" muted>2 minutes ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                      <aui-text size="xs" muted>15 minutes ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="pencil" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Maria Santos</strong> updated <strong>API rate limits</strong> to 1000 req/min</aui-heading>
+                      <aui-text size="xs" muted>1 hour ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <!-- Yesterday group -->
+              <aui-stack gap="3">
+                <aui-heading group>Yesterday</aui-heading>
+
+                <aui-stack gap="3">
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="plus" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">3 files added</aui-text>
+                      <aui-text size="xs" muted>Yesterday at 4:32 PM</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" danger shrink="0" solid><aui-icon name="trash" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>
+                      <aui-text size="xs" muted>Yesterday at 2:15 PM</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/data-metric-card.yaml

@@ -0,0 +1,50 @@
+name: data-metric-card
+type: block
+summary: Row of KPI metric widgets with sparklines and trend indicators.
+description: |
+  A responsive row of four compact metric cards using the aui-stat component. Each stat displays a label, large numeric value, trend direction with change amount, and an aui-sparkline child for inline visualization. Cards wrap responsively via flex-wrap. Each card uses the widget kind for compact density.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-stat
+  - aui-sparkline
+kind: widget
+examples:
+  - description: Row of KPI metric widgets with sparklines and trend indicators.
+    html: |-
+      <aui-stack direction="row" gap="3" wrap>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Monthly Revenue" value="$48.2k" trend="up" change="+12.3%">
+              <aui-sparkline values="40,55,35,70,60,80,95" color="1" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Active Users" value="2,847" trend="up" change="+8.1%">
+              <aui-sparkline values="60,45,55,50,70,65,85" color="2" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Churn Rate" value="3.2%" trend="up" change="+0.4%" danger>
+              <aui-sparkline values="80,70,60,50,55,40,35" color="3" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Avg. Session" value="4m 32s" trend="up" change="+0:18">
+              <aui-sparkline values="50,60,55,70,65,75,90" color="4" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>