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

package/dist/docs/components/panes.yaml

@@ -2,34 +2,29 @@ name: aui-panes
 tag: aui-panes
 type: component
 summary: Resizable split layout with pointer-proximity resize.
-description: >
-  Split-pane container with VS Code-style cascade resize. No handle elements —
-  resize boundaries are detected by pointer proximity (8px threshold) and
-  visualized with an accent bar. Supports priority-based size distribution,
-  min/max constraints, and proportional container resize.
-
+description: |
+  Split-pane container with VS Code-style cascade resize. No handle elements — resize boundaries are detected by pointer proximity (8px threshold) and visualized with an accent bar. Supports priority-based size distribution, min/max constraints, and proportional container resize.
 base: AgentElement
-
 attributes:
   direction:
     syntax: key-value
     type: enum
-    values: [vertical]
+    values:
+      - vertical
     default: ""
-    description: >
-      Layout direction. Default is horizontal (row). Set to "vertical"
-      for top/bottom stacking.
-
+    description: |
+      Layout direction. Default is horizontal (row). Set to "vertical" for top/bottom stacking.
 composition:
-  parents: [any]
-  children: [aui-pane, aui-panes]
-  context: >
-    Direct children should be aui-pane elements. Nested aui-panes are
-    supported for complex layouts. No gripper elements needed — resize
-    is handled by pointer proximity detection.
-
+  parents:
+    - any
+  children:
+    - aui-pane
+    - aui-panes
+  context: |
+    Direct children should be aui-pane elements. Nested aui-panes are supported for complex layouts. No gripper elements needed — resize is handled by pointer proximity detection.
 examples:
-  - html: |
+  - description: Horizontal split — hover between panes to see resize handle
+    html: |-
       <aui-panes style="height: 16rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-pane label="Sidebar" basis="12rem" size="xs" density="compact">
           <aui-stack gap="1" padding="2">
@@ -43,9 +38,8 @@ examples:
           </aui-stack>
         </aui-pane>
       </aui-panes>
-    description: Horizontal split — hover between panes to see resize handle.
-
-  - html: |
+  - description: Vertical split with minimizable bottom pane
+    html: |-
       <aui-panes direction="vertical" style="height: 20rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-pane label="Editor" size="xs" density="compact">
           <aui-stack padding="2">
@@ -58,9 +52,8 @@ examples:
           </aui-stack>
         </aui-pane>
       </aui-panes>
-    description: Vertical split with minimizable bottom pane.
-
-  - html: |
+  - description: Three-pane layout with resize priority
+    html: |-
       <aui-panes style="height: 18rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-pane label="Files" basis="10rem" priority="low" size="xs" density="compact">
           <aui-stack gap="1" padding="2">
@@ -79,4 +72,3 @@ examples:
           </aui-stack>
         </aui-pane>
       </aui-panes>
-    description: Three-pane layout with resize priority.

package/dist/docs/components/progress-circle.yaml

