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

package/dist/docs/components/description-list.yaml

@@ -0,0 +1,81 @@
+name: Description List
+tag: aui-description-list
+type: css-only
+summary: Key-value pair display using native dt/dd elements with grid layout.
+attributes:
+  direction:
+    type: enum
+    values:
+      - row
+      - column
+    default: row
+    description: Layout direction of term/description pairs
+  striped:
+    type: boolean
+    description: Alternating background on pairs
+usage: |
+  <aui-description-list>
+    <dt>Name</dt>
+    <dd>Jane Doe</dd>
+    <dt>Role</dt>
+    <dd>Engineer</dd>
+  </aui-description-list>
+examples:
+  - description: Basic key-value description list
+    html: |-
+      <aui-description-list>
+        <dt>Name</dt>
+        <dd>Jane Doe</dd>
+        <dt>Role</dt>
+        <dd>Engineer</dd>
+        <dt>Email</dt>
+        <dd>jane@example.com</dd>
+        <dt>Location</dt>
+        <dd>San Francisco, CA</dd>
+      </aui-description-list>
+
+      <!-- ===============================================================
+           COLUMN DIRECTION
+           =============================================================== -->
+  - description: Column direction (stacked term above description)
+    html: |-
+      <aui-description-list direction="column">
+        <dt>Status</dt>
+        <dd>Active</dd>
+        <dt>Plan</dt>
+        <dd>Professional</dd>
+        <dt>Billing</dt>
+        <dd>Monthly</dd>
+      </aui-description-list>
+
+      <!-- ===============================================================
+           STRIPED
+           =============================================================== -->
+  - description: Striped rows for easier scanning
+    html: |-
+      <aui-description-list striped>
+        <dt>Created</dt>
+        <dd>2024-01-15</dd>
+        <dt>Updated</dt>
+        <dd>2024-03-21</dd>
+        <dt>Owner</dt>
+        <dd>Kim Granlund</dd>
+        <dt>Version</dt>
+        <dd>2.1.0</dd>
+      </aui-description-list>
+
+      <!-- ===============================================================
+           STRIPED + ROW
+           =============================================================== -->
+  - description: Striped row layout (default direction)
+    html: |-
+      <aui-description-list striped>
+        <dt>API Key</dt>
+        <dd>sk_live_abc123def456</dd>
+        <dt>Endpoint</dt>
+        <dd>https://api.example.com/v2</dd>
+        <dt>Rate Limit</dt>
+        <dd>1,000 requests/min</dd>
+        <dt>Last Used</dt>
+        <dd>2 hours ago</dd>
+      </aui-description-list>

package/dist/docs/components/disclosure-group.yaml

@@ -2,65 +2,84 @@ name: aui-disclosure-group
 tag: aui-disclosure-group
 type: component
 summary: Coordinates child aui-disclosure elements with optional exclusive (accordion) mode.
-description: >
-  Groups multiple aui-disclosure children. When the exclusive attribute
-  is present, opening one disclosure automatically closes all siblings,
-  creating accordion behavior. Without exclusive, all disclosures can
-  be open independently. Uses a MutationObserver to detect open
-  attribute changes on child disclosures.
-
+description: |
+  Groups multiple aui-disclosure children. When the exclusive attribute is present, opening one disclosure automatically closes all siblings, creating accordion behavior. Without exclusive, all disclosures can be open independently. Uses a MutationObserver to detect open attribute changes on child disclosures.
 base: AgentElement
-
-# -- Component attributes ---------------------------------------------
-
 attributes:
   exclusive:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      When set, only one child disclosure can be open at a time.
-      Opening a disclosure closes all siblings.
-
-# -- Content model -----------------------------------------------------
-
+    description: |
+      When set, only one child disclosure can be open at a time. Opening a disclosure closes all siblings.
 content:
   model: block
-  accepts: [aui-disclosure]
+  accepts:
+    - aui-disclosure
   required: true
