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

package/dist/docs/components/tabs.yaml

@@ -2,27 +2,22 @@ name: aui-tabs
 tag: aui-tabs
 type: component
 summary: Tabbed interface with roving keyboard navigation.
-description: >
-  Coordinator for aui-tab triggers and aui-tab-panel content.
-  Handles selection, ARIA wiring, and keyboard navigation
-  (arrow keys, Home/End). Supports horizontal and vertical layout.
-
+description: |
+  Coordinator for aui-tab triggers and aui-tab-panel content. Handles selection, ARIA wiring, and keyboard navigation (arrow keys, Home/End). Supports horizontal and vertical layout.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Currently selected tab value.
-
   orientation:
     syntax: key-value
     type: enum
-    values: [vertical]
+    values:
+      - vertical
     default: ""
     description: Layout direction. Default is horizontal.
-
 a11y:
   role: tablist
   keyboard:
@@ -32,15 +27,15 @@ a11y:
     ArrowUp: Select previous tab (vertical).
     Home: Select first tab.
     End: Select last tab.
-
 events:
   change:
     description: Fired when the active tab changes. detail.value is the new tab value.
-
 composition:
-  parents: [any]
-  children: [aui-tab, aui-tab-panel]
-
+  parents:
+    - any
+  children:
+    - aui-tab
+    - aui-tab-panel
 tokens:
   - name: --aui-tabs-separator-color
     default: var(--aui-border-muted)
@@ -54,22 +49,110 @@ tokens:
   - name: --aui-tabs-indicator-radius
     default: 1px
     description: Border radius of the indicator bar ends.
-
 examples:
-  - html: |
+  - description: Basic tabbed interface
+    html: |-
       <aui-tabs value="general">
         <aui-tab value="general">General</aui-tab>
         <aui-tab value="advanced">Advanced</aui-tab>
         <aui-tab-panel value="general">General content</aui-tab-panel>
         <aui-tab-panel value="advanced">Advanced content</aui-tab-panel>
       </aui-tabs>
-    description: Basic tabbed interface.
-
-  - html: |
+  - description: Vertical tabs
+    html: |-
       <aui-tabs orientation="vertical" value="profile">
         <aui-tab value="profile">Profile</aui-tab>
         <aui-tab value="security">Security</aui-tab>
         <aui-tab-panel value="profile">Profile settings</aui-tab-panel>
         <aui-tab-panel value="security">Security settings</aui-tab-panel>
       </aui-tabs>
-    description: Vertical tabs.
+  - description: Horizontal tabs with 5 tabs and rich panel content
+    html: |-
+      <aui-tabs value="overview">
+        <aui-tab value="overview">Overview</aui-tab>
+        <aui-tab value="activity">Activity</aui-tab>
+        <aui-tab value="settings">Settings</aui-tab>
+        <aui-tab value="members">Members</aui-tab>
+        <aui-tab value="billing">Billing</aui-tab>
+        <aui-tab-panel value="overview">
+          <aui-stack gap="sm">
+            <aui-text size="lg" weight="medium">Project Overview</aui-text>
+            <aui-text>Summary of recent project activity and key metrics.</aui-text>
+          </aui-stack>
+        </aui-tab-panel>
+        <aui-tab-panel value="activity">
+          <aui-text>Recent activity feed goes here.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="settings">
+          <aui-text>Project configuration options.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="members">
+          <aui-text>Team member list and roles.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="billing">
+          <aui-text>Billing and subscription details.</aui-text>
+        </aui-tab-panel>
+      </aui-tabs>
+  - description: Tab with a disabled tab
+    html: |-
+      <aui-tabs value="edit">
+        <aui-tab value="edit">Edit</aui-tab>
+        <aui-tab value="preview">Preview</aui-tab>
+        <aui-tab value="publish" disabled>Publish</aui-tab>
+        <aui-tab value="history">History</aui-tab>
+        <aui-tab-panel value="edit">
+          <aui-text>Editor content area.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="preview">
+          <aui-text>Preview of the document.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="publish">
+          <aui-text>Publishing is not available yet.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="history">
+          <aui-text>Version history for this document.</aui-text>
+        </aui-tab-panel>
+      </aui-tabs>
+  - description: Tabs with icons
+    html: |-
+      <aui-tabs value="home">
+        <aui-tab value="home"><aui-icon name="house"></aui-icon> Home</aui-tab>
+        <aui-tab value="messages"><aui-icon name="envelope"></aui-icon> Messages</aui-tab>
+        <aui-tab value="settings"><aui-icon name="gear"></aui-icon> Settings</aui-tab>
+        <aui-tab value="search"><aui-icon name="magnifying-glass"></aui-icon> Search</aui-tab>
+        <aui-tab-panel value="home">
+          <aui-text>Welcome home. Here is your dashboard.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="messages">
+          <aui-text>Your recent messages appear here.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="settings">
+          <aui-text>Manage your account settings.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="search">
+          <aui-text>Search across all content.</aui-text>
+        </aui-tab-panel>
+      </aui-tabs>
+  - description: Vertical tabs with 4 sections and icons
+    html: |-
+      <aui-tabs orientation="vertical" value="account">
+        <aui-tab value="account"><aui-icon name="user"></aui-icon> Account</aui-tab>
+        <aui-tab value="notifications"><aui-icon name="chat-dots"></aui-icon> Notifications</aui-tab>
+        <aui-tab value="appearance"><aui-icon name="sun"></aui-icon> Appearance</aui-tab>
+        <aui-tab value="advanced"><aui-icon name="sliders"></aui-icon> Advanced</aui-tab>
+        <aui-tab-panel value="account">
+          <aui-stack gap="sm">
+            <aui-text size="lg" weight="medium">Account Settings</aui-text>
+            <aui-text>Manage your profile, email, and password.</aui-text>
+          </aui-stack>
+        </aui-tab-panel>
+        <aui-tab-panel value="notifications">
+          <aui-text>Configure how and when you receive notifications.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="appearance">
+          <aui-text>Theme, colors, and display preferences.</aui-text>
+        </aui-tab-panel>
+        <aui-tab-panel value="advanced">
+          <aui-text>Developer options and experimental features.</aui-text>
+        </aui-tab-panel>
+      </aui-tabs>

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