@@ -0,0 +1,114 @@
+name: aui-progress-circle
+tag: aui-progress-circle
+type: component
+summary: Circular SVG ring progress indicator with value, size, and intent variants.
+description: |
+  Circular progress ring rendered as an SVG arc. The value attribute (0-100) is clamped by JS and mapped to stroke-dasharray via the --aui-progress-circle-value custom property. Supports optional center label text, size variants, and intent colors.
+base: AgentElement
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: default
+    values:
+      - sm
+      - lg
+    description: |
+      Controls the ring diameter. Default is 48px. sm = 32px, lg = 64px.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: false
+    default: accent
+    values:
+      - success
+      - warning
+      - danger
+    description: |
+      Color family for the fill stroke. Default uses the accent color.
+attributes:
+  value:
+    syntax: key-value
+    type: string
+    default: "0"
+    description: |
+      Progress percentage (0-100). Clamped by JS and set as --aui-progress-circle-value for the CSS stroke-dasharray calculation.
+  label:
+    syntax: key-value
+    type: string
+    default: ""
+    description: |
+      Center text displayed over the ring (e.g. "75%").
+content:
+  model: empty
+  accepts: []
+  required: false
+  description: |
+    No child content. The SVG ring and label are stamped by JS.
+tokens:
+  - name: --aui-progress-circle-value
+    default: "0"
+    description: Fill percentage set by JS. Drives stroke-dasharray.
+a11y:
+  role: progressbar
+  aria:
+    aria-valuenow: Set from value attribute.
+    aria-valuemin: "0"
+    aria-valuemax: "100"
+use-cases:
+  - Usage/billing panels (storage, API quota rings).
+  - Dashboard KPI cards with circular metrics.
+  - Upload progress indicators.
+  - Profile completion rings.
+  - Plan limit indicators.
+examples:
+  - description: Default progress circle at 75%
+    html: <aui-progress-circle value="75"></aui-progress-circle>
+  - description: Half-way progress
+    html: <aui-progress-circle value="50"></aui-progress-circle>
+  - description: Nearly complete
+    html: |-
+      <aui-progress-circle value="85"></aui-progress-circle>
+
+      <!-- ===============================================================
+           WITH LABEL
+           =============================================================== -->
+  - description: Circle with center label
+    html: <aui-progress-circle value="75" label="75%"></aui-progress-circle>
+  - description: Another labeled circle
+    html: |-
+      <aui-progress-circle value="42" label="42%"></aui-progress-circle>
+
+      <!-- ===============================================================
+           SIZE VARIANTS
+           =============================================================== -->
+  - description: Small size
+    html: <aui-progress-circle value="65" size="sm"></aui-progress-circle>
+  - description: Default size with label
+    html: <aui-progress-circle value="65" label="65%"></aui-progress-circle>
+  - description: Large size with label
+    html: |-
+      <aui-progress-circle value="65" size="lg" label="65%"></aui-progress-circle>
+
+      <!-- ===============================================================
+           INTENT VARIANTS
+           =============================================================== -->
+  - description: Warning intent at 90%
+    html: <aui-progress-circle value="90" warning label="90%"></aui-progress-circle>
+  - description: Danger intent at 95%
+    html: <aui-progress-circle value="95" danger label="95%"></aui-progress-circle>
+  - description: Success intent at 100%
+    html: |-
+      <aui-progress-circle value="100" success label="100%"></aui-progress-circle>
+
+      <!-- ===============================================================
+           GROUP -- row of progress circles
+           =============================================================== -->
+  - description: Row of metric circles
+    html: |-
+      <aui-stack direction="row" gap="4">
+        <aui-progress-circle value="72" label="CPU"></aui-progress-circle>
+        <aui-progress-circle value="45" success label="RAM"></aui-progress-circle>
+        <aui-progress-circle value="89" warning label="Disk"></aui-progress-circle>
+      </aui-stack>

package/dist/docs/components/progress.yaml

