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

package/dist/docs/components/pagination.yaml

@@ -2,42 +2,33 @@ name: aui-pagination
 tag: aui-pagination
 type: component
 summary: Page navigation with numbered buttons and prev/next.
-description: >
-  Stamps page buttons, prev/next arrows, and ellipsis from the
-  page and total attributes. Handles large page counts with
-  configurable sibling count.
-
+description: |
+  Stamps page buttons, prev/next arrows, and ellipsis from the page and total attributes. Handles large page counts with configurable sibling count.
 base: AgentElement
-
 attributes:
   page:
     syntax: key-value
     type: string
     default: "1"
     description: Current page number.
-
   total:
     syntax: key-value
     type: string
     default: "1"
     description: Total number of pages.
-
   siblings:
     syntax: key-value
     type: string
     default: "1"
     description: Number of sibling pages to show around the current page.
-
 a11y:
   role: navigation
   aria:
     aria-label: Pagination
     aria-current: page (on the current page button).
-
 events:
   change:
     description: Fired when page changes. detail.page is the new page number.
-
 tokens:
   - name: --aui-pagination-gap
     default: 2px
@@ -67,7 +58,7 @@ tokens:
     default: var(--aui-solid, var(--aui-accent, oklch(0.55 0.2 260)))
     description: Background color of the current page button.
   - name: --aui-pagination-current-color
