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

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

@@ -1,7 +1,219 @@
 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]
+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
+examples:
+  - description: Cross-Functional BPM — 16 nodes, 20 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 45.375rem; min-width: 91.875rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Customer Request → Self-Service Portal -->
+          <aui-graph-noodle from="bp-request:right" to="bp-portal:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Customer Request → Lead Qualification -->
+          <aui-graph-noodle from="bp-request:bottom" to="bp-qualify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Self-Service Portal → Lead Qualification -->
+          <aui-graph-noodle from="bp-portal:bottom" to="bp-qualify:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lead Qualification → Quote Generation -->
+          <aui-graph-noodle from="bp-qualify:right" to="bp-quote:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Legal Review -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-review:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Credit Assessment -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-credit:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Contract Negotiation -->
+          <aui-graph-noodle from="bp-quote:right" to="bp-negotiate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Legal Review → Compliance Check -->
+          <aui-graph-noodle from="bp-review:right" to="bp-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Compliance Check → Digital Signature -->
+          <aui-graph-noodle from="bp-compliance:right" to="bp-sign:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Contract Negotiation → Digital Signature -->
+          <aui-graph-noodle from="bp-negotiate:bottom" to="bp-sign:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Credit Assessment → Invoice Generation -->
+          <aui-graph-noodle from="bp-credit:right" to="bp-invoice:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Payment Processing -->
+          <aui-graph-noodle from="bp-invoice:right" to="bp-payment:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Service Provisioning -->
+          <aui-graph-noodle from="bp-invoice:bottom" to="bp-provision:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Digital Signature → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-sign:right" to="bp-onboard:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Payment Processing → Account Activation -->
+          <aui-graph-noodle from="bp-payment:bottom" to="bp-activate:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Service Provisioning → Account Activation -->
+          <aui-graph-noodle from="bp-provision:right" to="bp-activate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-activate:top" to="bp-onboard:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Onboarding Workflow → Customer Feedback -->
+          <aui-graph-noodle from="bp-onboard:top" to="bp-feedback:right" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Escalation Manager -->
+          <aui-graph-noodle from="bp-activate:right" to="bp-escalation:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Escalation Manager → Contract Negotiation -->
+          <aui-graph-noodle from="bp-escalation:top" to="bp-negotiate:bottom" color="danger" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Customer Request -->
+          <aui-graph-node x="24" y="46" node-id="bp-request">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Request</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>
+          <!-- Self-Service Portal -->
+          <aui-graph-node x="260" y="46" node-id="bp-portal">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Self-Service Portal</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>
+          <!-- Customer Feedback -->
+          <aui-graph-node x="980" y="46" node-id="bp-feedback">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Feedback</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>
+          <!-- Lead Qualification -->
+          <aui-graph-node x="260" y="166" node-id="bp-qualify">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lead Qualification</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>
+          <!-- Quote Generation -->
+          <aui-graph-node x="500" y="166" node-id="bp-quote">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Quote Generation</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>
+          <!-- Contract Negotiation -->
+          <aui-graph-node x="740" y="166" node-id="bp-negotiate">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Contract Negotiation</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>
+          <!-- Legal Review -->
+          <aui-graph-node x="500" y="286" node-id="bp-review">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Legal Review</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 Check -->
+          <aui-graph-node x="740" y="286" node-id="bp-compliance">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Compliance Check</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>
+          <!-- Digital Signature -->
+          <aui-graph-node x="980" y="286" node-id="bp-sign">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Digital Signature</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>
+          <!-- Credit Assessment -->
+          <aui-graph-node x="500" y="406" node-id="bp-credit">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Credit Assessment</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>
+          <!-- Invoice Generation -->
+          <aui-graph-node x="740" y="406" node-id="bp-invoice">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Invoice Generation</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>
+          <!-- Payment Processing -->
+          <aui-graph-node x="980" y="406" node-id="bp-payment">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Payment Processing</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>
+          <!-- Service Provisioning -->
+          <aui-graph-node x="740" y="526" node-id="bp-provision">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Service 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>
+          <!-- Account Activation -->
+          <aui-graph-node x="980" y="526" node-id="bp-activate">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Account 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>
+          <!-- Onboarding Workflow -->
+          <aui-graph-node x="1220" y="286" node-id="bp-onboard">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Onboarding Workflow</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>
+          <!-- Escalation Manager -->
+          <aui-graph-node x="1220" y="526" node-id="bp-escalation">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Escalation Manager</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>
+        </aui-graph-layer>
+      </aui-graph-ui>

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

