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

package/dist/docs/blocks/oncology-pathway.yaml

@@ -1,7 +1,230 @@
 name: oncology-pathway
 type: block
 summary: Oncology Care Pathway — 17 nodes, 21 connections.
-description: >
-  Visual graph block rendered from the Oncology Care Pathway 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 Oncology Care Pathway 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: Oncology Care Pathway — 17 nodes, 21 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 41.625rem; min-width: 79.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Cancer Screening → Biopsy & Pathology -->
+          <aui-graph-noodle from="on-screening:right" to="on-biopsy:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Cancer Screening → Genomic Profiling -->
+          <aui-graph-noodle from="on-screening:right" to="on-genomics:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biopsy & Pathology → TNM Staging -->
+          <aui-graph-noodle from="on-biopsy:right" to="on-staging:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biopsy & Pathology → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-biopsy:right" to="on-mdt:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Genomic Profiling → Biomarker Analysis -->
+          <aui-graph-noodle from="on-genomics:right" to="on-biomarker:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Genomic Profiling → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-genomics:right" to="on-mdt:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Surgical Intervention -->
+          <aui-graph-noodle from="on-mdt:right" to="on-surgery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Chemotherapy Protocol -->
+          <aui-graph-noodle from="on-mdt:right" to="on-chemo:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Radiation Therapy -->
+          <aui-graph-noodle from="on-mdt:right" to="on-radiation:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biomarker Analysis → Immunotherapy -->
+          <aui-graph-noodle from="on-biomarker:right" to="on-immuno:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Insurance Authorization → Immunotherapy -->
+          <aui-graph-noodle from="on-insurance:right" to="on-immuno:left" color="warning" weight="2"></aui-graph-noodle>
+          <!-- Surgical Intervention → Treatment Response -->
+          <aui-graph-noodle from="on-surgery:right" to="on-response:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Chemotherapy Protocol → Treatment Response -->
+          <aui-graph-noodle from="on-chemo:right" to="on-response:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Chemotherapy Protocol → Toxicity Monitor -->
+          <aui-graph-noodle from="on-chemo:right" to="on-toxicity:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Radiation Therapy → Toxicity Monitor -->
+          <aui-graph-noodle from="on-radiation:right" to="on-toxicity:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Immunotherapy → Recurrence Detection -->
+          <aui-graph-noodle from="on-immuno:right" to="on-recurrence:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Response → Remission -->
+          <aui-graph-noodle from="on-response:right" to="on-remission:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Toxicity Monitor → Palliative Care -->
+          <aui-graph-noodle from="on-toxicity:right" to="on-palliative:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Recurrence Detection → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-recurrence:left" to="on-mdt:bottom" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Recurrence Detection → Survivorship Program -->
+          <aui-graph-noodle from="on-recurrence:right" to="on-survivor:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Remission → Survivorship Program -->
+          <aui-graph-noodle from="on-remission:bottom" to="on-survivor:top" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Cancer Screening -->
+          <aui-graph-node x="24" y="186" node-id="on-screening">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Cancer Screening</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>
+          <!-- Biopsy & Pathology -->
+          <aui-graph-node x="224" y="116" node-id="on-biopsy">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Biopsy & Pathology</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>
+          <!-- Genomic Profiling -->
+          <aui-graph-node x="224" y="256" node-id="on-genomics">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Genomic Profiling</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>
+          <!-- TNM Staging -->
+          <aui-graph-node x="424" y="46" node-id="on-staging">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">TNM Staging</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>
+          <!-- Tumor Board (MDT) -->
+          <aui-graph-node x="424" y="186" node-id="on-mdt">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Tumor Board (MDT)</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>
+          <!-- Biomarker Analysis -->
+          <aui-graph-node x="424" y="326" node-id="on-biomarker">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Biomarker Analysis</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>
+          <!-- Surgical Intervention -->
+          <aui-graph-node x="624" y="46" node-id="on-surgery">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Surgical Intervention</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>
+          <!-- Chemotherapy Protocol -->
+          <aui-graph-node x="624" y="186" node-id="on-chemo">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Chemotherapy Protocol</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>
+          <!-- Radiation Therapy -->
+          <aui-graph-node x="624" y="326" node-id="on-radiation">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Radiation Therapy</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>
+          <!-- Immunotherapy -->
+          <aui-graph-node x="624" y="466" node-id="on-immuno">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Immunotherapy</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>
+          <!-- Treatment Response -->
+          <aui-graph-node x="824" y="116" node-id="on-response">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Treatment Response</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>
+          <!-- Toxicity Monitor -->
+          <aui-graph-node x="824" y="256" node-id="on-toxicity">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Toxicity Monitor</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>
+          <!-- Recurrence Detection -->
+          <aui-graph-node x="824" y="396" node-id="on-recurrence">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Recurrence Detection</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>
+          <!-- Remission -->
+          <aui-graph-node x="1024" y="116" node-id="on-remission">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Remission</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>
+          <!-- Palliative Care -->
+          <aui-graph-node x="1024" y="256" node-id="on-palliative">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Palliative Care</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>
+          <!-- Survivorship Program -->
+          <aui-graph-node x="1024" y="396" node-id="on-survivor">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Survivorship Program</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>
+          <!-- Insurance Authorization -->
+          <aui-graph-node x="424" y="466" node-id="on-insurance">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Insurance Authorization</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>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/overlay-confirmation-modal.yaml

