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

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.

package/dist/docs/blocks/supply-chain.yaml

@@ -1,7 +1,163 @@
 name: supply-chain
 type: block
 summary: Supply Chain Network — 12 nodes, 13 connections.
-description: >
-  Visual graph block rendered from the Supply Chain Network 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 Supply Chain Network 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: Supply Chain Network — 12 nodes, 13 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 37.25rem; min-width: 71.125rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Raw Material Supplier → Assembly Line -->
+          <aui-graph-noodle from="sc-raw:right" to="sc-assembly:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Component Supplier A → Assembly Line -->
+          <aui-graph-noodle from="sc-comp-a:right" to="sc-assembly:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Component Supplier B → Assembly Line -->
+          <aui-graph-noodle from="sc-comp-b:right" to="sc-assembly:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Assembly Line → Quality Control -->
+          <aui-graph-noodle from="sc-assembly:right" to="sc-qc:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quality Control → Inventory Buffer -->
+          <aui-graph-noodle from="sc-qc:right" to="sc-inventory:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Inventory Buffer → Distribution Hub East -->
+          <aui-graph-noodle from="sc-inventory:right" to="sc-hub-east:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Inventory Buffer → Distribution Hub West -->
+          <aui-graph-noodle from="sc-inventory:right" to="sc-hub-west:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Distribution Hub East → Retail Fulfillment -->
+          <aui-graph-noodle from="sc-hub-east:right" to="sc-retail:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Distribution Hub West → Retail Fulfillment -->
+          <aui-graph-noodle from="sc-hub-west:right" to="sc-retail:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Retail Fulfillment → Returns Processing -->
+          <aui-graph-noodle from="sc-retail:right" to="sc-returns:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Returns Processing → Demand Forecast -->
+          <aui-graph-noodle from="sc-returns:right" to="sc-demand:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Demand Forecast → Procurement Engine -->
+          <aui-graph-noodle from="sc-demand:left" to="sc-procurement:right" color="warning" weight="2"></aui-graph-noodle>
+          <!-- Procurement Engine → Assembly Line -->
+          <aui-graph-noodle from="sc-procurement:left" to="sc-assembly:left" color="warning" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Raw Material Supplier -->
+          <aui-graph-node x="24" y="46" node-id="sc-raw">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Raw Material Supplier</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>
+          <!-- Component Supplier A -->
+          <aui-graph-node x="24" y="186" node-id="sc-comp-a">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Component Supplier A</aui-text>
+              <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>
+          <!-- Component Supplier B -->
+          <aui-graph-node x="24" y="326" node-id="sc-comp-b">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Component Supplier B</aui-text>
+              <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-container>
+          </aui-graph-node>
+          <!-- Assembly Line -->
+          <aui-graph-node x="240" y="186" node-id="sc-assembly">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Assembly Line</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>
+          <!-- Quality Control -->
+          <aui-graph-node x="456" y="116" node-id="sc-qc">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Quality Control</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>
+          <!-- Inventory Buffer -->
+          <aui-graph-node x="456" y="256" node-id="sc-inventory">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Inventory Buffer</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>
+          <!-- Distribution Hub East -->
+          <aui-graph-node x="672" y="116" node-id="sc-hub-east">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Distribution Hub East</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>
+          <!-- Distribution Hub West -->
+          <aui-graph-node x="672" y="256" node-id="sc-hub-west">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Distribution Hub West</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>
+          <!-- Retail Fulfillment -->
+          <aui-graph-node x="888" y="46" node-id="sc-retail">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Retail Fulfillment</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>
+          <!-- Returns Processing -->
+          <aui-graph-node x="888" y="186" node-id="sc-returns">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Returns 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>
+          <!-- Demand Forecast -->
+          <aui-graph-node x="888" y="326" node-id="sc-demand">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Demand Forecast</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>
+          <!-- Procurement Engine -->
+          <aui-graph-node x="240" y="396" node-id="sc-procurement">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Procurement Engine</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/survey-card.yaml

