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

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.

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

@@ -0,0 +1,238 @@
+name: aui-agent-input
+tag: aui-agent-input
+type: component
+summary: Chat composer surface with textarea, toolbar, selectors, and keyboard shortcuts.
+description: |
+  Composer element for agent chat interfaces. Discovers child aui-textarea and submit aui-button[data-submit]. Supports Cmd/Ctrl+Enter to send, auto-clear after send, and busy state that disables submit but keeps textarea active. Typically nested inside aui-content within an aui-container. Composes aui-agent-prompt for the bordered textarea area, aui-select mode="bar" transparent toolbars for actions and model/assistant selectors, aui-wrap for suggestion chips, and aui-stack for vertical grouping.
+base: AgentElement
+attributes:
+  disabled:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables all interaction.
+  busy:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables submit but keeps textarea enabled.
+  no-enter-submit:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables Cmd/Ctrl+Enter key submission.
+  no-auto-clear:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Prevents clearing the textarea after send.
+  padding:
+    syntax: '"0" | "1" | "2" | "3" | "4" | "5" | "6"'
+    type: string
+    default: null
+    description: Inner padding scale token applied to the composer surface.
+  gap:
+    syntax: '"0" | "1" | "2" | "3" | "4" | "5" | "6"'
+    type: string
+    default: null
+    description: Vertical gap between composer children (prompt, chips, toolbars).
+  width:
+    syntax: string
+    type: string
+    default: null
+    description: Width constraint, e.g. "full".
+  max-width:
+    syntax: string
+    type: string
+    default: null
+    description: Maximum width constraint, e.g. "lg", "2xl".
+events:
+  aui:send:
+    description: |
+      Fired on submit with { value } detail. Cancelable.
+  aui:composer-focus:
+    description: Fired when the composer textarea gains focus.
+  aui:composer-blur:
+    description: Fired when the composer textarea loses focus.
+  aui:composer-submit-blocked:
+    description: Fired when submit is attempted while busy.
+composition:
+  parents:
+    - aui-content
+    - aui-footer
+    - aui-container
+    - div
+    - any
+  children:
+    - aui-agent-prompt
+    - aui-stack
+    - aui-select
+    - aui-wrap
+    - aui-inset
+    - aui-divider
+    - aui-textarea
+    - aui-button
+    - any
+tokens:
+  - name: --aui-agent-input-gap
+    default: calc(var(--aui-space) * 4)
+    description: Vertical gap between composer children (prompt, chips, toolbars).
+  - name: --aui-agent-input-padding
+    default: calc(var(--aui-space) * 4)
+    description: Padding around the composer surface.
+examples:
+  - description: Full advanced composer with header, model selectors, prompt, and suggestion chips
+    html: |-
+      <aui-container padding="0" max-width="2xl" width="full">
+        <aui-header dividers padding="4">
+          <span slot="leading"
+            ><aui-icon name="chat-dots" label="UX Research" hide-label></aui-icon
+          ></span>
+          <span slot="content"><aui-text>Content Title</aui-text></span>
+          <span slot="trailing">
+            <aui-button ghost label="More options" density="compact" hide-label
+              ><aui-icon name="dots-three"></aui-icon
+            ></aui-button>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-agent-input width="full" padding="4" gap="4">
+            <aui-inset
+              ><aui-text muted> Describe what you'd like to explore. </aui-text>
+            </aui-inset>
+            <aui-divider></aui-divider>
+            <aui-stack gap="2">
+              <aui-select mode="bar" transparent width="full" density="compact">
+                <aui-select placeholder="GPT-5.2" outline>
+                  <aui-optgroup label="Claude">
+                    <aui-option value="opus-4.6">Opus 4.6</aui-option>
+                    <aui-option value="sonnet-4.6">Sonnet 4.6</aui-option>
+                  </aui-optgroup>
+                  <aui-optgroup label="ChatGPT">
+                    <aui-option value="gpt-5.2">GPT-5.2</aui-option>
+                  </aui-optgroup>
+                </aui-select>
+                <aui-select placeholder="UX Design Assistant" outline>
+                  <aui-optgroup label="Research">
+                    <aui-option value="ux-design">UX Design Assistant</aui-option>
+                    <aui-option value="ux-research">UX Researcher</aui-option>
+                    <aui-option value="user-interview"
+                      >User Interview Analyst</aui-option
+                    >
+                  </aui-optgroup>
+                  <aui-optgroup label="Engineering">
+                    <aui-option value="code-review">Code Review</aui-option>
+                    <aui-option value="architect">System Architect</aui-option>
+                  </aui-optgroup>
+                </aui-select>
+                <span spacer></span>
+                <aui-button ghost label="Settings" hide-label
+                  ><aui-icon name="sliders"></aui-icon
+                ></aui-button>
+                <aui-button ghost label="History" hide-label
+                  ><aui-icon name="clock"></aui-icon
+                ></aui-button>
+              </aui-select>
+              <aui-agent-prompt>
+                <aui-textarea
+                  placeholder="Help me understand why users are dropping off during onboarding"
+                  rows="3"
+                ></aui-textarea>
+                <aui-button ghost label="Improve prompt" data-role="improve" hide-label
+                  ><aui-icon name="sparkle"></aui-icon
+                ></aui-button>
+                <aui-inset padding="2" density="compact">
+                  <aui-select mode="bar" transparent width="full">
+                    <aui-button ghost label="Add" hide-label
+                      ><aui-icon name="plus"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Search" hide-label
+                      ><aui-icon name="magnifying-glass"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Attach" hide-label
+                      ><aui-icon name="paperclip"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Experiment" hide-label
+                      ><aui-icon name="flask"></aui-icon
+                    ></aui-button>
+                    <span spacer></span>
+                    <aui-button ghost label="Record" hide-label
+                      ><aui-icon name="circle"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Voice" hide-label
+                      ><aui-icon name="microphone"></aui-icon
+                    ></aui-button>
+                    <aui-button round label="Send" data-submit disabled hide-label
+                      ><aui-icon name="arrow-up"></aui-icon
+                    ></aui-button>
+                  </aui-select>
+                </aui-inset>
+              </aui-agent-prompt>
+              <aui-wrap gap="2" density="compact">
+                <aui-button outline round
+                  ><aui-icon name="lightbulb" slot="leading"></aui-icon> Clarify user
+                  problem</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="crosshair" slot="leading"></aui-icon> Define user
+                  context</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="list-checks" slot="leading"></aui-icon> Select
+                  deliverable</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="pencil" slot="leading"></aui-icon> Refine
+                  requirements</aui-button
+                >
+              </aui-wrap>
+            </aui-stack>
+          </aui-agent-input>
+        </aui-content>
+      </aui-container>
+  - description: Simple composer with send button
+    html: |-
+      <aui-agent-input padding="4" gap="4" max-width="lg">
+        <aui-agent-prompt>
+          <aui-textarea placeholder="Send a message..." rows="3"></aui-textarea>
+          <aui-inset padding="2" density="compact">
+            <aui-select mode="bar" transparent width="full">
+              <aui-button ghost label="Attach"
+                ><aui-icon name="paperclip"></aui-icon
+              ></aui-button>
+              <span spacer></span>
+              <aui-button round label="Send" data-submit disabled hide-label
+                ><aui-icon name="arrow-up"></aui-icon
+              ></aui-button>
+            </aui-select>
+          </aui-inset>
+        </aui-agent-prompt>
+      </aui-agent-input>
+  - description: Busy state with model chooser and stop button
+    html: |-
+      <aui-agent-input busy padding="4" gap="4" max-width="lg">
+        <aui-agent-prompt>
+          <aui-textarea placeholder="Ask a follow-up..." rows="2"></aui-textarea>
+          <aui-inset padding="2" density="compact">
+            <aui-select mode="bar" transparent width="full">
+              <aui-button ghost popover-trigger="model-chooser">
+                <aui-icon name="robot" slot="leading"></aui-icon> Sonnet 4.6
+              </aui-button>
+              <span spacer></span>
+              <aui-button round label="Stop" data-submit disabled hide-label
+                ><aui-icon name="stop"></aui-icon
+              ></aui-button>
+            </aui-select>
+          </aui-inset>
+        </aui-agent-prompt>
+      </aui-agent-input>
+  - description: Single-line inline prompt with send button
+    html: |-
+      <aui-agent-input padding="4" max-width="lg">
+        <aui-agent-prompt inline>
+          <aui-textarea placeholder="Send a message..." rows="1"></aui-textarea>
+          <aui-button round label="Send" data-submit hide-label
+            ><aui-icon name="arrow-up"></aui-icon
+          ></aui-button>
+        </aui-agent-prompt>
+      </aui-agent-input>