@@ -0,0 +1,88 @@
+name: aui-progress
+tag: aui-progress
+type: component
+summary: Horizontal progress bar with value, size, and intent variants.
+description: |
+  A simple horizontal progress indicator. The fill width is driven by the value attribute (0–100), which JS clamps and maps to the --aui-progress-value custom property. The bar itself is rendered via a CSS ::after pseudo-element — no inner DOM required. Size and intent variants control height and fill color respectively.
+base: AgentElement
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: default
+    values:
+      - sm
+      - lg
+    description: |
+      Controls the bar height. Default is 4px. sm = 2px, lg = 6px.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: false
+    default: neutral
+    values:
+      - success
+      - warning
+      - danger
+      - info
+    description: |
+      Color family for the fill bar. Default uses the accent color.
+attributes:
+  value:
+    syntax: key-value
+    type: string
+    default: "0"
+    description: |
+      Progress percentage (0–100). Clamped by JS and set as --aui-progress-value for the CSS width calculation.
+content:
+  model: empty
+  accepts: []
+  required: false
+  description: |
+    No child content. The bar is rendered entirely via CSS ::after.
+tokens:
+  - name: --aui-progress-height
+    default: 4px
+    description: Bar height. Overridden by size attribute.
+  - name: --aui-progress-border-radius
+    default: 2px
+    description: Corner radius for both track and fill.
+  - name: --aui-progress-background
+    default: var(--aui-control)
+    description: Track background color.
+  - name: --aui-progress-fill
+    default: var(--aui-accent)
+    description: Fill bar color. Overridden by intent attributes.
+a11y:
+  role: progressbar
+  aria:
+    aria-valuenow: Set from value attribute.
+    aria-valuemin: "0"
+    aria-valuemax: "100"
+use-cases:
+  - Upload or download progress indicator.
+  - Step completion percentage in onboarding flows.
+  - Resource usage bar (storage, quota, CPU).
+  - Form completion meter.
+examples:
+  - description: Default progress bar
+    html: <aui-progress value="40"></aui-progress>
+  - description: Half-way progress
+    html: <aui-progress value="50"></aui-progress>
+  - description: Nearly complete
+    html: <aui-progress value="85"></aui-progress>
+  - description: Small size
+    html: <aui-progress value="65" size="sm"></aui-progress>
+  - description: Large size
+    html: <aui-progress value="65" size="lg"></aui-progress>
+  - description: Small size with success intent
+    html: <aui-progress value="90" size="sm" success></aui-progress>
+  - description: Large size with warning at 60%
+    html: <aui-progress value="60" size="lg" warning></aui-progress>
+  - description: Danger at high usage
+    html: <aui-progress value="95" danger></aui-progress>
+  - description: Info intent
+    html: <aui-progress value="45" info></aui-progress>
+  - description: Complete with success
+    html: <aui-progress value="100" success></aui-progress>

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

@@ -2,67 +2,69 @@ name: aui-radio-group
 tag: aui-radio-group
 type: component
 summary: Container that coordinates radio button selection.
-description: >
-  Wraps aui-radio children and manages single-selection, name
-  propagation, and arrow-key navigation. Set value to pre-select
-  an option.
-
+description: |
+  Wraps aui-radio children and manages single-selection, name propagation, and arrow-key navigation. Set value to pre-select an option.
 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: Cascades size to all child radios.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Cascades color family to all child radios.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Disables all child radios.
-
   name:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       Form group name. Propagated to all child aui-radio elements.
-
   value:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Currently selected value. Setting this checks the matching
-      child radio and unchecks others.
-
+    description: |
+      Currently selected value. Setting this checks the matching child radio and unchecks others.
 content:
   model: block
-  accepts: [aui-radio]
+  accepts:
+    - aui-radio
   required: true
   min-children: 2
   description: Two or more aui-radio children.
-
 composition:
-  parents: [aui-field, aui-stack, form, div]
-  children: [aui-radio]
-  context: >
-    Use inside aui-field for labeled radio groups. The group
-    handles keyboard navigation (arrow keys cycle through options)
-    and single-selection enforcement.
-
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
+  children:
+    - aui-radio
+  context: |
+    Use inside aui-field for labeled radio groups. The group handles keyboard navigation (arrow keys cycle through options) and single-selection enforcement.
 a11y:
   role: radiogroup
   keyboard:
@@ -70,27 +72,23 @@ a11y:
     ArrowRight: Select next radio.
     ArrowUp: Select previous radio.
     ArrowLeft: Select previous radio.
-
 events:
   change:
-    description: >
-      Bubbles from the selected child radio. Read the group's
-      value attribute for the current selection.
-
+    description: |
+      Bubbles from the selected child radio. Read the group's value attribute for the current selection.
 tokens:
   spacing:
     - --aui-space
