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

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

@@ -3,11 +3,11 @@ 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.
+  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.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-bar]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-stat, aui-bar]
 kind: card
 
 examples:
@@ -22,14 +22,8 @@ examples:
           </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-stat label="Desktop" value="24,828"></aui-stat>
+              <aui-stat label="Mobile" value="25,010"></aui-stat>
             </aui-stack>
           </span>
         </aui-header>

package/dist/docs/blocks/checkout-form.yaml

@@ -3,11 +3,12 @@ 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.
+  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.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-textarea, aui-checkbox, aui-button, aui-divider]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-fieldset, aui-input, aui-textarea, aui-checkbox, aui-button, aui-button-group, aui-divider]
 kind: card
 
 examples:
@@ -36,22 +37,21 @@ examples:
                 </aui-field>
               </aui-stack>
               <aui-divider></aui-divider>
-              <aui-stack gap="1">
-                <aui-heading size="md">Billing Address</aui-heading>
+              <aui-fieldset legend="Billing Address" borderless>
                 <aui-text muted size="sm">The address associated with your payment method</aui-text>
-              </aui-stack>
-              <aui-checkbox>Same as shipping address</aui-checkbox>
-              <aui-field label="Comments" width="full">
-                <aui-textarea width="full" placeholder="Add any additional comments"></aui-textarea>
-              </aui-field>
+                <aui-checkbox>Same as shipping address</aui-checkbox>
+                <aui-field label="Comments" width="full">
+                  <aui-textarea width="full" placeholder="Add any additional comments"></aui-textarea>
+                </aui-field>
+              </aui-fieldset>
             </aui-stack>
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <aui-stack direction="row" gap="2">
+          <aui-button-group>
             <aui-button scrim grow="1">Cancel</aui-button>
             <aui-button primary grow="1">Submit Payment</aui-button>
-          </aui-stack>
+          </aui-button-group>
         </aui-footer>
       </aui-container>
     description: Payment form with card details, billing address toggle, comments, and submit/cancel actions.

package/dist/docs/blocks/contributors.yaml

@@ -1,12 +1,13 @@
 name: contributors
 type: block
-summary: Contributors card showing avatar grid with count and overflow link.
+summary: Contributors card showing overlapping avatar group 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.
+  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.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-avatar-group, aui-badge]
 kind: card
 
 examples:
@@ -22,30 +23,28 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="2">
-              <aui-wrap gap="2">
-                <aui-avatar>AJ</aui-avatar>
-                <aui-avatar>BK</aui-avatar>
-                <aui-avatar>CL</aui-avatar>
-                <aui-avatar>DM</aui-avatar>
-                <aui-avatar>EP</aui-avatar>
-                <aui-avatar>FW</aui-avatar>
-                <aui-avatar>GR</aui-avatar>
-                <aui-avatar>HN</aui-avatar>
-                <aui-avatar>IQ</aui-avatar>
-                <aui-avatar>JT</aui-avatar>
-                <aui-avatar>KS</aui-avatar>
-                <aui-avatar>LV</aui-avatar>
-                <aui-avatar>MX</aui-avatar>
-                <aui-avatar>NY</aui-avatar>
-                <aui-avatar>OZ</aui-avatar>
-                <aui-avatar>PA</aui-avatar>
-              </aui-wrap>
-            </aui-stack>
+            <aui-avatar-group max="8">
+              <aui-avatar>AJ</aui-avatar>
+              <aui-avatar>BK</aui-avatar>
+              <aui-avatar>CL</aui-avatar>
+              <aui-avatar>DM</aui-avatar>
+              <aui-avatar>EP</aui-avatar>
+              <aui-avatar>FW</aui-avatar>
+              <aui-avatar>GR</aui-avatar>
+              <aui-avatar>HN</aui-avatar>
+              <aui-avatar>IQ</aui-avatar>
+              <aui-avatar>JT</aui-avatar>
+              <aui-avatar>KS</aui-avatar>
+              <aui-avatar>LV</aui-avatar>
+              <aui-avatar>MX</aui-avatar>
+              <aui-avatar>NY</aui-avatar>
+              <aui-avatar>OZ</aui-avatar>
+              <aui-avatar>PA</aui-avatar>
+            </aui-avatar-group>
           </aui-inset>
         </aui-content>
         <aui-footer>
           <span slot="leading"><aui-text muted size="sm" style="text-decoration: underline; cursor: pointer;">+ 810 contributors</aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Contributors grid with count badge and overflow link.
+    description: Contributors avatar group with count badge and overflow link.

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

