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

package/dist/docs/blocks/saas-onboarding.yaml

@@ -1,7 +1,225 @@
 name: saas-onboarding
 type: block
 summary: Enterprise SaaS Onboarding — 17 nodes, 19 connections.
-description: >
-  Visual graph block rendered from the Enterprise SaaS Onboarding 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]
+description: |
+  Visual graph block rendered from the Enterprise SaaS Onboarding 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
+examples:
+  - description: Enterprise SaaS Onboarding — 17 nodes, 19 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 41.625rem; min-width: 92.125rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Account Signup → Email Verification -->
+          <aui-graph-noodle from="sb-signup:right" to="sb-verify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Signup → SSO Configuration -->
+          <aui-graph-noodle from="sb-signup:right" to="sb-sso:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Email Verification → Organization Setup -->
+          <aui-graph-noodle from="sb-verify:right" to="sb-org:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SSO Configuration → Role & Permission Matrix -->
+          <aui-graph-noodle from="sb-sso:right" to="sb-roles:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Organization Setup → Data Import Wizard -->
+          <aui-graph-noodle from="sb-org:right" to="sb-import:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Role & Permission Matrix → Integration Hub -->
+          <aui-graph-noodle from="sb-roles:right" to="sb-integrate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Role & Permission Matrix → API Key Provisioning -->
+          <aui-graph-noodle from="sb-roles:bottom" to="sb-api:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- API Key Provisioning → Webhook Configuration -->
+          <aui-graph-noodle from="sb-api:right" to="sb-webhook:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- API Key Provisioning → Sandbox Environment -->
+          <aui-graph-noodle from="sb-api:right" to="sb-sandbox:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Data Import Wizard → Interactive Training -->
+          <aui-graph-noodle from="sb-import:right" to="sb-training:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Integration Hub → Health Check Dashboard -->
+          <aui-graph-noodle from="sb-integrate:right" to="sb-health:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Webhook Configuration → Health Check Dashboard -->
+          <aui-graph-noodle from="sb-webhook:right" to="sb-health:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Sandbox Environment → Compliance Audit -->
+          <aui-graph-noodle from="sb-sandbox:right" to="sb-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Interactive Training → Go-Live Checklist -->
+          <aui-graph-noodle from="sb-training:right" to="sb-launch:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Health Check Dashboard → Go-Live Checklist -->
+          <aui-graph-noodle from="sb-health:right" to="sb-launch:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Compliance Audit → Billing Activation -->
+          <aui-graph-noodle from="sb-compliance:right" to="sb-billing:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Go-Live Checklist → CSM Handoff -->
+          <aui-graph-noodle from="sb-launch:right" to="sb-csm:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Billing Activation → Support Escalation -->
+          <aui-graph-noodle from="sb-billing:right" to="sb-support:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Go-Live Checklist → Billing Activation -->
+          <aui-graph-noodle from="sb-launch:bottom" to="sb-billing:top" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Account Signup -->
+          <aui-graph-node x="24" y="186" node-id="sb-signup">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Account Signup</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Email Verification -->
+          <aui-graph-node x="224" y="116" node-id="sb-verify">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Email Verification</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- SSO Configuration -->
+          <aui-graph-node x="224" y="256" node-id="sb-sso">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">SSO Configuration</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Organization Setup -->
+          <aui-graph-node x="424" y="46" node-id="sb-org">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Organization Setup</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Role & Permission Matrix -->
+          <aui-graph-node x="424" y="186" node-id="sb-roles">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Role & Permission Matrix</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- API Key Provisioning -->
+          <aui-graph-node x="424" y="326" node-id="sb-api">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">API Key Provisioning</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Data Import Wizard -->
+          <aui-graph-node x="624" y="46" node-id="sb-import">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Data Import Wizard</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Integration Hub -->
+          <aui-graph-node x="624" y="186" node-id="sb-integrate">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Integration Hub</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Webhook Configuration -->
+          <aui-graph-node x="624" y="326" node-id="sb-webhook">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Webhook Configuration</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Sandbox Environment -->
+          <aui-graph-node x="624" y="466" node-id="sb-sandbox">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Sandbox Environment</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Interactive Training -->
+          <aui-graph-node x="824" y="116" node-id="sb-training">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Interactive Training</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Health Check Dashboard -->
+          <aui-graph-node x="824" y="256" node-id="sb-health">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Health Check Dashboard</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Compliance Audit -->
+          <aui-graph-node x="824" y="396" node-id="sb-compliance">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Compliance Audit</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Go-Live Checklist -->
+          <aui-graph-node x="1024" y="186" node-id="sb-launch">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Go-Live Checklist</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- CSM Handoff -->
+          <aui-graph-node x="1224" y="116" node-id="sb-csm">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">CSM Handoff</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Billing Activation -->
+          <aui-graph-node x="1024" y="326" node-id="sb-billing">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Billing Activation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Support Escalation -->
+          <aui-graph-node x="1224" y="326" node-id="sb-support">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Support Escalation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

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