@@ -0,0 +1,60 @@
+name: overlay-confirmation-modal
+type: block
+summary: Confirmation dialog with danger icon, warning detail, and cancel/confirm actions.
+description: |
+  A modal dialog for confirming destructive actions. Two variants shown: an enhanced version with a danger avatar icon (solid background), title, description with bold entity name "AgentUI Corp", a bordered danger aui-alert danger listing impact details, and a footer with scrim cancel and danger-primary confirm buttons using grow="1" basis="0" for equal sizing; and a minimal version with just title, description, and buttons. Uses aui-dialog with open attribute. The danger alert and button use the danger intent for semantic red coloring.
+components:
+  - aui-dialog
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-footer
+  - aui-button
+  - aui-button-group
+  - aui-alert
+kind: card
+examples:
+  - description: Danger confirmation with warning detail
+    html: |-
+      <aui-dialog open max-width="sm">
+        <aui-container kind="card">
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-avatar size="lg" danger solid><aui-icon name="warning"></aui-icon></aui-avatar>
+              <aui-stack gap="2">
+                <aui-heading size="lg">Delete workspace?</aui-heading>
+                <aui-text muted size="sm">This will permanently delete <strong>AgentUI Corp</strong> and remove all associated data. This action cannot be undone.</aui-text>
+              </aui-stack>
+              <aui-alert danger>All 47 projects, 312 files, and 8 team members will be removed.</aui-alert>
+            </aui-stack>
+          </aui-inset>
+          <aui-footer>
+            <aui-button-group>
+              <aui-button scrim grow="1" basis="0">Cancel</aui-button>
+              <aui-button primary danger grow="1" basis="0">Delete Workspace</aui-button>
+            </aui-button-group>
+          </aui-footer>
+        </aui-container>
+      </aui-dialog>
+  - description: Simple confirmation without warning box
+    html: |-
+      <aui-dialog open max-width="sm">
+        <aui-container kind="card">
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-heading size="lg">Discard changes?</aui-heading>
+              <aui-text muted size="sm">You have unsaved changes that will be lost. Are you sure you want to leave this page?</aui-text>
+            </aui-stack>
+          </aui-inset>
+          <aui-footer>
+            <aui-button-group>
+              <aui-button scrim grow="1" basis="0">Keep editing</aui-button>
+              <aui-button primary danger grow="1" basis="0">Discard</aui-button>
+            </aui-button-group>
+          </aui-footer>
+        </aui-container>
+      </aui-dialog>

package/dist/docs/blocks/overlay-dropdown-menu.yaml