@@ -4,12 +4,12 @@ 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
+  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 stat cards. This is a starting composition —
+  responsive grid of aui-stat widgets. This is a starting composition —
   the content area would hold tables, charts, or lists in a real app.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-wrap, aui-heading, aui-text, aui-icon, aui-avatar, aui-badge, aui-divider]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-wrap, aui-heading, aui-text, aui-stat, aui-icon, aui-avatar, aui-divider, aui-nav-item]
 kind: card
 
 examples:
@@ -24,22 +24,22 @@ examples:
           <aui-content>
             <aui-inset>
               <aui-stack gap="2">
-                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius); background: var(--aui-control);">
-                  <aui-icon name="house" size="sm"></aui-icon>
-                  <aui-text size="sm" weight="medium">Dashboard</aui-text>
-                </aui-stack>
-                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                  <aui-icon name="star" size="sm" muted></aui-icon>
-                  <aui-text size="sm" muted>Projects</aui-text>
-                </aui-stack>
-                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                  <aui-icon name="user" size="sm" muted></aui-icon>
-                  <aui-text size="sm" muted>Team</aui-text>
-                </aui-stack>
-                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                  <aui-icon name="gear" size="sm" muted></aui-icon>
-                  <aui-text size="sm" muted>Settings</aui-text>
-                </aui-stack>
+                <aui-nav-item active>
+                  <aui-icon name="house"></aui-icon>
+                  Dashboard
+                </aui-nav-item>
+                <aui-nav-item muted>
+                  <aui-icon name="star"></aui-icon>
+                  Projects
+                </aui-nav-item>
+                <aui-nav-item muted>
+                  <aui-icon name="user"></aui-icon>
+                  Team
+                </aui-nav-item>
+                <aui-nav-item muted>
+                  <aui-icon name="gear"></aui-icon>
+                  Settings
+                </aui-nav-item>
               </aui-stack>
             </aui-inset>
           </aui-content>
@@ -73,35 +73,17 @@ examples:
             <aui-wrap gap="3">
               <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
                 <aui-inset>
-                  <aui-stack gap="2">
-                    <aui-text muted size="sm">Revenue</aui-text>
-                    <aui-stack direction="row" gap="2" align-items="center">
-                      <aui-heading size="2xl" spacer>$24,500</aui-heading>
-                      <aui-badge accent>+12%</aui-badge>
-                    </aui-stack>
-                  </aui-stack>
+                  <aui-stat label="Revenue" value="$24,500" trend="up" change="+12%"></aui-stat>
                 </aui-inset>
               </aui-container>
               <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
                 <aui-inset>
-                  <aui-stack gap="2">
-                    <aui-text muted size="sm">Active Users</aui-text>
-                    <aui-stack direction="row" gap="2" align-items="center">
-                      <aui-heading size="2xl" spacer>1,240</aui-heading>
-                      <aui-badge success>+8%</aui-badge>
-                    </aui-stack>
-                  </aui-stack>
+                  <aui-stat label="Active Users" value="1,240" trend="up" change="+8%"></aui-stat>
                 </aui-inset>
               </aui-container>
               <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
                 <aui-inset>
-                  <aui-stack gap="2">
-                    <aui-text muted size="sm">Open Tasks</aui-text>
-                    <aui-stack direction="row" gap="2" align-items="center">
-                      <aui-heading size="2xl" spacer>17</aui-heading>
-                      <aui-badge warning>3 overdue</aui-badge>
-                    </aui-stack>
-                  </aui-stack>
+                  <aui-stat label="Open Tasks" value="17" change="3 overdue"></aui-stat>
                 </aui-inset>
               </aui-container>
             </aui-wrap>
@@ -110,7 +92,7 @@ examples:
             <aui-container kind="card" bordered style="min-height: 10rem;">
               <aui-inset>
                 <aui-stack gap="1" align-items="center" text="center" style="padding: 2rem 0;">
-                  <aui-icon name="star" style="--aui-icon-size: 3rem;" muted></aui-icon>
+                  <aui-icon name="star" size="3xl" muted></aui-icon>
                   <aui-text muted size="sm">Charts and tables will appear here.</aui-text>
                 </aui-stack>
               </aui-inset>
@@ -118,4 +100,4 @@ examples:
           </aui-stack>
         </aui-stack>
       </aui-stack>
-    description: Full dashboard shell with sidebar, page header, stat cards, and content placeholder.
+    description: Full dashboard shell with sidebar, page header, aui-stat widgets, and content placeholder.

package/dist/docs/blocks/empty-state.yaml

@@ -8,19 +8,14 @@ description: >
   to replace blank space in lists, tables, or dashboards so users
   always have a clear path forward.
 
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+components: [aui-container, aui-empty-state, aui-button]
 kind: card
 
 examples:
   - html: |
       <aui-container kind="card" bordered max-width="sm">