-  description: >
-    One or more aui-disclosure children. The group coordinates
-    their open/close state.
-
-# -- Composition -------------------------------------------------------
-
+  description: |
+    One or more aui-disclosure children. The group coordinates their open/close state.
 composition:
-  parents: [aui-stack, aui-content, aui-inset, div]
-  children: [aui-disclosure]
-  context: >
-    Block-level element. Contains aui-disclosure children.
-    Use inside stacks, content areas, or sidebars.
-
-# -- Examples ----------------------------------------------------------
-
+  parents:
+    - aui-stack
+    - aui-content
+    - aui-inset
+    - div
+  children:
+    - aui-disclosure
+  context: |
+    Block-level element. Contains aui-disclosure children. Use inside stacks, content areas, or sidebars.
 examples:
-  - html: |
+  - description: Independent disclosure group
+    html: |-
       <aui-disclosure-group>
-        <aui-disclosure summary="Section 1"><p>Content 1</p></aui-disclosure>
-        <aui-disclosure summary="Section 2"><p>Content 2</p></aui-disclosure>
+        <aui-disclosure summary="Section 1">
+          <p>Content for section 1. All sections can be open simultaneously.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Section 2">
+          <p>Content for section 2. Independent of other sections.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Section 3">
+          <p>Content for section 3. Toggle freely.</p>
+        </aui-disclosure>
       </aui-disclosure-group>
-    description: Independent disclosure group (all can be open).
 
-  - html: |
+      <!-- ===============================================================
+           EXCLUSIVE -- accordion mode
+           =============================================================== -->
+  - description: Exclusive accordion mode
+    html: |-
       <aui-disclosure-group exclusive>
-        <aui-disclosure summary="General" open><p>General settings...</p></aui-disclosure>
-        <aui-disclosure summary="Security"><p>Security settings...</p></aui-disclosure>
-        <aui-disclosure summary="Notifications"><p>Notification prefs...</p></aui-disclosure>
+        <aui-disclosure summary="General" open>
+          <p>General settings content. Opening another section will close this one.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Security">
+          <p>Security settings content. Only one section open at a time.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Notifications">
+          <p>Notification preferences. Accordion enforces single-open.</p>
+        </aui-disclosure>
       </aui-disclosure-group>
-    description: Exclusive accordion mode.
-
-# -- Use cases ---------------------------------------------------------
 
+      <!-- ===============================================================
+           FAQ STYLE -- exclusive with more sections
+           =============================================================== -->
+  - description: FAQ-style accordion
+    html: |-
+      <aui-disclosure-group exclusive>
+        <aui-disclosure summary="What is agent-ui?">
+          <p>A design system for building agent interfaces with web components.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="How do I install it?">
+          <p>Install via npm: npm install @agent-ui/kit</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Is it open source?">
+          <p>Yes, agent-ui is released under the MIT license.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Can I use it with React?">
+          <p>Yes, web components work with any framework including React, Vue, and Svelte.</p>
+        </aui-disclosure>
+      </aui-disclosure-group>
 use-cases:
   - FAQ pages with accordion behavior.
   - Settings panels with grouped expandable sections.

package/dist/docs/components/disclosure.yaml

@@ -2,80 +2,94 @@ name: aui-disclosure
 tag: aui-disclosure
 type: component
 summary: Collapsible content section with animated expand/collapse.
-description: >
-  Standalone collapsible section with a clickable trigger row.
-  Stamps a button with the summary text and a chevron icon. Content
-  height animates via CSS grid-template-rows transition. Toggle the
-  open attribute to expand or collapse programmatically.
-
+description: |
+  Standalone collapsible section with a clickable trigger row. Stamps a button with the summary text and a chevron icon. Content height animates via CSS grid-template-rows transition. Toggle the open attribute to expand or collapse programmatically.
 base: AgentElement
-
-# -- Component attributes ------------------------------------------
-
 attributes:
   summary:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       Text displayed in the trigger row header.
