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

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

@@ -2,12 +2,12 @@ name: survey-card
 type: block
 summary: Survey question card with checkbox options and submit action.
 description: >
-  A card presenting a multiple-choice survey question. Each option is
-  a labeled checkbox that users can toggle. Includes a submit button
-  so the card feels complete and actionable — not just a floating
-  question. Useful for onboarding flows, feedback, or preference selection.
+  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-checkbox, aui-button]
+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:
@@ -23,7 +23,7 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="3">
+            <aui-fieldset legend="Sources" borderless>
               <aui-field>
                 <aui-checkbox>Social Media</aui-checkbox>
               </aui-field>
@@ -39,14 +39,14 @@ examples:
               <aui-field>
                 <aui-checkbox>Other</aui-checkbox>
               </aui-field>
-            </aui-stack>
+            </aui-fieldset>
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <aui-stack direction="row" gap="2">
+          <aui-button-group>
             <aui-button scrim grow="1">Skip</aui-button>
             <aui-button primary grow="1">Continue</aui-button>
-          </aui-stack>
+          </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

@@ -35,7 +35,7 @@ examples:
           <aui-inset>
             <aui-stack gap="6" 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" style="--aui-icon-size: 3rem;" muted></aui-icon>
+                <aui-icon name="gear" size="3xl" muted></aui-icon>
               </div>
               <aui-stack gap="1">
                 <aui-heading size="md">No codespaces</aui-heading>

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

@@ -3,25 +3,17 @@ 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. Features a large user icon in a contained avatar, a clear
-  heading, helpful description, and an invite action button. Simpler
-  than the generic empty-state block — purpose-built for team contexts.
+  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-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+components: [aui-container, aui-empty-state, aui-button]
 kind: card
 
 examples:
   - html: |
       <aui-container kind="card" bordered max-width="prose">
-        <aui-inset>
-          <aui-stack gap="4" align-items="center" text="center">
-            <aui-avatar size="xl" square><aui-icon name="user"></aui-icon></aui-avatar>
-            <aui-stack gap="1">
-              <aui-heading size="lg">No Team Members</aui-heading>
-              <aui-text muted size="sm">Invite your team to collaborate on this project.</aui-text>
-            </aui-stack>
-            <aui-button primary accent>Invite Members</aui-button>
-          </aui-stack>
-        </aui-inset>
+        <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,14 +1,13 @@
 name: usage-billing
 type: block
-summary: Billing usage panel with SVG progress rings and cost breakdown.
+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 a circular SVG progress ring showing utilization, a service
-  name, and a cost or usage/limit value. Rings use stroke-dashoffset to render
-  accurate fill levels. Use for billing dashboards, plan overviews, or
-  resource monitoring.
+  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]
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-progress-circle]
 kind: card
 
 examples:
@@ -23,11 +22,7 @@ examples:
 
               <!-- Edge Requests: 91% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-1);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="4.5" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="91" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>Edge Requests</aui-text>
                 <aui-text size="sm" weight="medium">$1.83K</aui-text>
               </aui-stack>
@@ -35,11 +30,7 @@ examples:
 
               <!-- Fast Data Transfer: 73% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-2);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="13.6" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="73" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>Fast Data Transfer</aui-text>
                 <aui-text size="sm" weight="medium">$952.51</aui-text>
               </aui-stack>
@@ -47,11 +38,7 @@ examples:
 
               <!-- Monitoring Data Points: 58% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-3);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="21.1" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="58" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>Monitoring Data Points</aui-text>
                 <aui-text size="sm" weight="medium">$901.20</aui-text>
               </aui-stack>
@@ -59,11 +46,7 @@ examples:
 
               <!-- Web Analytics Events: 42% -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-4);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="29.2" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="42" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>Web Analytics Events</aui-text>
                 <aui-text size="sm" weight="medium">$603.71</aui-text>
               </aui-stack>
@@ -71,11 +54,7 @@ examples:
 
               <!-- ISR Writes: 26% (524K / 2M) -->
               <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-5);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="37.2" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="26" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>ISR Writes</aui-text>
                 <aui-text muted size="sm">524.52K / 2M</aui-text>
               </aui-stack>