-
 examples:
-  - html: |
+  - description: Radio group with pre-selected value
+    html: |-
       <aui-radio-group name="size" value="md">
         <aui-radio label="Small" value="sm"></aui-radio>
         <aui-radio label="Medium" value="md"></aui-radio>
         <aui-radio label="Large" value="lg"></aui-radio>
       </aui-radio-group>
-    description: Radio group with pre-selected value.
-
-  - html: |
+  - description: Radio group inside a labeled field
+    html: |-
       <aui-field label="Plan">
         <aui-radio-group name="plan">
           <aui-radio label="Free" value="free"></aui-radio>
@@ -98,11 +96,72 @@ examples:
           <aui-radio label="Enterprise" value="enterprise"></aui-radio>
         </aui-radio-group>
       </aui-field>
-    description: Radio group inside a labeled field.
-
-  - html: |
+  - description: Disabled radio group
+    html: |-
       <aui-radio-group name="status" disabled>
         <aui-radio label="Active" value="active"></aui-radio>
         <aui-radio label="Inactive" value="inactive"></aui-radio>
       </aui-radio-group>
-    description: Disabled radio group.
+  - description: Horizontal radio group (4 options, pre-selected)
+    html: |-
+      <aui-radio-group name="color" value="blue" style="flex-direction: row">
+        <aui-radio label="Red" value="red"></aui-radio>
+        <aui-radio label="Blue" value="blue"></aui-radio>
+        <aui-radio label="Green" value="green"></aui-radio>
+        <aui-radio label="Yellow" value="yellow"></aui-radio>
+      </aui-radio-group>
+  - description: Vertical radio group with 5 options
+    html: |-
+      <aui-radio-group name="priority" value="medium">
+        <aui-radio label="Critical" value="critical"></aui-radio>
+        <aui-radio label="High" value="high"></aui-radio>
+        <aui-radio label="Medium" value="medium"></aui-radio>
+        <aui-radio label="Low" value="low"></aui-radio>
+        <aui-radio label="None" value="none"></aui-radio>
+      </aui-radio-group>
+  - description: Radio group with individually disabled option
+    html: |-
+      <aui-radio-group name="tier" value="pro">
+        <aui-radio label="Free" value="free"></aui-radio>
+        <aui-radio label="Pro" value="pro"></aui-radio>
+        <aui-radio label="Enterprise" value="enterprise" disabled></aui-radio>
+      </aui-radio-group>
+  - description: Accent intent radio group
+    html: |-
+      <aui-radio-group name="theme" value="dark" accent>
+        <aui-radio label="Light" value="light"></aui-radio>
+        <aui-radio label="Dark" value="dark"></aui-radio>
+        <aui-radio label="System" value="system"></aui-radio>
+      </aui-radio-group>
+  - description: Danger intent radio group
+    html: |-
+      <aui-radio-group name="action" danger>
+        <aui-radio label="Keep data" value="keep"></aui-radio>
+        <aui-radio label="Delete everything" value="delete"></aui-radio>
+      </aui-radio-group>
+  - description: Small size radio group
+    html: |-
+      <aui-radio-group name="density" value="default" size="sm">
+        <aui-radio label="Compact" value="compact"></aui-radio>
+        <aui-radio label="Default" value="default"></aui-radio>
+        <aui-radio label="Comfortable" value="comfortable"></aui-radio>
+      </aui-radio-group>
+  - description: Radio group inside aui-field with label
+    html: |-
+      <aui-field label="Notification preference">
+        <aui-radio-group name="notifications" value="email">
+          <aui-radio label="Email" value="email"></aui-radio>
+          <aui-radio label="SMS" value="sms"></aui-radio>
+          <aui-radio label="Push notification" value="push"></aui-radio>
+          <aui-radio label="None" value="none"></aui-radio>
+        </aui-radio-group>
+      </aui-field>
+  - description: Horizontal radio group inside aui-field
+    html: |-
+      <aui-field label="Layout direction">
+        <aui-radio-group name="direction" value="ltr" style="flex-direction: row">
+          <aui-radio label="LTR" value="ltr"></aui-radio>
+          <aui-radio label="RTL" value="rtl"></aui-radio>
+          <aui-radio label="Auto" value="auto"></aui-radio>
+        </aui-radio-group>
+      </aui-field>