-    default: var(--aui-on-solid, #fff)
+    default: var(--aui-solid-ink,
     description: Text color of the current page button.
   - name: --aui-pagination-current-font-weight
     default: var(--aui-font-weight-medium)
@@ -78,10 +69,22 @@ tokens:
   - name: --aui-pagination-ellipsis-color
     default: var(--aui-ink-muted)
     description: Color of the ellipsis indicators.
-
 examples:
-  - html: <aui-pagination page="3" total="10"></aui-pagination>
-    description: Pagination on page 3 of 10.
-
-  - html: <aui-pagination page="1" total="5" siblings="2"></aui-pagination>
-    description: Small pagination with 2 siblings.
+  - description: Pagination on page 3 of 10
+    html: <aui-pagination page="3" total="10"></aui-pagination>
+  - description: Small pagination with 2 siblings
+    html: <aui-pagination page="1" total="5" siblings="2"></aui-pagination>
+  - description: First page — prev should be disabled
+    html: <aui-pagination page="1" total="10"></aui-pagination>
+  - description: Last page — next should be disabled
+    html: <aui-pagination page="10" total="10"></aui-pagination>
+  - description: Middle of a large set (page 5 of 20)
+    html: <aui-pagination page="5" total="20"></aui-pagination>
+  - description: Many pages with 2 siblings (page 8 of 30)
+    html: <aui-pagination page="8" total="30" siblings="2"></aui-pagination>
+  - description: Many pages with 3 siblings for wider range (page 12 of 50)
+    html: <aui-pagination page="12" total="50" siblings="3"></aui-pagination>
+  - description: Few pages, all visible
+    html: <aui-pagination page="2" total="3"></aui-pagination>
+  - description: Single page — both prev/next disabled
+    html: <aui-pagination page="1" total="1"></aui-pagination>

package/dist/docs/components/pane.yaml

@@ -2,68 +2,55 @@ name: aui-pane
 tag: aui-pane
 type: component
 summary: Individual pane within a resizable split layout.
-description: >
-  A flexible panel within aui-panes. Supports auto-stamped headers with
-  label, icon, close and minimize buttons. Can be minimized to header-only,
-  collapsed to a thin strip, or hidden. Resize priority (high/normal/low)
-  controls how cascade resizing distributes space.
-
+description: |
+  A flexible panel within aui-panes. Supports auto-stamped headers with label, icon, close and minimize buttons. Can be minimized to header-only, collapsed to a thin strip, or hidden. Resize priority (high/normal/low) controls how cascade resizing distributes space.
 base: AgentElement
-
 attributes:
   label:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Pane header label. When set, auto-stamps an aui-header with the label
-      text and optional action buttons.
-
+    description: |
+      Pane header label. When set, auto-stamps an aui-header with the label text and optional action buttons.
   icon:
     syntax: key-value
     type: string
     default: ""
     description: Icon name shown before the label in the stamped header.
-
   closeable:
     syntax: boolean
     type: boolean
     default: false
     description: Adds a close button to the stamped header.
-
   minimizable:
     syntax: boolean
     type: boolean
     default: false
     description: Adds a minimize/restore button to the stamped header.
-
   minimized:
     syntax: boolean
     type: boolean
     default: false
     description: Collapses pane to header-only.
-
   fixed-size:
     syntax: key-value
     type: string
     default: ""
     description: Fixed flex value (e.g. "300px"). Sets flex to 0 1 {fixed-size}.
-
   basis:
     syntax: key-value
     type: string
     default: ""
     description: Preferred size (e.g. "14rem"). Sets flex to 1 1 {basis}.
-
   priority:
     syntax: key-value
     type: enum
-    values: [high, low]
+    values:
+      - high
+      - low
     default: ""
-    description: >
-      Resize priority. High-priority panes absorb delta first during
-      cascade resize. Low-priority panes resize last.
-
+    description: |
+      Resize priority. High-priority panes absorb delta first during cascade resize. Low-priority panes resize last.
 tokens:
   - name: --aui-pane-accent
     default: var(--aui-focus)
@@ -84,15 +71,16 @@ tokens:
     default: var(--aui-font-weight-semibold)
     description: Font weight for the pane header label.
   - name: --aui-pane-header-letter-spacing
-    default: "0.04em"
+    default: 0.04em
     description: Letter spacing for the uppercase pane header label.
-
 composition:
-  parents: [aui-panes]
-  children: [any]
-
+  parents:
+    - aui-panes
+  children:
+    - any
 examples:
-  - html: |
+  - description: Two-pane split with labeled headers and resizable boundary
+    html: |-
       <aui-panes style="height: 20rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-pane label="Explorer" size="xs" density="compact">
           <aui-stack gap="1" padding="2">
@@ -107,9 +95,8 @@ examples:
           </aui-stack>
         </aui-pane>
       </aui-panes>
-    description: Two-pane split with labeled headers and resizable boundary.
-
-  - html: |
+  - description: Vertical split with minimizable panes
+    html: |-
       <aui-panes direction="vertical" style="height: 20rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
         <aui-pane label="Output" minimizable size="xs" density="compact">
           <aui-stack padding="2">
@@ -122,4 +109,3 @@ examples:
           </aui-stack>
         </aui-pane>
       </aui-panes>
-    description: Vertical split with minimizable panes.

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

@@ -2,104 +2,113 @@ 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.
-
+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 attributes -----------------------------------------
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: false
     default: default
-    values: [sm, lg]
-    description: >
+    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: >
+    values:
+      - success
+      - warning
+      - danger
+    description: |
       Color family for the fill stroke. Default uses the accent color.
-
-# -- Component attributes ---------------------------------------------
-
 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.
-
+    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: >
+    description: |
       Center text displayed over the ring (e.g. "75%").
-
-# -- Content model -----------------------------------------------------
-
 content:
   model: empty
   accepts: []
   required: false
-  description: >
+  description: |
     No child content. The SVG ring and label are stamped by JS.
-
-# -- CSS tokens consumed -----------------------------------------------
-
 tokens:
   - name: --aui-progress-circle-value
     default: "0"
     description: Fill percentage set by JS. Drives stroke-dasharray.
-
-# -- Accessibility -----------------------------------------------------
-
 a11y:
   role: progressbar
   aria:
     aria-valuenow: Set from value attribute.
     aria-valuemin: "0"
     aria-valuemax: "100"
-
-# -- Use cases ---------------------------------------------------------
-
 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 ----------------------------------------------------------
-
 examples:
-  - html: <aui-progress-circle value="75"></aui-progress-circle>
-    description: Default progress circle at 75%.
-
-  - html: <aui-progress-circle value="75" label="75%"></aui-progress-circle>
-    description: Circle with center label.
-
-  - html: <aui-progress-circle value="90" warning></aui-progress-circle>
-    description: Warning intent at 90%.
-
-  - html: <aui-progress-circle value="100" success></aui-progress-circle>
-    description: Complete with success color.
-
-  - html: <aui-progress-circle value="60" size="sm"></aui-progress-circle>
-    description: Small size variant.
-
-  - html: <aui-progress-circle value="60" size="lg" label="60%"></aui-progress-circle>
-    description: Large size with label.
+  - 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

@@ -2,58 +2,45 @@ 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.
-
+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 attributes ─────────────────────────────
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: false
     default: default
-    values: [sm, lg]
-    description: >
+    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: >
+    values:
+      - success
+      - warning
+      - danger
+      - info
+    description: |
       Color family for the fill bar. Default uses the accent color.
-
-# ── Component attributes ──────────────────────────────────
-
 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 ─────────────────────────────────────────
-
+    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: >
+  description: |
     No child content. The bar is rendered entirely via CSS ::after.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   - name: --aui-progress-height
     default: 4px
@@ -67,38 +54,35 @@ tokens:
   - name: --aui-progress-fill
     default: var(--aui-accent)
     description: Fill bar color. Overridden by intent attributes.
-
-# ── Accessibility ─────────────────────────────────────────
-
 a11y:
   role: progressbar
   aria:
     aria-valuenow: Set from value attribute.
     aria-valuemin: "0"
     aria-valuemax: "100"
-
-# ── Use cases ─────────────────────────────────────────────
-
 use-cases:
   - Upload or download progress indicator.
   - Step completion percentage in onboarding flows.
   - Resource usage bar (storage, quota, CPU).
   - Form completion meter.
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-progress value="40"></aui-progress>
-    description: Default progress bar at 40%.
-
-  - html: <aui-progress value="90" size="sm" success></aui-progress>
-    description: Small bar with success intent.
-
-  - html: <aui-progress value="60" size="lg" warning></aui-progress>
-    description: Large bar with warning intent.
-
-  - html: <aui-progress value="95" danger></aui-progress>
-    description: Danger intent at high usage.
-
-  - html: <aui-progress value="100" success></aui-progress>
-    description: Completed progress with success color.
+  - 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>