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

package/dist/docs/components/tab.yaml

@@ -2,42 +2,34 @@ name: aui-tab
 tag: aui-tab
 type: component
 summary: Individual tab trigger within a tabbed interface.
-description: >
-  A single tab button within aui-tabs. Visual states driven by
-  selected and disabled attributes. Parent aui-tabs coordinates
-  selection and keyboard navigation.
-
+description: |
+  A single tab button within aui-tabs. Visual states driven by selected and disabled attributes. Parent aui-tabs coordinates selection and keyboard navigation.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Tab identifier, matched against aui-tab-panel value.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents selection.
-
   selected:
     syntax: boolean
     type: boolean
     default: false
     description: Whether this tab is currently active.
-
 a11y:
   role: tab
   aria:
     aria-selected: Reflects selected attribute.
     aria-disabled: Reflects disabled attribute.
-
 composition:
-  parents: [aui-tabs]
+  parents:
+    - aui-tabs
   children: null
-
 tokens:
   - name: --aui-tab-gap
     default: var(--aui-pad-gap-control)
@@ -75,15 +67,26 @@ tokens:
   - name: --aui-tab-color-disabled
     default: var(--aui-ink-disabled, var(--aui-ink-muted))
     description: Text color of disabled tabs.
-
 examples:
-  - html: |
-      <aui-tabs value="general">
-        <aui-tab value="general">General</aui-tab>
-        <aui-tab value="advanced">Advanced</aui-tab>
-        <aui-tab value="security">Security</aui-tab>
-        <aui-tab-panel value="general">General settings content.</aui-tab-panel>
-        <aui-tab-panel value="advanced">Advanced settings content.</aui-tab-panel>
-        <aui-tab-panel value="security">Security settings content.</aui-tab-panel>
+  - description: Tabs with a disabled tab
+    html: |-
+      <aui-tabs value="code">
+        <aui-tab value="code">Code</aui-tab>
+        <aui-tab value="issues">Issues</aui-tab>
+        <aui-tab value="pulls">Pull Requests</aui-tab>
+        <aui-tab value="actions" disabled>Actions</aui-tab>
+        <aui-tab-panel value="code">Repository source code.</aui-tab-panel>
+        <aui-tab-panel value="issues">Open issues tracker.</aui-tab-panel>
+        <aui-tab-panel value="pulls">Pull request list.</aui-tab-panel>
+        <aui-tab-panel value="actions">CI/CD pipelines (disabled).</aui-tab-panel>
+      </aui-tabs>
+  - description: Tab with icon content
+    html: |-
+      <aui-tabs value="files">
+        <aui-tab value="files"><aui-icon name="file-text"></aui-icon> Files</aui-tab>
+        <aui-tab value="starred"><aui-icon name="star"></aui-icon> Starred</aui-tab>
+        <aui-tab value="recent"><aui-icon name="clock"></aui-icon> Recent</aui-tab>
+        <aui-tab-panel value="files">All files in the workspace.</aui-tab-panel>
+        <aui-tab-panel value="starred">Your starred files.</aui-tab-panel>
+        <aui-tab-panel value="recent">Recently accessed files.</aui-tab-panel>
       </aui-tabs>
-    description: Tab triggers shown within a full tabs context.

package/dist/docs/components/table-header.yaml

@@ -1,11 +1,15 @@
 name: aui-table-header
 tag: aui-table-header
 type: component
-summary: Column header cell with bold label
+summary: Header row using CSS subgrid to align child cells with parent table columns.
 base: AgentElement
+description: >
+  A header row within an aui-table. Uses display:grid with subgrid to inherit
+  column definitions from the parent table. Contains aui-table-cell children
+  that align to the same column tracks as body rows.
 composition:
-  parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
-  children: null
+  parents: [aui-table, aui-table-head]
+  children: [aui-table-cell]
 tokens:
   - name: --aui-table-header-font-weight
     default: var(--aui-font-weight-medium)
@@ -18,14 +22,20 @@ tokens:
     description: Text color for header cells.
   - name: --aui-table-header-size
     default: var(--aui-size)
-    description: Minimum height of the header cell.
-  - name: --aui-table-header-padding-block
-    default: var(--aui-pad-control-block)
-    description: Block (vertical) padding for header cells.
-  - name: --aui-table-header-padding-inline
-    default: var(--aui-pad-control-inline)
-    description: Inline (horizontal) padding for header cells.
+    description: Minimum height of the header row.
 
 examples:
-  - html: See aui-table for full usage.
-    description: Used within aui-table structure.
+  - description: Header row with three columns
+    html: |
+      <aui-table cols="1fr 1fr auto">
+        <aui-table-header>
+          <aui-table-cell>Name</aui-table-cell>
+          <aui-table-cell>Email</aui-table-cell>
+          <aui-table-cell>Status</aui-table-cell>
+        </aui-table-header>
+        <aui-table-row>
+          <aui-table-cell>Alice</aui-table-cell>
+          <aui-table-cell>alice@example.com</aui-table-cell>
+          <aui-table-cell>Active</aui-table-cell>
+        </aui-table-row>
+      </aui-table>

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

@@ -0,0 +1,106 @@
+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.
+base: AgentElement
+attributes:
+  label:
+    syntax: key-value
+    type: string
+    default: ""
+    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: block
+  accepts:
+    - aui-chip
+  required: true
+  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:
+  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:
+  - 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>
+
+      <!-- ===============================================================
+           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>
+
+      <!-- ===============================================================
+           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>
+
+      <!-- ===============================================================
+           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.
+  - Multi-select displays.
+  - Email recipient lists (To field chips).
+  - Category / label management.

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>