@@ -2,86 +2,102 @@ name: aui-tag-group
 tag: aui-tag-group
 type: component
 summary: Keyboard-navigable container for aui-chip elements with focus management.
-description: >
-  Groups aui-chip children with arrow-key navigation between them.
-  Roving tabindex moves focus with Left/Right/Home/End keys.
-  Delete/Backspace on a removable chip removes it and shifts focus
-  to the nearest neighbor. Optional max attribute limits the number
-  of tags allowed.
-
+description: |
+  Groups aui-chip children with arrow-key navigation between them. Roving tabindex moves focus with Left/Right/Home/End keys. Delete/Backspace on a removable chip removes it and shifts focus to the nearest neighbor. Optional max attribute limits the number of tags allowed.
 base: AgentElement
-
-# -- Component attributes ---------------------------------------------
-
 attributes:
   label:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       Accessible label for the group. Set as aria-label.
-
   max:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Maximum number of tags allowed. Use the atMax property
-      to check if the limit is reached.
-
-# -- Content model -----------------------------------------------------
-
+    description: |
+      Maximum number of tags allowed. Use the atMax property to check if the limit is reached.
 content:
   model: block
-  accepts: [aui-chip]
+  accepts:
+    - aui-chip
   required: true
-  description: >
-    One or more aui-chip children. The group provides keyboard
-    navigation and focus management across them.
-
-# -- Events ------------------------------------------------------------
-
+  description: |
+    One or more aui-chip children. The group provides keyboard navigation and focus management across them.
 events:
   - name: remove
     detail: "{ value: string, chip: HTMLElement }"
     description: Bubbles from child chip when removed.
-
-# -- Composition -------------------------------------------------------
-
 composition:
-  parents: [aui-stack, aui-content, aui-inset, div, form]
-  children: [aui-chip]
-  context: >
-    Inline or block-level element. Use inside forms, filter bars,
-    or tag input fields. Wraps chips in a flex-wrap layout.
-
-# -- Examples ----------------------------------------------------------
-
+  parents:
+    - aui-stack
+    - aui-content
+    - aui-inset
+    - div
+    - form
+  children:
+    - aui-chip
+  context: |
+    Inline or block-level element. Use inside forms, filter bars, or tag input fields. Wraps chips in a flex-wrap layout.
 examples:
-  - html: |
+  - description: Basic tag group with removable chips
+    html: |-
       <aui-tag-group label="Skills">
         <aui-chip removable>React</aui-chip>
         <aui-chip removable>Vue</aui-chip>
         <aui-chip removable>TypeScript</aui-chip>
       </aui-tag-group>
-    description: Basic tag group with removable chips.
 
-  - html: |
+      <!-- ===============================================================
+           READ-ONLY -- no removable chips
+           =============================================================== -->
+  - description: Read-only tag group
+    html: |-
+      <aui-tag-group label="Categories">
+        <aui-chip>Open Source</aui-chip>
+        <aui-chip>MIT License</aui-chip>
+        <aui-chip>Web Components</aui-chip>
+      </aui-tag-group>
+
+      <!-- ===============================================================
+           WITH MAX LIMIT
+           =============================================================== -->
+  - description: Tag group with max limit
+    html: |-
       <aui-tag-group label="Tags" max="5">
         <aui-chip removable>Design</aui-chip>
         <aui-chip removable>Frontend</aui-chip>