package/dist/docs/components/radio.yaml

@@ -2,89 +2,86 @@ name: aui-radio
 tag: aui-radio
 type: component
 summary: Radio button with custom circle indicator.
-description: >
-  Custom radio button. Hidden native input for form participation.
-  Visual circle with dot indicator via ::before. Label rendered via
-  CSS ::after { content: attr(label) } — JS only sets aria-label
-  for accessibility, no DOM stamping for the visible label. Use
-  inside aui-radio-group for coordinated single-selection.
-
+description: |
+  Custom radio button. Hidden native input for form participation. Visual circle with dot indicator via ::before. Label rendered via CSS ::after { content: attr(label) } — JS only sets aria-label for accessibility, no DOM stamping for the visible label. Use inside aui-radio-group for coordinated single-selection.
 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 radio and label size.
-
   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 selected state.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   checked:
     syntax: boolean
     type: boolean
     default: false
     description: Whether this radio is selected.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks as required for form validation.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Label text next to the radio.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form group name. Usually set by parent aui-radio-group.
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Form submission value for this option.
-
 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-radio-group, aui-field, aui-stack, form, div]
+  parents:
+    - aui-radio-group
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Almost always used inside aui-radio-group which handles
-    name propagation, single-selection, and keyboard navigation.
-
+  context: |
+    Almost always used inside aui-radio-group which handles name propagation, single-selection, and keyboard navigation.
 constraints:
   - when: standalone (no aui-radio-group parent)
     require: name attribute
     reason: Radios need a shared name for browser grouping.
-
 a11y:
   role: radio
   keyboard:
@@ -93,11 +90,9 @@ a11y:
   aria:
     aria-checked: Mirrors checked attribute.
     aria-disabled: Mirrors disabled attribute.
-
 events:
   change:
     description: Fires when this radio becomes selected.
-
 tokens:
   - name: --aui-radio-gap
     default: calc(var(--aui-space) * 2)
@@ -141,20 +136,24 @@ tokens:
   - name: --aui-radio-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Circle border when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [checked], [disabled] — visual state via attributes"
     - "CG2: ::before on [data-circle] for dot indicator"
     - "CG3: ::after { content: attr(label) } — label rendered in CSS, overflow: hidden on ::after only"
     - "CG4: gap uses 2 * space (tightened from 3 * space)"
-
 examples:
-  - html: <aui-radio label="Option A" value="a"></aui-radio>
-    description: Default unchecked radio.
-
-  - html: <aui-radio label="Option B" value="b" checked></aui-radio>
-    description: Pre-selected radio.
-
-  - html: <aui-radio label="Unavailable" disabled></aui-radio>
-    description: Disabled radio.
+  - description: Default unchecked radio
+    html: <aui-radio label="Option A" value="a"></aui-radio>
+  - description: Pre-selected radio
+    html: <aui-radio label="Option B" value="b" checked></aui-radio>
+  - description: Disabled radio
+    html: <aui-radio label="Unavailable" disabled></aui-radio>
+  - description: Accent intent radio
+    html: <aui-radio label="Accent option" value="accent" accent checked></aui-radio>
+  - description: Danger intent radio
+    html: <aui-radio label="Critical" value="crit" danger checked></aui-radio>
+  - description: Small size radio
+    html: <aui-radio label="Tiny option" value="tiny" size="sm"></aui-radio>
+  - description: Large size radio
+    html: <aui-radio label="Big option" value="big" size="lg" checked></aui-radio>