-
   open:
     syntax: boolean
     type: boolean
     default: false
-    description: >
+    description: |
       Whether the content is expanded. Toggle to open/close.
-
-# -- Content model -------------------------------------------------
-
 content:
   model: block
-  accepts: [any]
+  accepts:
+    - any
   required: true
-  description: >
-    The collapsible content. Can contain any elements — forms,
-    stacks, text, nested disclosures, etc.
-
-# -- Slots ---------------------------------------------------------
-
+  description: |
+    The collapsible content. Can contain any elements — forms, stacks, text, nested disclosures, etc.
 slots:
   default:
-    accepts: [any]
+    accepts:
+      - any
     required: true
     description: Content revealed when open.
-
-# -- Composition ---------------------------------------------------
-
 composition:
-  parents: [aui-stack, aui-content, aui-inset, div]
-  children: [any]
-  context: >
-    Block-level element. Nest inside stacks, content areas, or
-    sidebars. Supports nesting (disclosure inside disclosure).
-
-# -- Examples ------------------------------------------------------
-
+  parents:
+    - aui-stack
+    - aui-content
+    - aui-inset
+    - div
+  children:
+    - any
+  context: |
+    Block-level element. Nest inside stacks, content areas, or sidebars. Supports nesting (disclosure inside disclosure).
 examples:
-  - html: |
+  - description: Basic collapsed disclosure
+    html: |-
       <aui-disclosure summary="More details">
-        <p>Hidden content revealed on click.</p>
+        <p>Hidden content revealed on click. Click the trigger row to expand.</p>
       </aui-disclosure>
-    description: Basic collapsed disclosure.
 
-  - html: |
+      <!-- ===============================================================
+           INITIALLY OPEN
+           =============================================================== -->
+  - description: Initially open disclosure
+    html: |-
       <aui-disclosure summary="Advanced Settings" open>
         <aui-stack gap="3">
-          <p>Setting A</p>
-          <p>Setting B</p>
+          <p>Setting A: Timeout configuration</p>
+          <p>Setting B: Retry policy</p>
         </aui-stack>
       </aui-disclosure>
-    description: Initially open disclosure.
 
-  - html: |
+      <!-- ===============================================================
+           NESTED
+           =============================================================== -->
+  - description: Nested disclosures
+    html: |-
       <aui-disclosure summary="Section A">
-        <aui-disclosure summary="Sub-section A.1">
-          Nested content.
-        </aui-disclosure>
+        <aui-stack gap="2">
+          <p>Top-level content for Section A.</p>
+          <aui-disclosure summary="Sub-section A.1">
+            <p>Nested content inside sub-section A.1.</p>
+          </aui-disclosure>
+          <aui-disclosure summary="Sub-section A.2">
+            <p>Nested content inside sub-section A.2.</p>
+          </aui-disclosure>
+        </aui-stack>
       </aui-disclosure>
-    description: Nested disclosures.
+
+      <!-- ===============================================================
+           MULTIPLE -- stacked disclosures
+           =============================================================== -->
+  - description: Stacked disclosures (FAQ style)
+    html: |-
+      <aui-stack gap="0">
+        <aui-disclosure summary="What is agent-ui?">
+          <p>A design system for building agent interfaces with web components.</p>
+        </aui-disclosure>
+        <aui-disclosure summary="How do I install it?">
+          <p>Install via npm: npm install @agent-ui/kit</p>
+        </aui-disclosure>
+        <aui-disclosure summary="Is it open source?">
+          <p>Yes, agent-ui is released under the MIT license.</p>
+        </aui-disclosure>
+      </aui-stack>

package/dist/docs/components/divider.yaml