@@ -83,11 +62,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;">
-                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
-                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
-                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-6);" stroke-width="2"
-                    stroke-dasharray="50.3" stroke-dashoffset="50" stroke-linecap="round"/>
-                </svg>
+                <aui-progress-circle value="1" size="sm"></aui-progress-circle>
                 <aui-text size="sm" spacer>Function Duration</aui-text>
                 <aui-text muted size="sm">5.11 GB Hrs / 1K GB Hrs</aui-text>
               </aui-stack>
@@ -96,4 +71,4 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Six billing line items with SVG progress rings at varied fill levels across the color spectrum.
+    description: Six billing line items with aui-progress-circle size="sm" at varied fill levels.

package/dist/docs/components/accordion-item.yaml

@@ -2,40 +2,34 @@ name: aui-accordion-item
 tag: aui-accordion-item
 type: component
 summary: Collapsible section with trigger and content panel.
-description: >
-  Uses native details/summary for baseline accessibility. Chevron
-  indicator rotates on open. Can be used standalone or inside
-  aui-accordion for coordinated single-open behavior.
-
+description: |
+  Uses native details/summary for baseline accessibility. Chevron indicator rotates on open. Can be used standalone or inside aui-accordion for coordinated single-open behavior.
 base: AgentElement
-
 attributes:
   open:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the content is expanded.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents toggling.
-
 a11y:
   role: Uses native details/summary semantics.
   keyboard:
     Enter: Toggle open/closed.
     Space: Toggle open/closed.
-
 events:
   toggle:
     description: Fired when open state changes. detail.open is the new state.
-
 composition:
-  parents: [aui-accordion, any]
-  children: [any]
-
+  parents:
+    - aui-accordion
+    - any
+  children:
+    - any
 tokens:
   - name: --aui-accordion-item-border-color
     default: var(--aui-border-muted)
@@ -76,18 +70,16 @@ tokens:
   - name: --aui-accordion-item-color-disabled
     default: var(--aui-ink-disabled, var(--aui-ink-muted))
     description: Header text color when disabled.
-
 examples:
-  - html: |
+  - description: Single collapsible section
+    html: |-
       <aui-accordion-item>
         <span data-trigger>Section Title</span>
-        <p>Collapsible content here.</p>
+        <aui-text>Collapsible content here.</aui-text>
       </aui-accordion-item>
-    description: Single collapsible section.
-
-  - html: |
+  - description: Pre-opened section
+    html: |-
       <aui-accordion-item open>
         <span data-trigger>Initially Open</span>
-        <p>This section starts expanded.</p>
+        <aui-text>This section starts expanded.</aui-text>
       </aui-accordion-item>
-    description: Pre-opened section.

package/dist/docs/components/accordion.yaml

@@ -2,73 +2,67 @@ name: aui-accordion
 tag: aui-accordion
 type: component
 summary: Collapsible section group with optional single-open mode.
-description: >
-  Container for aui-accordion-item children. By default, only one
-  item can be open at a time. Set `multiple` to allow several.
-
+description: |
+  Container for aui-accordion-item children. By default, only one item can be open at a time. Set `multiple` to allow several.
 base: AgentElement
-
 attributes:
   multiple:
     syntax: boolean
     type: boolean
     default: false
     description: Allow multiple items open simultaneously.
-
   caret:
     syntax: key-value
     type: enum
-    values: [leading, trailing]
+    values:
+      - leading
+      - trailing
     default: leading
-    description: >
-      Position of the expand/collapse chevron.
-      Leading places it before the label, trailing after.
-
+    description: |
+      Position of the expand/collapse chevron. Leading places it before the label, trailing after.
 composition:
-  parents: [any]
-  children: [aui-accordion-item]
-
+  parents:
+    - any
+  children:
+    - aui-accordion-item
 tokens:
   - name: --aui-accordion-border-color
     default: var(--aui-border-muted)
     description: Border color of the accordion container top border and item dividers.
-
 examples:
-  - html: |
+  - description: Single-open accordion
+    html: |-
       <aui-accordion>
         <aui-accordion-item>
           <span data-trigger>Section 1</span>