-        <aui-inset>
-          <aui-stack gap="4" align-items="center" text="center">
-            <aui-icon name="star" style="--aui-icon-size: 3rem;" muted></aui-icon>
-            <aui-heading size="xl">No projects yet</aui-heading>
-            <aui-text muted>Create your first project to get started. Projects help you organize your work and collaborate with your team.</aui-text>
-            <aui-button primary accent width="full">Create project</aui-button>
-          </aui-stack>
-        </aui-inset>
+        <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.">
+          <aui-button accent>Create project</aui-button>
+        </aui-empty-state>
       </aui-container>
     description: Empty state prompting the user to create their first project.

package/dist/docs/blocks/env-variables.yaml

@@ -4,9 +4,9 @@ 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.
+  Footer uses aui-button-group for edit and deploy actions.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button, aui-button-group]
 kind: card
 
 examples:

package/dist/docs/blocks/feature-upgrade.yaml

@@ -5,9 +5,9 @@ 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.
+  primary enable actions in an aui-button-group.
 
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button]
+components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button, aui-button-group]
 kind: card
 
 examples:
@@ -43,10 +43,10 @@ examples:
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <aui-stack direction="row" gap="2">
+          <aui-button-group>
             <aui-button scrim grow="1">Cancel</aui-button>
             <aui-button primary grow="1">Enable with $100 credits</aui-button>
-          </aui-stack>
+          </aui-button-group>
         </aui-footer>
       </aui-container>
     description: Feature upgrade card with benefits checklist and trial credit offer.

package/dist/docs/blocks/issue-assign.yaml

@@ -3,10 +3,11 @@ 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.
+  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.
 
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button, aui-icon]
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-chip, aui-button, aui-icon]
 kind: card
 
 examples:
@@ -23,11 +24,10 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <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;">
+            <aui-chip removable>
               <aui-avatar size="sm">AO</aui-avatar>
-              <aui-text size="sm" spacer>AgentOS</aui-text>
-              <aui-button ghost size="sm"><aui-icon name="x"></aui-icon></aui-button>
-            </div>
+              AgentOS
+            </aui-chip>
           </aui-inset>
         </aui-content>
       </aui-container>

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

@@ -3,12 +3,12 @@ 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.
+  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.
 
-components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-stat, aui-avatar, aui-button]
 kind: card
 
 examples:
@@ -24,18 +24,9 @@ examples:
               </aui-stack>
               <aui-text muted size="sm">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>
               <aui-stack direction="row" gap="4">
-                <aui-stack gap="1" align-items="center">
-                  <aui-heading size="lg">12</aui-heading>
-                  <aui-text muted size="sm">Projects</aui-text>
-                </aui-stack>
-                <aui-stack gap="1" align-items="center">
-                  <aui-heading size="lg">1.2k</aui-heading>
-                  <aui-text muted size="sm">Followers</aui-text>
-                </aui-stack>
-                <aui-stack gap="1" align-items="center">
-                  <aui-heading size="lg">340</aui-heading>
-                  <aui-text muted size="sm">Following</aui-text>
-                </aui-stack>
+                <aui-stat label="Projects" value="12"></aui-stat>
+                <aui-stat label="Followers" value="1.2k"></aui-stat>
+                <aui-stat label="Following" value="340"></aui-stat>
               </aui-stack>
               <aui-stack direction="row" gap="2">
                 <aui-button scrim spacer>Edit profile</aui-button>

package/dist/docs/blocks/settings-form.yaml

@@ -4,9 +4,9 @@ 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.
+  footer uses aui-button-group for cancel and save actions.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-textarea, aui-button]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-textarea, aui-button, aui-button-group]
 kind: card
 
 examples:
@@ -33,10 +33,10 @@ examples:
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <aui-stack direction="row" gap="2">
+          <aui-button-group>
             <aui-button primary grow="1">Save changes</aui-button>
             <aui-button scrim grow="1">Cancel</aui-button>
-          </aui-stack>
+          </aui-button-group>
         </aui-footer>
       </aui-container>
     description: Project settings form with name and description fields.

package/dist/docs/blocks/sidebar-nav.yaml

@@ -3,12 +3,12 @@ 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.
+  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.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-avatar, aui-divider]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-avatar, aui-divider, aui-nav-item]
 kind: card
 
 examples:
@@ -21,22 +21,22 @@ examples:
         <aui-content>
           <aui-inset>
             <aui-stack gap="2">