@@ -1,18 +1,27 @@
 name: survey-card
 type: block
 summary: Survey question card with checkbox options and submit action.
-description: >
-  A card presenting a multiple-choice survey question. Checkbox options
-  are grouped in an aui-fieldset legend="Sources" (borderless) for
-  semantic grouping. Footer uses aui-button-group for skip/continue
-  actions. Useful for onboarding flows, feedback, or preference selection.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-fieldset, aui-checkbox, aui-button, aui-button-group]
+description: |
+  A card presenting a multiple-choice survey question. Checkbox options are grouped in an aui-fieldset legend="Sources" (borderless) for semantic grouping. Footer uses aui-button-group for skip/continue actions. Useful for onboarding flows, feedback, or preference selection.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-fieldset
+  - aui-checkbox
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
-      <aui-container kind="card" bordered max-width="prose" style="min-width: 22rem;">
+  - description: Survey question card with checkbox options and submit action.
+    html: |-
+      <aui-container kind="card" bordered max-width="prose" min-width="22">
         <aui-header>
           <span slot="leading">
             <aui-stack gap="1">
@@ -44,9 +53,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button scrim grow="1">Skip</aui-button>
-            <aui-button primary grow="1">Continue</aui-button>
+            <aui-button primary grow="1" basis="0">Continue</aui-button>
+            <aui-button scrim grow="1" basis="0">Skip</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Survey with checkbox options, header/content/footer structure, and skip/continue actions.

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

@@ -1,16 +1,25 @@
 name: tabbed-panel
 type: block
 summary: Segmented control card with tab-switched content panels.
-description: >
-  A panel using a segmented control to switch between two views. Demonstrates
-  tabs with header actions and distinct empty/content states per tab. Use for
-  settings panels, repository browsers, or any dual-view UI.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button, aui-segmented-control, aui-segment]
+description: |
+  A panel using a segmented control to switch between two views. Demonstrates tabs with header actions and distinct empty/content states per tab. Use for settings panels, repository browsers, or any dual-view UI.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-button
+  - aui-segmented-control
+  - aui-segment
 kind: card
-
 examples:
-  - html: |
+  - description: Segmented control card with tab-switched content panels.
+    html: |-
       <aui-container kind="card" bordered max-width="md">
         <aui-header>
           <span slot="content">
@@ -21,19 +30,17 @@ examples:
           </span>
         </aui-header>
         <aui-header>
-          <span slot="leading">
-            <aui-stack gap="1">
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-stack gap="1" spacer>
               <aui-heading size="md">Codespaces</aui-heading>
               <aui-text muted size="sm">Your workspaces in the cloud</aui-text>
             </aui-stack>
-          </span>
-          <span slot="trailing">
             <aui-button label="Add" icon-leading="plus" scrim hide-label></aui-button>
-          </span>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6" align-items="center" text="center" style="padding: 1.5rem 0;">
+            <aui-stack align-items="center" text="center" style="padding: 1.5rem 0;">
               <div style="width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;">
                 <aui-icon name="gear" size="3xl" muted></aui-icon>
               </div>
@@ -50,4 +57,3 @@ examples:
           <span slot="content"><aui-text muted size="xs">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Codespaces panel with tab selector and empty state.

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

@@ -1,19 +1,18 @@
 name: team-empty
 type: block
 summary: Empty state for team member lists with invite action.
-description: >
-  An inviting empty state shown when a team or project has no members
-  yet. Uses aui-empty-state with a users icon, heading, description,
-  and an invite action button. Purpose-built for team contexts.
-
-components: [aui-container, aui-empty-state, aui-button]
+description: |
+  An inviting empty state shown when a team or project has no members yet. Uses aui-empty-state with a users icon, heading, description, and an invite action button. Purpose-built for team contexts.
+components:
+  - aui-container
+  - aui-empty-state
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Empty state for team member lists with invite action.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-empty-state icon="users-three" heading="No Team Members" description="Invite your team to collaborate on this project.">
           <aui-button accent>Invite Members</aui-button>
         </aui-empty-state>
       </aui-container>