@@ -1,16 +1,26 @@
 name: settings-form
 type: block
 summary: Card with header, form fields, and action footer.
-description: >
-  A structured settings form inside a bordered card container.
-  Header holds the title and description, content holds the fields,
-  footer 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, aui-button-group]
+description: |
+  A structured settings form inside a bordered card container. Header holds the title and description, content holds the fields, footer uses aui-button-group for cancel and save actions.
+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:
-  - html: |
+  - description: Card with header, form fields, and action footer.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -34,9 +44,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button primary grow="1">Save changes</aui-button>
-            <aui-button scrim grow="1">Cancel</aui-button>
+            <aui-button primary grow="1" basis="0">Save changes</aui-button>
+            <aui-button scrim grow="1" basis="0">Cancel</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Project settings form with name and description fields.

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

@@ -1,17 +1,24 @@
 name: settings-panel
 type: block
 summary: Settings card with toggles, descriptions, and grouped controls.
-description: >
-  A settings panel showing configuration options with inline descriptions. Each
-  setting is a row with a label, description, and a trailing control (switch,
-  button, or badge). Commonly used for account preferences, notification
-  settings, or feature toggles.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-switch, aui-button, aui-badge, aui-divider, aui-icon]
+description: |
+  A settings panel showing configuration options with inline descriptions. Each setting is a row with a label, description, and a trailing control (switch, button, or badge). Commonly used for account preferences, notification settings, or feature toggles.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-switch
+  - aui-button
+  - aui-alert
+  - aui-divider
 kind: card
-
 examples:
-  - html: |
+  - description: Settings card with toggles, descriptions, and grouped controls.
+    html: |-
       <aui-container kind="card" bordered max-width="lg">
         <aui-header>
           <span slot="leading">
@@ -32,23 +39,16 @@ examples:
                 <aui-button primary size="sm">Enable</aui-button>
               </aui-stack>
               <aui-divider></aui-divider>
-              <aui-stack direction="row" gap="3" align-items="center">
-                <aui-stack gap="1" spacer>
-                  <aui-heading size="md">Wallpaper tinting</aui-heading>
-                  <aui-text muted size="sm">Allow the wallpaper to be tinted.</aui-text>
+              <aui-stack gap="1">
+                <aui-stack direction="row" gap="3" align-items="center">
+                  <aui-heading size="md" spacer>Wallpaper tinting</aui-heading>
+                  <aui-switch checked></aui-switch>
                 </aui-stack>
-                <aui-switch></aui-switch>
+                <aui-text muted size="sm">Allow the wallpaper to be tinted.</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
-              <aui-stack direction="row" gap="3" align-items="center">
-                <aui-icon name="check" style="flex-shrink: 0;"></aui-icon>
-                <aui-stack gap="1" spacer>
-                  <aui-heading size="md">Profile verified</aui-heading>
-                </aui-stack>
-                <aui-icon name="caret-right" muted></aui-icon>
-              </aui-stack>
+              <aui-alert success icon="check">Your profile has been verified.</aui-alert>
             </aui-stack>
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Security settings panel with 2FA button, wallpaper tinting switch, and verified profile row.

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

@@ -1,23 +1,30 @@
 name: sidebar-nav
 type: block
 summary: Compact app sidebar with icon navigation and user footer.
-description: >
-  A fixed-width sidebar for app-level navigation. Uses card kind for
-  tighter padding than panel. Nav items 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, aui-nav-item]
+description: |
+  A fixed-width sidebar for app-level navigation. Uses card kind for tighter padding than panel. Nav items use aui-nav-item elements — the active item uses the active attribute for visual distinction. Footer shows the signed-in user with avatar and email. Designed to sit at the left edge of a layout at 14-16rem width.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-avatar
+  - aui-nav-item
 kind: card
-
 examples:
-  - html: |
+  - description: Compact app sidebar with icon navigation and user footer.
+    html: |-
       <aui-container kind="card" bordered elevation="2" max-width="xs">
-        <aui-header>
-          <span slot="leading"><aui-avatar square size="sm"><img src="/icon.svg" alt="Acme Inc"></aui-avatar></span>
-          <span slot="content"><aui-heading size="md" weight="medium">Acme Inc</aui-heading></span>
-        </aui-header>
+        <aui-inset>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar square size="sm"><img src="/icon.svg" alt="Acme Inc"></aui-avatar>
+            <aui-heading size="md">Acme Inc</aui-heading>
+          </aui-stack>
+        </aui-inset>
         <aui-content>
           <aui-inset>
             <aui-stack gap="2">
@@ -52,4 +59,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: App sidebar with active Dashboard item, three inactive links, and user footer.

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

@@ -1,17 +1,24 @@
 name: signup-form
 type: block
 summary: Signup card with name, email, password, and terms notice.