@@ -0,0 +1,63 @@
+name: aui-divider
+tag: aui-divider
+type: element
+summary: Semantic separator line.
+description: |
+  Visual separator between content sections. Horizontal by default. Set orientation="vertical" for vertical dividers inside flex rows. Self-closing — no children.
+attributes:
+  orientation:
+    syntax: key-value
+    type: enum
+    values:
+      - vertical
+    default: null
+    description: |
+      Divider orientation. Horizontal is the default — no attribute needed. Set orientation="vertical" inside direction="row" containers.
+modifiers:
+  label:
+    syntax: boolean
+    description: |
+      Enables labeled divider mode. The element switches to flex layout with ::before and ::after lines flanking the text content. Place label text as the element's inner content. Example: <aui-divider label>or continue with</aui-divider>
+content:
+  model: conditional
+  accepts:
+    - text
+  required: false
+  description: |
+    Empty by default — renders as a 1px line. When the [label] attribute is set, accepts inline text content displayed between two horizontal lines.
+composition:
+  parents:
+    - aui-stack
+    - aui-grid
+    - div
+    - section
+    - main
+  children: null
+  context: |
+    Use between sections, list items, or grouped content. Horizontal by default in column stacks. Use orientation="vertical" in row stacks. The divider stretches to fill available width (horizontal) or height (vertical, via align-self: stretch).
+tokens:
+  color:
+    - --aui-border-muted
+  typography:
+    - --aui-font-family
+    - --aui-font-xs
+    - --aui-ink-muted
+examples:
+  - description: Horizontal divider between content
+    html: |-
+      <aui-stack>
+        <span>Above</span>
+        <aui-divider></aui-divider>
+        <span>Below</span>
+      </aui-stack>
+  - description: Vertical divider in a row
+    html: |-
+      <aui-stack direction="row" align-items="center" style="height: 2rem;">
+        <span>Left</span>
+        <aui-divider orientation="vertical"></aui-divider>
+        <span>Right</span>
+      </aui-stack>
+  - description: Labeled divider with text between lines
+    html: <aui-divider label>or continue with</aui-divider>
+  - description: Labeled divider as section header
+    html: <aui-divider label>Settings</aui-divider>

package/dist/docs/components/dropdown-menu.yaml

@@ -2,16 +2,9 @@ name: aui-dropdown-menu
 tag: aui-dropdown-menu
 type: component
 summary: Trigger button + popover menu for actions (not selection).
-description: >
-  A dropdown menu that stamps a trigger button and opens a popover with
-  action items. Unlike aui-select, does not track selection state — items
-  are fire-and-forget actions that emit a select event. Supports label,
-  icon-leading, hide-label for icon-only triggers, and grouped items
-  via aui-optgroup. Keyboard accessible with arrow navigation, Enter to
-  select, and Escape to close.
-
+description: |
+  A dropdown menu that stamps a trigger button and opens a popover with action items. Unlike aui-select, does not track selection state — items are fire-and-forget actions that emit a select event. Supports label, icon-leading, hide-label for icon-only triggers, and grouped items via aui-optgroup. Keyboard accessible with arrow navigation, Enter to select, and Escape to close.
 base: AgentElement
-
 attributes:
   label:
     syntax: key-value
@@ -43,7 +36,6 @@ attributes:
     type: boolean
     default: false
     description: Whether the menu popover is currently open.
-
 tokens:
   - name: --aui-dropdown-menu-font-family
     default: var(--aui-font-family)
@@ -93,7 +85,6 @@ tokens:
   - name: --aui-dropdown-menu-dropdown-shadow
     default: var(--aui-shadow-lg)
     description: Box shadow of the dropdown popover.
-
 a11y:
   role: button (trigger), menu (popover)
   keyboard:
@@ -104,29 +95,31 @@ a11y:
     Escape: Close menu and return focus to trigger.
     Home: First item.
     End: Last item.
-
 events:
   select:
     description: Fired when a menu item is activated. Detail contains { value }.
-
 dependencies:
   - aui-option
   - aui-optgroup
-
 composition:
-  parents: [aui-header, aui-footer, aui-stack, any]
-  children: [aui-option, aui-optgroup]
-
+  parents:
+    - aui-header
+    - aui-footer
+    - aui-stack
+    - any
+  children:
+    - aui-option
+    - aui-optgroup
 examples:
-  - html: |
+  - description: Basic dropdown menu with labeled trigger
+    html: |-
       <aui-dropdown-menu label="Actions">
         <aui-option value="edit">Edit</aui-option>
         <aui-option value="duplicate">Duplicate</aui-option>
         <aui-option value="delete">Delete</aui-option>
       </aui-dropdown-menu>
-    description: Basic dropdown menu with labeled trigger.
-
-  - html: |
+  - description: Ghost-style dropdown with grouped options
+    html: |-
       <aui-dropdown-menu label="Actions" ghost>
         <aui-optgroup label="Edit">
           <aui-option value="cut">Cut</aui-option>
@@ -137,10 +130,8 @@ examples:
           <aui-option value="delete">Delete</aui-option>
         </aui-optgroup>
       </aui-dropdown-menu>
-    description: Ghost-style dropdown with grouped options.
-
-  - html: |
+  - description: Disabled dropdown menu
+    html: |-
       <aui-dropdown-menu label="Actions" disabled>
         <aui-option value="edit">Edit</aui-option>
       </aui-dropdown-menu>
-    description: Disabled dropdown menu.

package/dist/docs/components/feed.yaml

@@ -7,7 +7,8 @@ attributes:
   align:
     syntax: key-value
     type: enum
-    values: [end]
+    values:
+      - end
     default: ""
     description: Bottom-anchor content (chat-style).
   scrollable:
@@ -20,39 +21,32 @@ attributes:
     type: boolean
     default: false
     description: Auto-scroll to bottom on new children (when pinned).
-description: >
-  Scrollable feed for messages and activity streams. Uses block layout
-  (not flex) so aui-feed-item margins collapse, giving natural vertical
-  rhythm without explicit gap management.
-
+description: |
+  Scrollable feed for messages and activity streams. Uses block layout (not flex) so aui-feed-item margins collapse, giving natural vertical rhythm without explicit gap management.
 a11y:
   role: feed
 composition:
-  parents: [any]
-  children: [aui-feed-item, any]
-
-# ── Child element ──────────────────────────────────────────
+  parents:
+    - any
+  children:
+    - aui-feed-item
+    - any
 children:
   aui-feed-item:
     tag: aui-feed-item
     summary: Individual item in a feed with margin-based vertical rhythm.
-    description: >
-      Uses margin-block for spacing that collapses between siblings.
-      Consecutive items with the same role attribute (e.g. role="user",
-      role="assistant") receive tighter spacing via adjacent-sibling
-      selectors, producing compact clusters of same-sender messages.
+    description: |
+      Uses margin-block for spacing that collapses between siblings. Consecutive items with the same role attribute (e.g. role="user", role="assistant") receive tighter spacing via adjacent-sibling selectors, producing compact clusters of same-sender messages.
     attributes:
       role:
         syntax: key-value
         type: string
         default: ""
-        description: >
-          Semantic role of the feed item (e.g. "user", "assistant", "system").
-          Consecutive items sharing the same role get tighter margin-block-start
-          (50% of normal spacing).
-
+        description: |
+          Semantic role of the feed item (e.g. "user", "assistant", "system"). Consecutive items sharing the same role get tighter margin-block-start (50% of normal spacing).
 examples:
-  - html: |
+  - description: Scrollable message feed with feed items
+    html: |-
       <aui-feed scrollable style="height: 16rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-feed-item role="user">
           <aui-inset><aui-text>Hey, how's the project going?</aui-text></aui-inset>
@@ -67,6 +61,3 @@ examples:
           <aui-inset><aui-text>Nice, let's review it together.</aui-text></aui-inset>
         </aui-feed-item>
       </aui-feed>
-    description: >
-      Scrollable message feed with aui-feed-item elements. Consecutive
-      assistant items get tighter spacing via same-role margin collapsing.