-          <p>Content 1</p>
+          <aui-text>Content 1</aui-text>
         </aui-accordion-item>
         <aui-accordion-item>
           <span data-trigger>Section 2</span>
-          <p>Content 2</p>
+          <aui-text>Content 2</aui-text>
         </aui-accordion-item>
       </aui-accordion>
-    description: Single-open accordion.
-
-  - html: |
+  - description: Multiple-open accordion
+    html: |-
       <aui-accordion multiple>
         <aui-accordion-item open>
           <span data-trigger>FAQ 1</span>
-          <p>Answer 1</p>
+          <aui-text>Answer 1</aui-text>
         </aui-accordion-item>
         <aui-accordion-item open>
           <span data-trigger>FAQ 2</span>
-          <p>Answer 2</p>
+          <aui-text>Answer 2</aui-text>
         </aui-accordion-item>
       </aui-accordion>
-    description: Multiple-open accordion.
-
-  - html: |
+  - description: Trailing caret position
+    html: |-
       <aui-accordion caret="trailing">
         <aui-accordion-item open>
           <span data-trigger>Trailing caret</span>
-          <p>Chevron on the right side.</p>
+          <aui-text>Chevron on the right side.</aui-text>
         </aui-accordion-item>
         <aui-accordion-item>
           <span data-trigger>Another section</span>
-          <p>More content here.</p>
+          <aui-text>More content here.</aui-text>
         </aui-accordion-item>
       </aui-accordion>
-    description: Trailing caret position.

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

@@ -2,54 +2,46 @@ name: aui-agent-activity
 tag: aui-agent-activity
 type: component
 summary: Streaming activity indicator with typing dots and elapsed timer.
-description: >
-  When active, shows an animated indicator with elapsed time.
-  When expandable, clicking toggles visibility of slotted trace content
-  (e.g. reasoning trace, tool calls).
-
+description: |
+  When active, shows an animated indicator with elapsed time. When expandable, clicking toggles visibility of slotted trace content (e.g. reasoning trace, tool calls).
 base: AgentElement
-
 attributes:
   type:
     syntax: key-value
     type: string
     default: typing
     description: Activity type — typing, thinking, or tool-use.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Custom label text (overrides default per-type label).
-
   active:
     syntax: boolean
     type: boolean
     default: false
     description: Currently streaming / in progress.
-
   expandable:
     syntax: boolean
     type: boolean
     default: false
     description: Allow click to expand trace content.
-
   expanded:
     syntax: boolean
     type: boolean
     default: false
     description: Whether trace content is visible.
-
 events:
   aui:activity-toggle:
-    description: >
-      Fired when trace is expanded/collapsed.
-      detail contains expanded boolean.
-
+    description: |
+      Fired when trace is expanded/collapsed. detail contains expanded boolean.
 composition:
-  parents: [aui-agent-message]
-  children: [pre, div, any]
-
+  parents:
+    - aui-agent-message
+  children:
+    - pre
+    - div
+    - any
 tokens:
   - name: --aui-agent-activity-color
     default: var(--aui-ink-muted)
@@ -67,10 +59,10 @@ tokens:
     default: var(--aui-agent-bubble-pad-inline, 0.875rem)
     description: Inline padding of the activity container.
   - name: --aui-agent-activity-row-gap
-    default: "calc(var(--aui-space) * 1.5)"
+    default: calc(var(--aui-space) * 1.5)
     description: Gap between items in the status row (arrow, label, dots, timer).
   - name: --aui-agent-activity-content-padding-inline-start
-    default: "calc(var(--aui-space) * 3)"
+    default: calc(var(--aui-space) * 3)
     description: Left indent of the expandable content area.
   - name: --aui-agent-activity-content-font-family
     default: var(--aui-font-mono, monospace)
@@ -81,31 +73,27 @@ tokens:
   - name: --aui-agent-activity-content-max-height
     default: var(--aui-agent-activity-max-height, 20rem)
     description: Maximum height of the expandable content area before scrolling.
-
 examples:
-  - html: |
-      <aui-agent-activity type="typing" active></aui-agent-activity>
-    description: Typing indicator — animated dots signaling the assistant is composing a response.
-
-  - html: |
-      <aui-agent-activity type="thinking" active label="Reasoning"></aui-agent-activity>
-    description: Thinking indicator with custom label and elapsed timer — used during extended reasoning or chain-of-thought processing.
-
-  - html: |
+  - 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
+    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
+    html: |-
       <aui-agent-activity type="thinking" expandable expanded>
         <div data-role="trace">
-          <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>
-          <aui-text muted size="sm">3. Survey data — self-reported friction points</aui-text>
-          <aui-text muted size="sm">Let me structure a response around these three data sources.</aui-text>
+          <aui-stack gap="1">
+            <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>
+            <aui-text muted size="sm">3. Survey data — self-reported friction points</aui-text>
+            <aui-text muted size="sm">Let me structure a response around these three data sources.</aui-text>
+          </aui-stack>
         </div>
       </aui-agent-activity>
-    description: Expandable reasoning trace — completed thinking step with visible chain-of-thought. Click toggles the trace content open/closed.
-
-  - html: |
+  - description: Tool-use activity with live trace — shows the tool call and partial results while the operation is in progress
+    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-agent-activity>
-    description: Tool-use activity with live trace — shows the tool call and partial results while the operation is in progress.

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

@@ -2,40 +2,35 @@ name: aui-agent-feed
 tag: aui-agent-feed
 type: component
 summary: Scrollable chat thread coordinator with auto-scroll and token definitions.
-description: >
-  Wraps aui-agent-thread groups and manages auto-scroll behavior.
-  When pinned to bottom, new content automatically scrolls into view.
-  Defines CSS custom properties (tokens) for the entire agent chat system.
-
+description: |
+  Wraps aui-agent-thread groups and manages auto-scroll behavior. When pinned to bottom, new content automatically scrolls into view. Defines CSS custom properties (tokens) for the entire agent chat system.
 base: AgentElement
-
 attributes:
   auto-scroll:
     syntax: boolean
     type: boolean
     default: true
     description: Enable auto-scroll to bottom on new content.
-
   scrollable:
     syntax: boolean
     type: boolean
     default: false
     description: Enable scroll container. Remove to delegate scrolling to a parent.
-
 a11y:
   role: log
   aria-live: polite
-
 events:
   aui:feed-scroll:
-    description: >
-      Fired when scroll pinned state changes.
-      detail contains isPinned and scrollTop.
-
+    description: |
+      Fired when scroll pinned state changes. detail contains isPinned and scrollTop.
 composition:
-  parents: [aui-content, aui-pane, div, any]
-  children: [aui-agent-thread]
-
+  parents:
+    - aui-content
+    - aui-pane
+    - div
+    - any
+  children:
+    - aui-agent-thread
 tokens:
   - name: --aui-agent-feed-gap
     default: var(--aui-pad-gap-container)
@@ -43,9 +38,9 @@ tokens:
   - name: --aui-agent-feed-padding
     default: var(--aui-pad-container, var(--aui-space))
     description: Padding around the feed container.
-
 examples:
-  - html: |
+  - description: Chat conversation with a user question and an assistant response containing a code block
+    html: |-
       <aui-agent-feed auto-scroll scrollable style="height: 24rem;">
         <aui-agent-thread role="user" sender="You">
           <aui-agent-message role="user">
@@ -72,9 +67,8 @@ examples:
           </aui-agent-message>
         </aui-agent-thread>
       </aui-agent-feed>
-    description: Chat conversation with a user question and an assistant response containing a code block.
-
-  - html: |
+  - description: Feed with an active thinking indicator — the assistant is processing the user's question
+    html: |-
       <aui-agent-feed auto-scroll scrollable style="height: 20rem;">
         <aui-agent-thread role="user" sender="You">
           <aui-agent-message role="user">
@@ -88,4 +82,3 @@ examples:
           </aui-agent-message>
         </aui-agent-thread>
       </aui-agent-feed>
-    description: Feed with an active thinking indicator — the assistant is processing the user's question.