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

package/dist/docs/components/stack.yaml

@@ -0,0 +1,126 @@
+name: aui-stack
+tag: aui-stack
+type: element
+summary: Flex column or row layout container.
+description: |
+  The primary layout primitive. Arranges children in a column (default) or row. Default gap is direction-dependent: column (default) uses gap 6, row (direction="row") uses gap 4. An explicit gap="N" attribute overrides both defaults. Accepts layout utility attributes for alignment and wrapping.
+presentational:
+  density:
+    syntax: key-value
+    attribute: density
+    cascades: true
+    default: regular
+    values:
+      - compact
+      - spacious
+    description: |
+      Controls gap and spacing compression for the stack and all descendants.
+attributes:
+  direction:
+    syntax: key-value
+    type: enum
+    values:
+      - row
+      - row-reverse
+      - column-reverse
+    default: null
+    description: |
+      Flex direction. Column is the default — no attribute needed. Set direction="row" for horizontal layout.
+modifiers:
+  wrap:
+    syntax: boolean
+    description: Enables flex-wrap for wrapping children when they overflow.
+layout:
+  alignment:
+    syntax: key-value
+    attribute: align-items
+    values:
+      - start
+      - center
+      - end
+      - stretch
+      - baseline
+    description: |
+      Controls cross-axis alignment (align-items). Apply one value.
+  justification:
+    syntax: key-value
+    attribute: justify-content
+    values:
+      - start
+      - center
+      - end
+      - between
+      - around
+      - evenly
+    description: |
+      Controls main-axis distribution (justify-content). Apply one value.
+  gap:
+    syntax: key-value
+    attribute: gap
+    values:
+      - "0"
+      - "1"
+      - "2"
+      - "3"
+      - "4"
+      - "5"
+      - "6"
+      - "7"
+    description: |
+      Explicit gap size (0–7 space units). Overrides the direction-dependent defaults (6 for column, 4 for row).
+content:
+  model: block
+  accepts: any
+  required: true
+  min-children: 1
+  description: |
+    Any block or inline elements. Stack is the general-purpose layout container — it accepts everything.
+slots:
+  default:
+    accepts:
+      - any
+    required: true
+    description: Stack children. Order in DOM = visual order.
+composition:
+  parents:
+    - aui-stack
+    - aui-grid
+    - aui-content
+    - aui-inset
+    - div
+    - section
+    - main
+    - form
+  children: any
+  context: |
+    The most-used layout element. Use for vertical lists, horizontal button groups, form layouts, card content. Nesting stacks is the standard pattern for complex layouts. Use direction="row" for horizontal arrangements, no attribute for vertical.
+tokens:
+  spacing:
+    - --aui-pad-gap-container
+examples:
+  - description: Default column stack
+    html: |-
+      <aui-stack>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </aui-stack>
+  - description: Horizontal row stack
+    html: |-
+      <aui-stack direction="row">
+        <div>Left</div>
+        <div>Right</div>
+      </aui-stack>
+  - description: Wrapping row of badges
+    html: |-
+      <aui-stack direction="row" wrap>
+        <aui-badge accent>Tag 1</aui-badge>
+        <aui-badge info>Tag 2</aui-badge>
+        <aui-badge success>Tag 3</aui-badge>
+      </aui-stack>
+  - description: Row with space-between alignment
+    html: |-
+      <aui-stack direction="row" justify-content="between" align-items="center">
+        <span>Start</span>
+        <span>End</span>
+      </aui-stack>

package/dist/docs/components/stepper.yaml

@@ -2,78 +2,72 @@ name: aui-stepper
 tag: aui-stepper
 type: component
 summary: Multi-step progress container with connector lines.
-description: >
-  Vertical step sequence container. Each child aui-step draws
-  a connector line to the next step. CSS-only element with no
-  JS behavior beyond extending AgentElement.
-
+description: |
+  Vertical step sequence container. Each child aui-step draws a connector line to the next step. CSS-only element with no JS behavior beyond extending AgentElement.
 base: AgentElement
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: block
-  accepts: [aui-step]
+  accepts:
+    - aui-step
   required: true
-  description: >
-    Contains one or more aui-step children. Each step draws
-    a connector line to the next sibling.
-
-# ── Slots ─────────────────────────────────────────────────
-
+  description: |
+    Contains one or more aui-step children. Each step draws a connector line to the next sibling.
 slots:
   default:
-    accepts: [aui-step]
+    accepts:
+      - aui-step
     required: true
     description: Step children.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   sizing:
     - --aui-stepper-gap
     - --aui-stepper-connector-width
   color:
     - --aui-stepper-connector-color
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: |
+  - description: Vertical stepper with done, running, and pending steps
+    html: |-
       <aui-stepper>
         <aui-step state="done">
           <aui-badge success>1</aui-badge>
-          <aui-text>Account created</aui-text>
+          <aui-stack gap="1">
+            <aui-text weight="medium">Account created</aui-text>
+            <aui-text muted size="xs">Email verified</aui-text>
+          </aui-stack>
         </aui-step>
         <aui-step state="running">
           <aui-badge accent>2</aui-badge>
-          <aui-text>Profile setup</aui-text>
+          <aui-stack gap="1">
+            <aui-text weight="medium">Profile setup</aui-text>
+            <aui-text muted size="xs">Add your details</aui-text>
+          </aui-stack>
         </aui-step>
         <aui-step>
           <aui-badge>3</aui-badge>
-          <aui-text>Complete</aui-text>
+          <aui-stack gap="1">
+            <aui-text weight="medium">Complete</aui-text>
+            <aui-text muted size="xs">Ready to go</aui-text>
+          </aui-stack>
         </aui-step>
       </aui-stepper>
-    description: Vertical stepper with done, running, and pending steps.
-
-  - html: |
+  - description: All steps completed
+    html: |-
       <aui-stepper>
         <aui-step completed>
           <aui-badge success>1</aui-badge>
-          <aui-text>Order placed</aui-text>
+          <aui-text weight="medium">Order placed</aui-text>
         </aui-step>
         <aui-step completed>
           <aui-badge success>2</aui-badge>
-          <aui-text>Payment confirmed</aui-text>
+          <aui-text weight="medium">Payment confirmed</aui-text>
         </aui-step>
-        <aui-step active>
-          <aui-badge accent>3</aui-badge>
-          <aui-text>Shipping</aui-text>
+        <aui-step completed>
+          <aui-badge success>3</aui-badge>
+          <aui-text weight="medium">Shipped</aui-text>
         </aui-step>
       </aui-stepper>
-    description: Stepper with completed and active steps.
-
-  - html: |
+  - description: Stepper with error state
+    html: |-
       <aui-stepper>
         <aui-step completed>
           <aui-badge success>1</aui-badge>
@@ -88,4 +82,3 @@ examples:
           <aui-text>Verify</aui-text>
         </aui-step>
       </aui-stepper>
-    description: Stepper with an error state step.

package/dist/docs/components/switch.yaml

@@ -2,80 +2,76 @@ name: aui-switch
 tag: aui-switch
 type: component
 summary: Toggle switch with track and sliding thumb.
-description: >
-  Binary toggle rendered as an iOS-style wide track with a pill-shaped
-  sliding thumb. Hidden native checkbox for form participation. Label
-  rendered via CSS ::after { content: attr(label) } — JS only sets
-  aria-label for accessibility, no DOM stamping for the visible label.
-  Animated transitions use offset timing (thumb moves before track
-  fill). Press animation stretches the thumb wider on :active.
-
+description: |
+  Binary toggle rendered as an iOS-style wide track with a pill-shaped sliding thumb. Hidden native checkbox for form participation. Label rendered via CSS ::after { content: attr(label) } — JS only sets aria-label for accessibility, no DOM stamping for the visible label. Animated transitions use offset timing (thumb moves before track fill). Press animation stretches the thumb wider on :active.
 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 track and thumb dimensions.
-
   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 the checked track fill.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   checked:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the switch is on.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Label text displayed next to the switch.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form submission name.
-
   value:
     syntax: key-value
     type: string
-    default: "on"
+    default: on
     description: Form submission value when checked.
-
 content:
   model: inline
-  accepts: [input]
+  accepts:
+    - input
   required: false
-  description: >
-    Auto-stamps hidden input for form participation. Label is
-    rendered purely via CSS ::after on :scope — no stamped span.
-
+  description: |
+    Auto-stamps hidden input for form participation. Label is rendered purely via CSS ::after on :scope — no stamped span.
 composition:
-  parents: [aui-field, aui-stack, form, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Use for on/off toggles in settings panels. Place inside
-    aui-field for labeled form switches, or standalone with
-    the label attribute.
-
+  context: |
+    Use for on/off toggles in settings panels. Place inside aui-field for labeled form switches, or standalone with the label attribute.
 a11y:
   role: switch
   keyboard:
@@ -84,11 +80,9 @@ a11y:
   aria:
     aria-checked: Mirrors checked attribute.
     aria-disabled: Mirrors disabled attribute.
-
 events:
   change:
     description: Fires when checked state changes.
-
 tokens:
   - name: --aui-switch-gap
     default: calc(var(--aui-space) * 2)
@@ -138,24 +132,19 @@ tokens:
   - name: --aui-switch-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Track border when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [checked], [disabled] — visual state via attributes"
-    - "::before on [data-track] for thumb — pure CSS sliding"
+    - ::before on [data-track] for thumb — pure CSS sliding
     - "CG3: ::after { content: attr(label) } — label rendered in CSS, no JS-stamped [data-label]"
-    - ":active thumb stretches wider (press animation)"
+    - :active thumb stretches wider (press animation)
     - "Offset timing: thumb translate transitions before track fill color"
-
 examples:
-  - html: <aui-switch label="Notifications"></aui-switch>
-    description: Default off switch.
-
-  - html: <aui-switch label="Dark mode" checked></aui-switch>
-    description: Pre-enabled switch.
-
-  - html: <aui-switch label="Locked" disabled></aui-switch>
-    description: Disabled switch.
-
-  - html: <aui-switch label="Active" checked accent></aui-switch>
-    description: Accent-colored enabled switch.
+  - description: Default off switch
+    html: <aui-switch label="Notifications"></aui-switch>
+  - description: Pre-enabled switch
+    html: <aui-switch label="Dark mode" checked></aui-switch>
+  - description: Disabled switch
+    html: <aui-switch label="Locked" disabled></aui-switch>
+  - description: Accent-colored enabled switch
+    html: <aui-switch label="Active" checked accent></aui-switch>

package/dist/docs/components/tab-panel.yaml

@@ -2,40 +2,49 @@ name: aui-tab-panel
 tag: aui-tab-panel
 type: component
 summary: Content panel associated with a tab.
-description: >
-  Shown when the matching tab is selected, hidden otherwise.
-  The parent aui-tabs coordinates visibility.
-
+description: |
+  Shown when the matching tab is selected, hidden otherwise. The parent aui-tabs coordinates visibility.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Panel identifier, matched against aui-tab value.
-
   active:
     syntax: boolean
     type: boolean
     default: false
     description: Whether this panel is currently visible.
-
 a11y:
   role: tabpanel
   aria:
     aria-hidden: true when not active.
-
 composition:
-  parents: [aui-tabs]
-  children: [any]
-
+  parents:
+    - aui-tabs
+  children:
+    - any
 examples:
-  - html: |
-      <aui-tabs value="overview">
-        <aui-tab value="overview">Overview</aui-tab>
-        <aui-tab value="details">Details</aui-tab>
-        <aui-tab-panel value="overview">Overview panel with content.</aui-tab-panel>
-        <aui-tab-panel value="details">Details panel with more content.</aui-tab-panel>
+  - description: Tab panels with rich content
+    html: |-
+      <aui-tabs value="info">
+        <aui-tab value="info">Info</aui-tab>
+        <aui-tab value="stats">Stats</aui-tab>
+        <aui-tab value="logs">Logs</aui-tab>
+        <aui-tab-panel value="info">
+          <aui-stack gap="sm">
+            <aui-text size="lg" weight="medium">System Information</aui-text>
+            <aui-text>Running on version 3.2.1 with all services operational.</aui-text>
+          </aui-stack>
+        </aui-tab-panel>
+        <aui-tab-panel value="stats">
+          <aui-stack gap="sm">
+            <aui-text size="lg" weight="medium">Usage Statistics</aui-text>
+            <aui-text>CPU: 42% | Memory: 68% | Disk: 31%</aui-text>
+          </aui-stack>
+        </aui-tab-panel>
+        <aui-tab-panel value="logs">
+          <aui-text>No recent log entries.</aui-text>
+        </aui-tab-panel>
       </aui-tabs>
-    description: Tab panels shown within a full tabs context.

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>