-    description: Team empty state with icon, heading, description, and invite button.

package/dist/docs/blocks/usage-billing.yaml

@@ -1,17 +1,22 @@
 name: usage-billing
 type: block
 summary: Billing usage panel with progress circle rings and cost breakdown.
-description: >
-  A card showing current billing cycle usage broken down by service line item.
-  Each row has an aui-progress-circle size="sm" showing utilization, a service
-  name, and a cost or usage/limit value. Use for billing dashboards, plan
-  overviews, or resource monitoring.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-progress-circle]
+description: |
+  A card showing current billing cycle usage broken down by service line item. Each row has an aui-progress-circle size="sm" showing utilization, a service name, and a cost or usage/limit value. Use for billing dashboards, plan overviews, or resource monitoring.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-divider
+  - aui-progress-circle
 kind: card
-
 examples:
-  - html: |
+  - description: Billing usage panel with progress circle rings and cost breakdown.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="content"><aui-text muted size="sm">5 days remaining in cycle</aui-text></span>
@@ -23,7 +28,7 @@ examples:
               <!-- Edge Requests: 91% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="91" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>Edge Requests</aui-text>
+                <aui-heading size="sm" spacer truncate>Edge Requests</aui-heading>
                 <aui-text size="sm" weight="medium">$1.83K</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
@@ -31,7 +36,7 @@ examples:
               <!-- Fast Data Transfer: 73% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="73" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>Fast Data Transfer</aui-text>
+                <aui-heading size="sm" spacer truncate>Fast Data Transfer</aui-heading>
                 <aui-text size="sm" weight="medium">$952.51</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
@@ -39,7 +44,7 @@ examples:
               <!-- Monitoring Data Points: 58% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="58" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>Monitoring Data Points</aui-text>
+                <aui-heading size="sm" spacer truncate>Monitoring Data Points</aui-heading>
                 <aui-text size="sm" weight="medium">$901.20</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
@@ -47,7 +52,7 @@ examples:
               <!-- Web Analytics Events: 42% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="42" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>Web Analytics Events</aui-text>
+                <aui-heading size="sm" spacer truncate>Web Analytics Events</aui-heading>
                 <aui-text size="sm" weight="medium">$603.71</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
@@ -55,7 +60,7 @@ examples:
               <!-- ISR Writes: 26% (524K / 2M) -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="26" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>ISR Writes</aui-text>
+                <aui-heading size="sm" spacer truncate>ISR Writes</aui-heading>
                 <aui-text muted size="sm">524.52K / 2M</aui-text>
               </aui-stack>
               <aui-divider></aui-divider>
@@ -63,7 +68,7 @@ examples:
               <!-- Function Duration: 0.5% (5.11 / 1K GB Hrs) -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
                 <aui-progress-circle value="1" size="sm"></aui-progress-circle>
-                <aui-text size="sm" spacer>Function Duration</aui-text>
+                <aui-heading size="sm" spacer truncate>Function Duration</aui-heading>
                 <aui-text muted size="sm">5.11 GB Hrs / 1K GB Hrs</aui-text>
               </aui-stack>
 
@@ -71,4 +76,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Six billing line items with aui-progress-circle size="sm" at varied fill levels.

package/dist/docs/components/agent-activity.yaml

@@ -76,13 +76,13 @@ tokens:
 examples:
   - description: Typing indicator — animated dots signaling the assistant is composing a response
     html: <aui-agent-activity type="typing" active></aui-agent-activity>
-  - description: Thinking indicator with custom label and elapsed timer — used during extended reasoning or chain-of-thought processing
+  - description: Thinking indicator with custom label and elapsed timer
     html: <aui-agent-activity type="thinking" active label="Reasoning"></aui-agent-activity>