-              <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);">
-                <aui-icon name="house" size="sm"></aui-icon>
-                <aui-text size="sm" weight="medium">Dashboard</aui-text>
-              </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                <aui-icon name="star" size="sm" muted></aui-icon>
-                <aui-text size="sm" muted>Projects</aui-text>
-              </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                <aui-icon name="user" size="sm" muted></aui-icon>
-                <aui-text size="sm" muted>Team</aui-text>
-              </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
-                <aui-icon name="gear" size="sm" muted></aui-icon>
-                <aui-text size="sm" muted>Settings</aui-text>
-              </aui-stack>
+              <aui-nav-item active>
+                <aui-icon name="house"></aui-icon>
+                Dashboard
+              </aui-nav-item>
+              <aui-nav-item muted>
+                <aui-icon name="star"></aui-icon>
+                Projects
+              </aui-nav-item>
+              <aui-nav-item muted>
+                <aui-icon name="user"></aui-icon>
+                Team
+              </aui-nav-item>
+              <aui-nav-item muted>
+                <aui-icon name="gear"></aui-icon>
+                Settings
+              </aui-nav-item>
             </aui-stack>
           </aui-inset>
         </aui-content>

package/dist/docs/blocks/stat-cards.yaml

@@ -2,11 +2,12 @@ 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.
+  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.
 
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+components: [aui-container, aui-inset, aui-wrap, aui-stat]
 kind: widget
 
 examples:
@@ -14,36 +15,18 @@ examples:
       <aui-wrap gap="3">
         <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
           <aui-inset>
-            <aui-stack gap="2">
-              <aui-text muted size="sm">Active Users</aui-text>
-              <aui-stack direction="row" gap="2" align-items="center">
-                <aui-heading size="2xl" spacer>12</aui-heading>
-                <aui-badge accent>+3 today</aui-badge>
-              </aui-stack>
-            </aui-stack>
+            <aui-stat label="Active Users" value="12" trend="up" change="+3 today"></aui-stat>
           </aui-inset>
         </aui-container>
         <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
           <aui-inset>
-            <aui-stack gap="2">
-              <aui-text muted size="sm">Uptime</aui-text>
-              <aui-stack direction="row" gap="2" align-items="center">
-                <aui-heading size="2xl" spacer>99.9%</aui-heading>
-                <aui-badge success>All systems operational</aui-badge>
-              </aui-stack>
-            </aui-stack>
+            <aui-stat label="Uptime" value="99.9%" success change="All systems operational"></aui-stat>
           </aui-inset>
         </aui-container>
         <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
           <aui-inset>
-            <aui-stack gap="2">
-              <aui-text muted size="sm">Open Issues</aui-text>
-              <aui-stack direction="row" gap="2" align-items="center">
-                <aui-heading size="2xl" spacer>3</aui-heading>
-                <aui-badge warning>Needs review</aui-badge>
-              </aui-stack>
-            </aui-stack>
+            <aui-stat label="Open Issues" value="3" change="Needs review"></aui-stat>
           </aui-inset>
         </aui-container>
       </aui-wrap>
-    description: Three KPI stat cards showing active users, uptime, and open issues.
+    description: Three KPI stat cards using aui-stat with trend and status change text.

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

@@ -6,7 +6,7 @@ description: >
   or error alerts. Centered layout with icon, heading, description,
   and a primary call-to-action. Uses intent to set the color family.
 
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button, aui-button-group]
 kind: card
 
 examples:
@@ -30,10 +30,10 @@ examples:
             <aui-icon name="warning-circle" size="2xl"></aui-icon>
             <aui-heading size="xl">Something went wrong</aui-heading>
             <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>
-            <aui-stack direction="row" gap="2" width="full">
+            <aui-button-group>
               <aui-button outline width="full">Contact Support</aui-button>
               <aui-button primary width="full">Try Again</aui-button>
-            </aui-stack>
+            </aui-button-group>
           </aui-stack>
         </aui-inset>
       </aui-container>

package/dist/docs/blocks/suggested-labs.yaml

@@ -5,9 +5,9 @@ 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.
+  with secondary actions in an aui-button-group for drafting or staging.
 
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button, aui-divider]
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button, aui-button-group, aui-divider]
 kind: card
 
 examples:
@@ -69,10 +69,10 @@ examples:
         <aui-footer>
           <aui-stack gap="2">
             <aui-button primary width="full">Order Now — Route to Dr. Martinez</aui-button>
-            <aui-stack direction="row" gap="2">
+            <aui-button-group>
               <aui-button scrim grow="1">Add to Draft Order</aui-button>
               <aui-button scrim grow="1">Build Draft for Doctor</aui-button>
-            </aui-stack>
+            </aui-button-group>
           </aui-stack>
         </aui-footer>
       </aui-container>