+        <aui-chip removable>CSS</aui-chip>
       </aui-tag-group>
-    description: Tag group with max limit.
 
-  - html: |
-      <aui-tag-group label="Categories">
-        <aui-chip>Open Source</aui-chip>
-        <aui-chip>MIT License</aui-chip>
+      <!-- ===============================================================
+           WITH INTENT COLORS
+           =============================================================== -->
+  - description: Tag group with intent-colored chips
+    html: |-
+      <aui-tag-group label="Statuses">
+        <aui-chip success>Active</aui-chip>
+        <aui-chip warning>Pending</aui-chip>
+        <aui-chip danger>Blocked</aui-chip>
+        <aui-chip accent>Review</aui-chip>
       </aui-tag-group>
-    description: Read-only tag group (no removable chips).
-
-# -- Use cases ---------------------------------------------------------
 
+      <!-- ===============================================================
+           MANY CHIPS -- wrapping behavior
+           =============================================================== -->
+  - description: Many chips demonstrating wrap behavior
+    html: |-
+      <aui-tag-group label="Technologies">
+        <aui-chip removable>React</aui-chip>
+        <aui-chip removable>Vue</aui-chip>
+        <aui-chip removable>Angular</aui-chip>
+        <aui-chip removable>Svelte</aui-chip>
+        <aui-chip removable>TypeScript</aui-chip>
+        <aui-chip removable>Node.js</aui-chip>
+        <aui-chip removable>Python</aui-chip>
+        <aui-chip removable>Rust</aui-chip>
+      </aui-tag-group>
 use-cases:
   - Tag input fields (skills, interests, labels).
   - Filter bars with removable filter chips.

package/dist/docs/components/text.yaml

@@ -0,0 +1,67 @@
+name: aui-text
+tag: aui-text
+type: element
+summary: Block-level text element with muted, strong, and size attributes.
+description: |
+  A CSS-only text element that replaces styled <span> tags for descriptions, labels, and body copy. The muted attribute sets --aui-ink-muted color. The strong attribute sets --aui-ink-strong color for emphasized text. No JavaScript required.
+presentational:
+  size:
+    syntax: key-value
+    type: enum
+    default: md
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+    description: Font size from the type scale.
+  weight:
+    syntax: key-value
+    type: enum
+    default: normal
+    values:
+      - medium
+      - semibold
+      - bold
+    description: Font weight override.
+modifiers:
+  muted:
+    syntax: boolean
+    description: Sets color to --aui-ink-muted for secondary text.
+  strong:
+    syntax: boolean
+    description: Sets color to --aui-ink-strong for emphasized text.
+examples:
+  - description: Full size scale
+    html: |-
+      <aui-stack gap="3">
+        <aui-text size="xl">Text XL — Large body text</aui-text>
+        <aui-text size="lg">Text LG — Container body text</aui-text>
+        <aui-text size="md">Text MD — Default reading size</aui-text>
+        <aui-text size="sm">Text SM — Secondary descriptions</aui-text>
+        <aui-text size="xs">Text XS — Fine print and captions</aui-text>
+      </aui-stack>
+  - description: Muted variants
+    html: |-
+      <aui-stack gap="3">
+        <aui-text size="lg" muted>Muted LG — Subdued large text</aui-text>
+        <aui-text size="md" muted>Muted MD — Subdued body text</aui-text>
+        <aui-text size="sm" muted>Muted SM — Subdued description</aui-text>
+        <aui-text size="xs" muted>Muted XS — Subdued caption</aui-text>
+      </aui-stack>
+  - description: Strong variants
+    html: |-
+      <aui-stack gap="3">
+        <aui-text size="lg" strong>Strong LG — Emphasized large text</aui-text>
+        <aui-text size="md" strong>Strong MD — Emphasized body text</aui-text>
+        <aui-text size="sm" strong>Strong SM — Emphasized description</aui-text>
+        <aui-text size="xs" strong>Strong XS — Emphasized caption</aui-text>
+      </aui-stack>
+  - description: Weight variants
+    html: |-
+      <aui-stack gap="3">
+        <aui-text size="md">Regular weight (default)</aui-text>
+        <aui-text size="md" weight="medium">Medium weight</aui-text>
+        <aui-text size="md" weight="semibold">Semibold weight</aui-text>
+      </aui-stack>

package/dist/docs/components/textarea.yaml

@@ -2,138 +2,129 @@ name: aui-textarea
 tag: aui-textarea
 type: component
 summary: Multi-line text input with autogrow support.
