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

package/dist/docs/components/sparkline.yaml

@@ -0,0 +1,71 @@
+name: aui-sparkline
+tag: aui-sparkline
+type: component
+summary: Inline bar sparkline with configurable highlight and color.
+description: |
+  A compact bar chart rendered as a row of flex-aligned divs. Values are passed as a comma-separated string and normalized against the maximum. Each bar is stamped by JS with a percentage height and chart color. The highlight attribute controls which bar is shown at full opacity — "last" (default), "max", or "none".
+base: AgentElement
+attributes:
+  values:
+    syntax: key-value
+    type: string
+    default: ""
+    description: |
+      Comma-separated numeric values. Each value becomes one bar whose height is proportional to the maximum value.
+  color:
+    syntax: key-value
+    type: string
+    default: "1"
+    description: |
+      Chart color index (1–8). Maps to --aui-chart-{n} token.
+  highlight:
+    syntax: key-value
+    type: string
+    default: last
+    values:
+      - last
+      - max
+      - none
+    description: |
+      Which bar to render at full opacity. "last" highlights the final bar, "max" highlights the tallest bar, "none" shows all bars at full opacity.
+content:
+  model: empty
+  accepts: []
+  required: false
+  description: |
+    No child content. Bars are stamped by JS from the values attribute.
+tokens:
+  - name: --aui-sparkline-height
+    default: 2rem
+    description: Overall height of the sparkline container.
+  - name: --aui-sparkline-gap
+    default: calc(var(--aui-space) * 1)
+    description: Gap between adjacent bars.
+  - name: --aui-sparkline-bar-radius
+    default: var(--aui-radius)
+    description: Corner radius of each bar.
+a11y:
+  role: img
+  aria:
+    aria-label: Derived from values attribute for screen readers.
+use-cases:
+  - Inline trend indicator in table cells.
+  - Dashboard metric sparkline beside a stat card.
+  - Activity or usage micro-chart.
+examples:
+  - description: Default sparkline with last bar highlighted
+    html: <aui-sparkline values="40,55,35,70,60,80,95"></aui-sparkline>
+  - description: Upward trend
+    html: <aui-sparkline values="20,30,35,45,55,70,90"></aui-sparkline>
+  - description: Flat with spike
+    html: <aui-sparkline values="40,42,38,41,40,85,43"></aui-sparkline>
+  - description: Max bar highlighted, color 2
+    html: <aui-sparkline values="60,45,55,50,70,65,85" highlight="max" color="2"></aui-sparkline>
+  - description: No highlight — all bars full opacity, color 3
+    html: <aui-sparkline values="30,50,40,60,55,45,50" highlight="none" color="3"></aui-sparkline>
+  - description: Color 4
+    html: <aui-sparkline values="50,60,45,70,80,65,75" color="4"></aui-sparkline>
+  - description: Color 5 with max highlight
+    html: <aui-sparkline values="35,55,65,40,80,60,70" highlight="max" color="5"></aui-sparkline>
+  - description: Color 6 with many values
+    html: <aui-sparkline values="20,35,50,45,60,55,70,65,80,75,90,85,95" color="6"></aui-sparkline>

package/dist/docs/components/spinner.yaml

@@ -0,0 +1,74 @@
+name: aui-spinner
+tag: aui-spinner
+type: component
+summary: Animated loading indicator.
+description: |
+  CSS-only spinning ring indicator for inline and block-level loading states. Border-based animation with configurable size and intent coloring. Uses currentColor by default so it inherits text color from its parent.
+base: AgentElement
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: md
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+    description: Diameter of the spinner ring. xs=1rem, sm=1.25rem, md=1.5rem, lg=2rem.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: false
+    default: null
+    values:
+      - accent
+      - success
+      - warning
+      - danger
+    description: Color of the spinning ring segment.
+content:
+  model: empty
+  accepts: []
+  required: false
+  description: |
+    No content — spinner is a visual indicator only.
+slots: {}
+tokens:
+  sizing:
+    - --aui-spinner-size
+    - --aui-spinner-border-width
+  color:
+    - --aui-spinner-track
+    - --aui-spinner-fill
+examples:
+  - description: Default medium spinner
+    html: <aui-spinner></aui-spinner>
+  - description: All four sizes side by side
+    html: |-
+      <aui-stack direction="row" gap="3" align-items="center">
+        <aui-spinner size="xs"></aui-spinner>
+        <aui-spinner size="sm"></aui-spinner>
+        <aui-spinner></aui-spinner>
+        <aui-spinner size="lg"></aui-spinner>
+      </aui-stack>
+  - description: Intent color variants
+    html: |-
+      <aui-stack direction="row" gap="3" align-items="center">
+        <aui-spinner></aui-spinner>
+        <aui-spinner success></aui-spinner>
+        <aui-spinner warning></aui-spinner>
+        <aui-spinner danger></aui-spinner>
+      </aui-stack>
+  - description: Inline spinner with loading text
+    html: |-
+      <aui-stack direction="row" gap="2" align-items="center">
+        <aui-spinner size="xs"></aui-spinner>
+        <aui-text size="sm">Loading...</aui-text>
+      </aui-stack>
+  - description: Centered spinner in an empty state
+    html: |-
+      <aui-content padding="6" style="display: grid; place-items: center; min-height: 120px;">
+        <aui-spinner size="lg"></aui-spinner>
+      </aui-content>

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/step.yaml