@@ -1,17 +1,20 @@
 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]
+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: |
+  - description: Weekly activity chart with labeled columns and rounded bars.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -70,4 +73,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Weekly activity bars with day labels showing fitness load.

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

@@ -1,17 +1,21 @@
 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]
+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: |
+  - description: Simple vertical bar chart card with month labels.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -24,7 +28,7 @@ examples:
         <aui-content>
           <aui-inset>
             <aui-stack gap="1">
-              <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 8rem;">
+              <aui-stack direction="row" gap="1" align-items="end" style="height: 10rem;">
                 <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>
@@ -52,4 +56,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Simple 6-month visitor bar chart with trend footer.

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

@@ -1,17 +1,22 @@
 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]
+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: |
+  - description: Donut chart card with center stat, legend, and selected segment footer.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="leading">
@@ -26,19 +31,19 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="4" align-items="center">
+            <aui-stack 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
+                    C = 2π × 38 ≈ 238.76   Gap = 2 units per segment
+                    Seg1 (60%): arc = 143.26, draw = 141.26, offset = 0
+                    Seg2 (20%): arc =  47.75, draw =  45.75, offset = -143.26
+                    Seg3 (20%): arc =  47.75, draw =  45.75, offset = -191.01
                   -->
-                  <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"/>
+                  <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="-143.26" 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="-191.01" 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>
@@ -48,23 +53,23 @@ examples:
               <!-- 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>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-1);"></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>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-2);"></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>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-3);"></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>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-4);"></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>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-5);"></div>
                   <aui-text muted size="xs">Other</aui-text>
                 </aui-stack>
               </aui-wrap>
@@ -80,4 +85,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Donut chart showing browser share with Firefox selected.

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

@@ -1,17 +1,21 @@
 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]
+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: |
+  - description: Grouped vertical bar chart comparing two data series.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -25,7 +29,7 @@ examples:
           <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;">
+              <aui-stack direction="row" gap="3" align-items="end" spacer style="height: 10rem;">
                 <!-- 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>
@@ -72,4 +76,3 @@ examples:
           </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

@@ -1,17 +1,21 @@
 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]
+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: |
+  - description: Horizontal bar chart with category labels.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -56,4 +60,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Horizontal bar chart comparing browser market share with proportional bars.

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

@@ -1,35 +1,39 @@
 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 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-stat, aui-bar]
+description: |
+  A dashboard hero chart card. Header shows the title on the left with aui-stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-bar
 kind: card
-
 examples:
-  - html: |
+  - description: Wide chart card with stat summaries and dense bar visualization.
+    html: |-
       <aui-container kind="card" bordered>
         <aui-header>
-          <span slot="leading">
-            <aui-stack gap="1">
+          <aui-stack direction="row" align-items="center">
+            <aui-stack gap="1" spacer>
               <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 direction="row">
               <aui-stat label="Desktop" value="24,828"></aui-stat>
               <aui-stat label="Mobile" value="25,010"></aui-stat>
             </aui-stack>
-          </span>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 10rem;" data-chart-bars>
+            <aui-stack direction="row" gap="1" align-items="end" spacer 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>
@@ -49,4 +53,3 @@ examples:
           <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

@@ -1,17 +1,21 @@
 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]
+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: |
+  - description: Vertical bar chart with value labels above each bar.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -34,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="min-height: 8rem;">
+              <aui-stack direction="row" gap="2" align-items="end" spacer 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>
@@ -63,4 +67,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Labeled bar chart with value labels row, bar row, and month labels row.