-  - description: Expandable reasoning trace — completed thinking step with visible chain-of-thought. Click toggles the trace content open/closed
+  - description: Expandable reasoning trace — click header to toggle
     html: |-
       <aui-agent-activity type="thinking" expandable expanded>
         <div data-role="trace">
-          <aui-stack gap="1">
+          <aui-stack gap="2">
             <aui-text muted size="sm">The user is asking about onboarding drop-off. I should consider:</aui-text>
             <aui-text muted size="sm">1. Funnel analysis — where exactly are users leaving?</aui-text>
             <aui-text muted size="sm">2. Session recordings — qualitative signals</aui-text>
@@ -91,9 +91,29 @@ examples:
           </aui-stack>
         </div>
       </aui-agent-activity>
-  - description: Tool-use activity with live trace — shows the tool call and partial results while the operation is in progress
+  - description: Tool-use activities as nested disclosures
     html: |-
-      <aui-agent-activity type="tool-use" active label="Searching codebase" expandable>
-        <pre>search_files("auth middleware", include=["*.ts", "*.tsx"])
-        → Found 12 matches in 5 files</pre>
+      <aui-stack gap="2">
+        <aui-disclosure summary="search_files — 12 matches" open>
+          <aui-code>search_files("auth middleware", include=["*.ts", "*.tsx"])
+      → Found 12 matches in 5 files</aui-code>
+        </aui-disclosure>
+
+        <aui-disclosure summary="read_file — auth.middleware.ts">
+          <aui-code>read_file("src/middleware/auth.middleware.ts")
+      → 142 lines read</aui-code>
+        </aui-disclosure>
+
+        <aui-disclosure summary="analyze_code — 3 issues found">
+          <aui-code>analyze_code("src/middleware/auth.middleware.ts")
+      → 2 warnings, 1 suggestion</aui-code>
+        </aui-disclosure>
+      </aui-stack>
+  - description: Active tool-use with trace
+    html: |-
+      <aui-agent-activity type="tool-use" active label="Searching codebase" expandable expanded>
+        <div data-role="trace">
+          <aui-code>search_files("auth middleware", include=["*.ts", "*.tsx"])
+      → Found 12 matches in 5 files</aui-code>
+        </div>
       </aui-agent-activity>

package/dist/docs/components/agent-prompt.yaml

@@ -84,7 +84,7 @@ examples:
         <aui-textarea placeholder="Ask anything..."></aui-textarea>
         <div data-role="leading">
           <aui-button ghost>
-            <aui-icon name="sparkles"></aui-icon>
+            <aui-icon name="sparkle"></aui-icon>
           </aui-button>
         </div>
       </aui-agent-prompt>

package/dist/docs/components/agent-seeds.yaml

@@ -85,5 +85,5 @@ examples:
       </aui-agent-seeds>
   - description: Conversation starters with icons — used on an empty chat state to help users begin a session with common tasks
     html: |-
-      <aui-agent-seeds options='[{"value":"write-email","label":"Draft an email","icon":"mail"},{"value":"summarize","label":"Summarize a document","icon":"file-text"},{"value":"brainstorm","label":"Brainstorm ideas","icon":"lightbulb"},{"value":"analyze-data","label":"Analyze data","icon":"chart-bar"}]'>
+      <aui-agent-seeds options='[{"value":"write-email","label":"Draft an email","icon":"envelope"},{"value":"summarize","label":"Summarize a document","icon":"file-text"},{"value":"brainstorm","label":"Brainstorm ideas","icon":"lightbulb"},{"value":"analyze-data","label":"Analyze data","icon":"chart-bar"}]'>
       </aui-agent-seeds>

package/dist/docs/components/breadcrumb.yaml

@@ -1,9 +1,9 @@
 name: aui-breadcrumb
 tag: aui-breadcrumb
 type: component
-summary: Breadcrumb navigation trail.
+summary: Breadcrumb navigation trail with auto-current and depth collapse.
 description: |