@@ -0,0 +1,72 @@
+name: overlay-dropdown-menu
+type: block
+summary: Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.
+description: |
+  Two dropdown menu variants side by side. The actions menu uses aui-dropdown-menu with ghost trigger, containing icon+label options with trailing keyboard shortcuts in mono font (font="mono"), a disabled Archive option, optgroup dividers between groups, and a danger-intent Delete option. The view selector menu uses aui-select mode="list" inside an aui-container with aui-optgroup label attributes for section headers (View, Sort by) and selected attribute for active items, since it tracks selection state rather than firing actions.
+components:
+  - aui-dropdown-menu
+  - aui-container
+  - aui-select
+  - aui-option
+  - aui-optgroup
+  - aui-text
+  - aui-icon
+kind: widget
+examples:
+  - description: Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.
+    html: |-
+      <aui-stack direction="row">
+
+        <!-- Actions menu -->
+        <aui-dropdown-menu label="Actions" ghost>
+          <aui-option value="edit">
+            <aui-icon name="pencil" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Edit</aui-text>
+            <aui-text size="xs" muted font="mono">⌘E</aui-text>
+          </aui-option>
+          <aui-option value="duplicate">
+            <aui-icon name="copy" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Duplicate</aui-text>
+            <aui-text size="xs" muted font="mono">⌘D</aui-text>
+          </aui-option>
+          <aui-option value="share">
+            <aui-icon name="arrow-up" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Share</aui-text>
+          </aui-option>
+          <aui-optgroup>
+            <aui-option value="move">
+              <aui-icon name="star" size="sm" muted></aui-icon>
+              <aui-text size="sm" spacer>Move to</aui-text>
+              <aui-icon name="caret-right" size="sm" muted></aui-icon>
+            </aui-option>
+            <aui-option value="archive" disabled>
+              <aui-icon name="stop" size="sm" muted></aui-icon>
+              <aui-text size="sm" muted spacer>Archive</aui-text>
+            </aui-option>
+          </aui-optgroup>
+          <aui-optgroup>
+            <aui-option value="delete" danger>
+              <aui-icon name="trash" size="sm"></aui-icon>
+              <aui-text size="sm" spacer>Delete</aui-text>
+              <aui-text size="xs" muted font="mono">⌫</aui-text>
+            </aui-option>
+          </aui-optgroup>
+        </aui-dropdown-menu>
+
+        <!-- View selector menu -->
+        <aui-container kind="widget" bordered max-width="xs" shadow="2">
+          <aui-select mode="list">
+            <aui-optgroup label="View">
+              <aui-option value="board" selected>Board</aui-option>
+              <aui-option value="list">List</aui-option>
+              <aui-option value="table">Table</aui-option>
+            </aui-optgroup>
+            <aui-optgroup label="Sort by">
+              <aui-option value="name" selected>Name</aui-option>
+              <aui-option value="date-modified">Date modified</aui-option>
+              <aui-option value="date-created">Date created</aui-option>
+            </aui-optgroup>
+          </aui-select>
+        </aui-container>
+
+      </aui-stack>

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

@@ -1,22 +1,30 @@
 name: pricing-card
 type: block
 summary: Pricing tier card with features list and call-to-action.
-description: >
-  A single pricing tier presented as a bordered card. Header shows the
-  plan name alongside a highlight badge, followed by a prominent price
-  and billing period. The content area lists included features with
-  check icons, and the footer holds a sign-up button. Ideal for
-  pricing pages where each tier sits side-by-side in a row.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-badge, aui-button]
+description: |
+  A single pricing tier presented as a bordered card. Header shows the plan name alongside a highlight badge, followed by a prominent price and billing period. The content area lists included features with check icons, and the footer holds a sign-up button. Ideal for pricing pages where each tier sits side-by-side in a row.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-badge
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Pricing tier card with features list and call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
-          <span slot="leading"><aui-heading size="lg">Pro</aui-heading></span>
-          <span slot="trailing"><aui-badge accent>Popular</aui-badge></span>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="lg" spacer>Pro</aui-heading>
+            <aui-badge accent>Popular</aui-badge>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -50,4 +58,3 @@ examples:
           <aui-button primary width="full">Get started</aui-button>
         </aui-footer>
       </aui-container>
-    description: Pro pricing tier card with feature list and sign-up action.

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

@@ -1,25 +1,28 @@
 name: processing-state
 type: block
 summary: Loading state with status icon, message, and cancel action.
-description: >
-  A waiting state shown while an operation is in progress. The icon
-  serves as the visual anchor, the heading names what's happening,
-  the description sets expectations, and the cancel button provides
-  an escape hatch. Keep the message honest and specific.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+description: |
+  A waiting state shown while an operation is in progress. The icon serves as the visual anchor, the heading names what's happening, the description sets expectations, and the cancel button provides an escape hatch. Keep the message honest and specific.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Loading state with status icon, message, and cancel action.
+    html: |-
       <aui-container kind="card" bordered shadow="1" max-width="md">
         <aui-inset>
           <aui-stack gap="4" align-items="center" text="center">
-            <aui-avatar size="xl" square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-icon name="gear" size="2xl" muted></aui-icon>
             <aui-heading size="xl">Processing your payment</aui-heading>
             <aui-text muted size="sm">This usually takes a few seconds. You'll be redirected to your dashboard when it's done.</aui-text>
             <aui-button scrim>Cancel transaction</aui-button>
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Processing state with contained icon, specific heading, reassuring description, and labeled cancel action.

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

@@ -1,18 +1,23 @@
 name: profile-card
 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 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-stat, aui-avatar, aui-button, aui-button-group]
+description: |
+  A card displaying a user's profile information at a glance. Centered 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-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-avatar
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: User profile card with avatar, bio, stats, and actions.
+    html: |-
       <aui-container kind="card" bordered max-width="md">
         <aui-content>
           <aui-inset>
@@ -23,7 +28,7 @@ examples:
                 <aui-text muted size="sm">Senior Product Designer</aui-text>
               </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 direction="row">
                 <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>
@@ -36,4 +41,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: User profile card with avatar, bio, stats, and contact actions.