-description: >
-  A registration card for new-user onboarding. Collects full name, email,
-  and password in a clean vertical stack with a terms-of-service notice
-  near the submit button. Pair with the login-form block to cover both
-  sides of the authentication flow.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button]
+description: |
+  A registration card for new-user onboarding. Collects full name, email, and password in a clean vertical stack with a terms-of-service notice near the submit button. Pair with the login-form block to cover both sides of the authentication flow.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Signup card with name, email, password, and terms notice.
+    html: |-
       <aui-container kind="panel" bordered max-width="md">
         <aui-header>
           <span slot="leading">
@@ -23,7 +30,7 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6">
+            <aui-stack>
               <aui-field label="Full name" width="full">
                 <aui-input placeholder="Jane Smith" width="full"></aui-input>
               </aui-field>
@@ -44,4 +51,3 @@ examples:
           <span slot="content"><aui-text muted size="sm">Already have an account? <a href="#">Sign in</a></aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Signup card with name, email, and password fields plus terms notice.

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

@@ -1,32 +1,31 @@
 name: stat-cards
 type: block
 summary: Row of compact KPI stat widgets.
-description: >
-  Dashboard-style stat cards in a horizontal row using aui-stat. Each
-  widget shows a label, large value, and optional change text. Intent
-  attrs (success) color the value for positive status. Uses widget kind
-  for compact padding.
-
-components: [aui-container, aui-inset, aui-wrap, aui-stat]
+description: |
+  Dashboard-style stat cards in a horizontal row using aui-stat. Each widget shows a label, large value, and optional change text. Intent attrs (success) color the value for positive status. Uses widget kind for compact padding.
+components:
+  - aui-container
+  - aui-inset
+  - aui-wrap
+  - aui-stat
 kind: widget
-
 examples:
-  - html: |
+  - description: Row of compact KPI stat widgets.
+    html: |-
       <aui-wrap gap="3">
-        <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
+        <aui-container kind="widget" bordered spacer min-width="12">
           <aui-inset>
             <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-container kind="widget" bordered spacer min-width="12">
           <aui-inset>
             <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-container kind="widget" bordered spacer min-width="12">
           <aui-inset>
             <aui-stat label="Open Issues" value="3" change="Needs review"></aui-stat>
           </aui-inset>
         </aui-container>
       </aui-wrap>
-    description: Three KPI stat cards using aui-stat with trend and status change text.

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

@@ -1,17 +1,22 @@
 name: status-card
 type: block
 summary: Centered confirmation or alert card with icon and CTA.
-description: >
-  A card surface for status messages — confirmations, success states,
-  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, aui-button-group]
+description: |
+  A card surface for status messages — confirmations, success states, 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
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
-      <aui-container kind="card" bordered shadow="2" success max-width="md">
+  - description: Success confirmation after payment
+    html: |-
+      <aui-container kind="card" bordered shadow="2" success max-width="sm">
         <aui-inset>
           <aui-stack gap="4" align-items="center" text="center">
             <aui-icon name="check-circle" size="2xl"></aui-icon>
@@ -21,20 +26,18 @@ examples:
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Success confirmation after payment.
-
-  - html: |
-      <aui-container kind="card" bordered shadow="2" danger max-width="md">
+  - description: Error state with retry and support actions
+    html: |-
+      <aui-container kind="card" bordered shadow="2" danger max-width="sm">
         <aui-inset>
           <aui-stack gap="4" align-items="center" text="center">
             <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-button-group>
-              <aui-button outline width="full">Contact Support</aui-button>
-              <aui-button primary width="full">Try Again</aui-button>
+            <aui-button-group direction="column">
+              <aui-button primary grow="1" basis="0">Try Again</aui-button>
+              <aui-button ghost grow="1" basis="0">Contact Support</aui-button>
             </aui-button-group>
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Error state with retry and support actions.

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

@@ -1,17 +1,25 @@
 name: suggested-labs
 type: block
 summary: Lab order card with categorized tests and routing actions.
-description: >
-  A clinical decision-support card listing suggested laboratory tests.
-  Each row shows the test panel name, a brief rationale, and a condition
-  badge. A primary action routes the order to the assigned physician,
-  with secondary actions 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-button-group, aui-divider]
+description: |
+  A clinical decision-support card listing suggested laboratory tests. Each row shows the test panel name, a brief rationale, and a condition badge. A primary action routes the order to the assigned physician, with secondary actions in an aui-button-group for drafting or staging.
+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:
-  - html: |
+  - description: Lab order card with categorized tests and routing actions.
+    html: |-
       <aui-container kind="card" bordered max-width="lg">
         <aui-header>
           <span slot="leading">
@@ -67,13 +75,12 @@ examples:
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <aui-stack gap="2">
+          <aui-stack gap="4">
             <aui-button primary width="full">Order Now — Route to Dr. Martinez</aui-button>
             <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-button scrim grow="1" basis="0">Add to Draft Order</aui-button>
+              <aui-button scrim grow="1" basis="0">Build Draft for Doctor</aui-button>
             </aui-button-group>
           </aui-stack>
         </aui-footer>
       </aui-container>
-    description: Suggested lab panel card with condition badges and physician routing actions.