-description: >
-  Multi-line input. Same wrapper pattern as aui-input — the
-  wrapper owns the visual chrome, a native <textarea> lives
-  inside with browser chrome stripped. Supports autogrow
-  modifier for auto-expanding height to content. Defaults to
-  width: 20ch for standalone use. Automatically stretches to full
-  width when placed inside aui-field. Use width="full" on the element
-  to override the default width in other contexts.
-
+description: |
+  Multi-line input. Same wrapper pattern as aui-input — the wrapper owns the visual chrome, a native <textarea> lives inside with browser chrome stripped. Supports autogrow modifier for auto-expanding height to content. Defaults to width: 20ch for standalone use. Automatically stretches to full width when placed inside aui-field. Use width="full" on the element to override the default width in other contexts.
 base: AgentElement
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: true
     default: medium
-    values: [xs, sm, md, lg, xl]
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
     description: Controls font size and padding.
-
   radius:
     syntax: boolean
     exclusive: true
     cascades: true
     default: medium
-    values: [sharp, round]
+    values:
+      - sharp
+      - round
     description: Controls border radius.
-
   density:
     syntax: key-value
     attribute: density
     cascades: true
     default: regular
-    values: [compact, spacious]
+    values:
+      - compact
+      - spacious
     description: Controls padding compression.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Color family for border and focus ring.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   readonly:
     syntax: boolean
     type: boolean
     default: false
     description: Allows selection but prevents editing.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks as required for form validation.
-
   autogrow:
     syntax: boolean
     type: boolean
     default: false
-    description: >
+    description: |
       Auto-expands height to fit content. Disables manual resize.
-
   autofocus:
     syntax: boolean
     type: boolean
     default: false
     description: Focuses the textarea on mount.
-
   placeholder:
     syntax: key-value
     type: string
     default: ""
     description: Placeholder text.
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Current textarea value.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form submission name.
-
   rows:
     syntax: key-value
     type: string
     default: "3"
     description: Initial visible row count.
-
   minlength:
     syntax: key-value
     type: string
     default: ""
     description: Minimum character count.
-
   maxlength:
     syntax: key-value
     type: string
     default: ""
     description: Maximum character count.
-
 modifiers:
   autogrow:
     syntax: boolean
-    description: >
-      Auto-expands textarea height to fit content. Disables
-      manual resize handle. Height adjusts on every input event.
-
+    description: |
+      Auto-expands textarea height to fit content. Disables manual resize handle. Height adjusts on every input event.
 content:
   model: mixed
-  accepts: [textarea]
+  accepts:
+    - textarea
   required: false
   description: Auto-stamps a native textarea if none exists.
-
 composition:
-  parents: [aui-field, aui-stack, form, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Use inside aui-field for labeled textareas. Standalone for
-    chat inputs, comment boxes, code editors.
-
+  context: |
+    Use inside aui-field for labeled textareas. Standalone for chat inputs, comment boxes, code editors.
 a11y:
   role: implicit (native textarea)
   keyboard:
@@ -142,13 +133,11 @@ a11y:
     aria-disabled: Reflected from disabled.
     aria-readonly: Reflected from readonly.
     aria-required: Reflected from required.
-
 events:
   input:
     description: Fires on every keystroke.
   change:
     description: Fires on blur.
-
 tokens:
   - name: --aui-textarea-font-family
     default: var(--aui-font-family)
@@ -204,28 +193,22 @@ tokens:
   - name: --aui-textarea-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Border color when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [disabled], [readonly], [autogrow] — visual state via attributes"
     - "[autogrow] > textarea { resize: none; overflow: hidden } — CSS disables manual resize"
-    - ":focus-within — focus ring on wrapper"
-
+    - :focus-within — focus ring on wrapper
 examples:
-  - html: <aui-textarea placeholder="Write a message..."></aui-textarea>
-    description: Basic textarea.
-
-  - html: <aui-textarea placeholder="Auto-expanding..." autogrow></aui-textarea>
-    description: Autogrow textarea.
-
-  - html: <aui-textarea placeholder="Disabled" disabled></aui-textarea>
-    description: Disabled textarea.
-
-  - html: <aui-textarea value="Read only content" readonly></aui-textarea>
-    description: Read-only textarea.
-
-  - html: |
+  - description: Basic textarea
+    html: <aui-textarea placeholder="Write a message..."></aui-textarea>
+  - description: Autogrow textarea
+    html: <aui-textarea placeholder="Auto-expanding..." autogrow></aui-textarea>
+  - description: Disabled textarea
+    html: <aui-textarea placeholder="Disabled" disabled></aui-textarea>
+  - description: Read-only textarea
+    html: <aui-textarea value="Read only content" readonly></aui-textarea>
+  - description: Textarea inside a labeled field
+    html: |-
       <aui-field label="Bio" description="Tell us about yourself.">
         <aui-textarea placeholder="Write here..." rows="4"></aui-textarea>
       </aui-field>
-    description: Textarea inside a labeled field.