@@ -0,0 +1,91 @@
+name: aui-step
+tag: aui-step
+type: component
+summary: Individual step within a stepper, with state-driven connector colors.
+description: >
+  A single step inside an aui-stepper. Renders as a flex row with a
+  connector line drawn via ::before to the next sibling. State attributes
+  control the connector color.
+
+base: AgentElement
+
+# ── Modifiers ────────────────────────────────────────────
+
+modifiers:
+  completed:
+    syntax: boolean
+    description: >
+      Step is completed. Colors the connector green (success).
+
+  active:
+    syntax: boolean
+    description: >
+      Step is currently active. Colors the connector with accent.
+
+  error:
+    syntax: boolean
+    description: >
+      Step has an error. Colors the connector red (danger).
+
+# ── Attributes ───────────────────────────────────────────
+
+attributes:
+  state:
+    syntax: key-value
+    type: enum
+    values: [done, running]
+    default: null
+    description: >
+      Legacy step state. "done" maps to completed, "running" maps to active.
+
+# ── Content model ─────────────────────────────────────────
+
+content:
+  model: block
+  accepts: [aui-badge, aui-icon, aui-text, aui-heading, aui-stack]
+  required: true
+  description: >
+    Step content. Typically starts with a visual indicator (badge
+    or icon) followed by a label or description.
+
+# ── Slots ─────────────────────────────────────────────────
+
+slots:
+  default:
+    accepts: [aui-badge, aui-icon, aui-text, aui-heading, aui-stack]
+    required: true
+    description: Step indicator and content.
+
+# ── CSS tokens consumed ──────────────────────────────────
+
+tokens:
+  sizing:
+    - --aui-step-gap
+    - --aui-step-connector-width
+    - --aui-step-connector-offset
+  color:
+    - --aui-step-connector-color
+
+# ── Examples ──────────────────────────────────────────────
+
+examples:
+  - html: |
+      <aui-step completed>
+        <aui-badge success>1</aui-badge>
+        <aui-text>Account created</aui-text>
+      </aui-step>
+    description: Completed step with success badge.
+
+  - html: |
+      <aui-step active>
+        <aui-badge accent>2</aui-badge>
+        <aui-text>In progress</aui-text>
+      </aui-step>
+    description: Active step with accent badge.
+
+  - html: |
+      <aui-step>
+        <aui-badge>3</aui-badge>
+        <aui-text>Pending</aui-text>
+      </aui-step>
+    description: Pending step with neutral badge.

package/dist/docs/components/stepper.yaml

@@ -0,0 +1,84 @@
+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.
+base: AgentElement
+content:
+  model: block
+  accepts:
+    - aui-step
+  required: true
+  description: |
+    Contains one or more aui-step children. Each step draws a connector line to the next sibling.
+slots:
+  default:
+    accepts:
+      - aui-step
+    required: true
+    description: Step children.
+tokens:
+  sizing:
+    - --aui-stepper-gap
+    - --aui-stepper-connector-width
+  color:
+    - --aui-stepper-connector-color
+examples:
+  - description: Vertical stepper with done, running, and pending steps
+    html: |-
+      <aui-stepper>
+        <aui-step state="done">
+          <aui-badge success>1</aui-badge>
+          <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-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-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: All steps completed
+    html: |-
+      <aui-stepper>
+        <aui-step completed>
+          <aui-badge success>1</aui-badge>
+          <aui-text weight="medium">Order placed</aui-text>
+        </aui-step>
+        <aui-step completed>
+          <aui-badge success>2</aui-badge>
+          <aui-text weight="medium">Payment confirmed</aui-text>
+        </aui-step>
+        <aui-step completed>
+          <aui-badge success>3</aui-badge>
+          <aui-text weight="medium">Shipped</aui-text>
+        </aui-step>
+      </aui-stepper>
+  - description: Stepper with error state
+    html: |-
+      <aui-stepper>
+        <aui-step completed>
+          <aui-badge success>1</aui-badge>
+          <aui-text>Build</aui-text>
+        </aui-step>
+        <aui-step error>
+          <aui-badge danger>2</aui-badge>
+          <aui-text>Deploy</aui-text>
+        </aui-step>
+        <aui-step>
+          <aui-badge>3</aui-badge>
+          <aui-text>Verify</aui-text>
+        </aui-step>
+      </aui-stepper>

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.