-  Container for aui-breadcrumb-item children. Sets role="navigation" and aria-label. Separators are rendered via CSS between items.
+  Container for aui-breadcrumb-item children. Sets role="navigation" and aria-label. Separators are rendered via CSS between items using a --_joiner custom property. The last item is automatically marked [current] by JS. When max-depth is set, middle items collapse into an ellipsis trigger that expands on click.
 base: AgentElement
 attributes:
   label:
@@ -17,6 +17,12 @@ attributes:
     default: /
     description: |
       Separator character between breadcrumb items. Common values: "/" "›" "→" "·"
+  max-depth:
+    syntax: key-value
+    type: string
+    default: ""
+    description: |
+      When set, collapses middle items to keep only the first item and the last N items visible. Hidden items are replaced by an ellipsis button that expands them on click.
 a11y:
   role: navigation
   aria:
@@ -36,13 +42,24 @@ tokens:
   - name: --aui-breadcrumb-gap
     default: calc(var(--aui-space) * 2)
     description: Gap between breadcrumb items.
+  - name: --aui-breadcrumb-item-color-current
+    default: var(--aui-ink-strong)
+    description: Color of the current (last) breadcrumb item.
+  - name: --aui-breadcrumb-item-font-weight-current
+    default: var(--aui-font-weight-medium)
+    description: Font weight of the current breadcrumb item.
+behaviors:
+  auto-current: |
+    The last aui-breadcrumb-item child is automatically marked with the [current] attribute by JS. Any manually set [current] attributes on other items are removed.
+  max-depth-collapse: |
+    When max-depth is set and items exceed maxDepth + 1, middle items are hidden and replaced by an ellipsis button. Clicking the ellipsis expands all hidden items.
 examples:
   - description: Typical three-level breadcrumb trail
     html: |-
       <aui-breadcrumb>
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/settings">Settings</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Profile</aui-breadcrumb-item>
       </aui-breadcrumb>
   - description: Deep breadcrumb trail with four levels
     html: |-
@@ -50,14 +67,14 @@ examples:
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products">Products</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products/widgets">Widgets</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Deluxe Widget</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Deluxe Widget</aui-breadcrumb-item>
       </aui-breadcrumb>
   - description: Custom joiner character (›)
     html: |-
       <aui-breadcrumb joiner="›">
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/docs">Docs</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>API</aui-breadcrumb-item>
+        <aui-breadcrumb-item >API</aui-breadcrumb-item>
       </aui-breadcrumb>
   - description: Deep breadcrumb trail with five levels
     html: |-
@@ -67,7 +84,7 @@ examples:
         <aui-breadcrumb-item href="/workspace/projects">Projects</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/workspace/projects/agent-ui">Agent UI</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/workspace/projects/agent-ui/components">Components</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Breadcrumb</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Breadcrumb</aui-breadcrumb-item>
       </aui-breadcrumb>
   - description: Breadcrumb items with leading icons
     html: |-
@@ -91,7 +108,7 @@ examples:
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/blog">Blog</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/blog/2026">2026</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>How to build a design system</aui-breadcrumb-item>
+        <aui-breadcrumb-item >How to build a design system</aui-breadcrumb-item>
       </aui-breadcrumb>
   - description: Deep breadcrumb with arrow joiner and six levels
     html: |-
@@ -101,5 +118,15 @@ examples:
         <aui-breadcrumb-item href="/admin/users">Users</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/admin/users/roles">Roles</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/admin/users/roles/editor">Editor</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Permissions</aui-breadcrumb-item>
+        <aui-breadcrumb-item>Permissions</aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: max-depth="2" collapses middle items into ellipsis (click to expand)
+    html: |-
+      <aui-breadcrumb max-depth="2">
+        <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace">Workspace</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects">Projects</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui">Agent UI</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui/components">Components</aui-breadcrumb-item>
+        <aui-breadcrumb-item>Breadcrumb</aui-breadcrumb-item>
       </aui-breadcrumb>