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

package/dist/docs/components/meter.yaml

@@ -2,37 +2,31 @@ name: aui-meter
 tag: aui-meter
 type: component
 summary: Visual gauge for known-range scalar values.
-description: >
-  Static measurement gauge within a known range. Fill width
-  driven by --aui-meter-pct CSS custom property computed from
-  value, min, and max attributes. Semantically distinct from
-  aui-progress — meters represent a static measurement (disk
-  usage, budget), not task completion. Intent colors indicate
-  threshold states.
-
+description: |
+  Static measurement gauge within a known range. Fill width driven by --aui-meter-pct CSS custom property computed from value, min, and max attributes. Semantically distinct from aui-progress — meters represent a static measurement (disk usage, budget), not task completion. Intent colors indicate threshold states.
 base: AgentElement
-
-# ── Presentational attributes ─────────────────────────────
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: false
     default: md
-    values: [sm, md, lg]
+    values:
+      - sm
+      - md
+      - lg
     description: Track height — sm (4px), md (6px), lg (10px).
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: false
     default: accent
-    values: [accent, success, warning, danger]
+    values:
+      - accent
+      - success
+      - warning
+      - danger
     description: Fill color reflecting threshold state.
-
-# ── Attributes ────────────────────────────────────────────
-
 attributes:
   value:
     type: number
@@ -46,22 +40,13 @@ attributes:
     type: number
     default: "100"
     description: Range maximum.
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: empty
   accepts: []
   required: false
-  description: >
+  description: |
     No content — meter is a visual gauge only.
-
-# ── Slots ─────────────────────────────────────────────────
-
 slots: {}
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   sizing:
     - --aui-meter-height
@@ -70,20 +55,24 @@ tokens:
     - --aui-meter-fill
   shape:
     - --aui-meter-radius
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-meter value="45"></aui-meter>
-    description: Default accent meter at 45%.
-
-  - html: <aui-meter value="75" warning></aui-meter>
-    description: Warning meter at 75%.
-
-  - html: |
+  - description: Default accent meter at 45%
+    html: <aui-meter value="45"></aui-meter>
+  - description: Warning meter at 75%
+    html: <aui-meter value="75" warning></aui-meter>
+  - description: Danger meter at 95%
+    html: <aui-meter value="95" danger></aui-meter>
+  - description: Three sizes with different values
+    html: |-
+      <aui-stack gap="3">
+        <aui-meter value="30" size="sm"></aui-meter>
+        <aui-meter value="60"></aui-meter>
+        <aui-meter value="85" size="lg" warning></aui-meter>
+      </aui-stack>
+  - description: Meter with context labels in a row
+    html: |-
       <aui-stack direction="row" gap="2" align-items="center">
         <aui-text size="xs" muted>Disk usage</aui-text>
         <aui-meter value="82" warning style="flex: 1"></aui-meter>
         <aui-text size="xs" muted>82%</aui-text>
       </aui-stack>
-    description: Meter with context labels in a row.

package/dist/docs/components/nav-item.yaml

@@ -2,52 +2,39 @@ name: aui-nav-item
 tag: aui-nav-item
 type: component
 summary: Navigation list item with icon, label, badge, and active state.
-description: >
-  Flex row navigation item with hover, active, and disabled states.
-  Supports icons and inline text. Use [active] to indicate the current
-  page. CSS-only element with no JS behavior beyond extending AgentElement.
-
+description: |
+  Flex row navigation item with hover, active, and disabled states. Supports icons and inline text. Use [active] to indicate the current page. CSS-only element with no JS behavior beyond extending AgentElement.
 base: AgentElement
-
-# ── Modifiers ────────────────────────────────────────────
-
 modifiers:
   active:
     syntax: boolean
-    description: >
-      Marks the item as the current/active page. Applies stronger
-      text color, medium font weight, and a subtle background fill.
-
+    description: |
+      Marks the item as the current/active page. Applies stronger text color, medium font weight, and a subtle background fill.
   disabled:
     syntax: boolean
-    description: >
+    description: |
       Disables the item. Dims color and prevents pointer interaction.
-
   muted:
     syntax: boolean
-    description: >
+    description: |
       Reduces opacity for de-emphasized items.
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: inline
-  accepts: [text, aui-icon, aui-badge]
+  accepts:
+    - text
+    - aui-icon
+    - aui-badge
   required: true
-  description: >
-    Label text and optional leading icon or trailing badge.
-    Icons and text are laid out in a flex row.
-
-# ── Slots ─────────────────────────────────────────────────
-
+  description: |
+    Label text and optional leading icon or trailing badge. Icons and text are laid out in a flex row.
 slots:
   default:
-    accepts: [text, aui-icon, aui-badge]
+    accepts:
+      - text
+      - aui-icon
+      - aui-badge
     required: true
     description: Nav item content — icon, label text, optional badge.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   sizing:
     - --aui-nav-item-gap
@@ -65,22 +52,40 @@ tokens:
     - --aui-nav-item-color-disabled
     - --aui-nav-item-background-hover
     - --aui-nav-item-background-active
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-nav-item>Dashboard</aui-nav-item>
-    description: Default nav item.
-
-  - html: <aui-nav-item active>Dashboard</aui-nav-item>
-    description: Active nav item (current page).
-
-  - html: |
+  - description: Default nav item
+    html: <aui-nav-item>Dashboard</aui-nav-item>
+  - description: Active nav item (current page)
+    html: <aui-nav-item active>Dashboard</aui-nav-item>
+  - description: Disabled nav item
+    html: <aui-nav-item disabled>Admin</aui-nav-item>
+  - description: Nav item with leading icon
+    html: |-
+      <aui-nav-item>
+        <aui-icon name="home"></aui-icon>
+        Dashboard
+      </aui-nav-item>
+  - description: Active nav item with icon
+    html: |-
+      <aui-nav-item active>
+        <aui-icon name="settings"></aui-icon>
+        Settings
+      </aui-nav-item>
+  - description: Navigation list with mixed states
+    html: |-
       <aui-stack gap="1">
         <aui-nav-item active>
           <aui-icon name="home"></aui-icon>
           Dashboard
         </aui-nav-item>
+        <aui-nav-item>
+          <aui-icon name="file-text"></aui-icon>
+          Documents
+        </aui-nav-item>
+        <aui-nav-item>
+          <aui-icon name="users"></aui-icon>
+          Team
+        </aui-nav-item>
         <aui-nav-item>
           <aui-icon name="settings"></aui-icon>
           Settings
@@ -90,4 +95,10 @@ examples:
           Admin
         </aui-nav-item>
       </aui-stack>
-    description: Nav list with active, default, and disabled items.
+  - description: Nav item with trailing badge
+    html: |-
+      <aui-nav-item>
+        <aui-icon name="inbox"></aui-icon>
+        Inbox
+        <aui-badge>12</aui-badge>
+      </aui-nav-item>

package/dist/docs/components/noodles.yaml

@@ -2,183 +2,151 @@ name: aui-noodles
 tag: aui-noodles
 type: component
 summary: Declarative SVG noodle canvas for node-based flow editors.
-description: >
-  Renders SVG bezier/step/straight connections between child elements.
-  Children declare ports via `data-noodle-port="left right"` and the
-  element handles the SVG overlay, coordinate system, path computation,
-  and interactive drag-to-connect when editable. Supports reconnect
-  (grab an existing noodle to move it), proximity-based port snapping,
-  and animated dash patterns.
-
+description: |
+  Renders SVG bezier/step/straight connections between child elements. Children declare ports via `data-noodle-port="left right"` and the element handles the SVG overlay, coordinate system, path computation, and interactive drag-to-connect when editable. Supports reconnect (grab an existing noodle to move it), proximity-based port snapping, and animated dash patterns.
 base: AgentElement
-
 attributes:
   editable:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      Allow interactive creation and deletion of connections via
-      drag-to-connect from port indicators.
-
+    description: |
+      Allow interactive creation and deletion of connections via drag-to-connect from port indicators.
   color:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Noodle stroke color. Defaults to var(--aui-accent-500).
-      Individual connections can override via the color property.
-
+    description: |
+      Noodle stroke color. Defaults to var(--aui-accent-500). Individual connections can override via the color property.
   stroke-width:
     syntax: key-value
     type: string
     default: "2"
     description: Stroke width in px.
-
   tension:
     syntax: key-value
     type: string
     default: "0.5"
-    description: >
-      Bezier control point distance as a fraction of the distance
-      between endpoints. 0 = flat, 1 = dramatic curves.
-
+    description: |
+      Bezier control point distance as a fraction of the distance between endpoints. 0 = flat, 1 = dramatic curves.
   show-ports:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      Show port indicator dots on connectable elements. Defaults to
-      true when editable is set.
-
+    description: |
+      Show port indicator dots on connectable elements. Defaults to true when editable is set.
   port-size:
     syntax: key-value
     type: string
     default: "10"
     description: Port indicator dot diameter in px.
-
   curve:
     syntax: key-value
     type: enum
-    values: [bezier, step, straight]
+    values:
+      - bezier
+      - step
+      - straight
     default: bezier
-    description: >
-      Curve style for noodle paths. bezier = smooth cubic bezier,
-      step = right-angle step, straight = direct line.
-
+    description: |
+      Curve style for noodle paths. bezier = smooth cubic bezier, step = right-angle step, straight = direct line.
   animated:
     syntax: boolean
     type: boolean
     default: false
-    description: >
+    description: |
       Animate noodles with a flowing dash pattern.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      Disable the controller. Paths render as muted dashed lines
-      and interaction is prevented.
-
+    description: |
+      Disable the controller. Paths render as muted dashed lines and interaction is prevented.
 content:
   model: block
-  accepts: [div, section, any]
+  accepts:
+    - div
+    - section
+    - any
   required: true
-  description: >
-    Child elements that participate in the noodle graph. Each connectable
-    element must have an `id` and a `data-noodle-port` attribute listing
-    which sides accept connections (e.g. "left right top bottom").
-
+  description: |
+    Child elements that participate in the noodle graph. Each connectable element must have an `id` and a `data-noodle-port` attribute listing which sides accept connections (e.g. "left right top bottom").
 slots:
   default:
-    accepts: [any]
+    accepts:
+      - any
     required: true
     description: Node elements with data-noodle-port attributes.
-
 composition:
-  parents: [aui-container, div, section, main]
+  parents:
+    - aui-container
+    - div
+    - section
+    - main
   children:
-    typical: [div, aui-container]
-    pattern: >
-      Absolutely positioned child elements with id and data-noodle-port
-      attributes. The noodles element establishes a positioning context.
-  context: >
-    Use for flow editors, pipeline visualizations, node-based UIs,
-    and any diagram where elements need visible connections.
-
+    typical:
+      - div
+      - aui-container
+    pattern: |
+      Absolutely positioned child elements with id and data-noodle-port attributes. The noodles element establishes a positioning context.
+  context: |
+    Use for flow editors, pipeline visualizations, node-based UIs, and any diagram where elements need visible connections.
 a11y:
   role: No implicit role. The SVG overlay is pointer-events:none.
   keyboard:
     Tab: Port indicators are not in tab order (crosshair cursor).
   focus:
     default: Not focusable.
-
 events:
   aui:noodle-connect:
-    description: >
-      Fired when a connection is created (programmatic or drag).
-      Detail: { id, from, to, fromPort, toPort }
+    description: |
+      Fired when a connection is created (programmatic or drag). Detail: { id, from, to, fromPort, toPort }
     bubbles: true
-
   aui:noodle-disconnect:
-    description: >
-      Fired when a connection is removed.
-      Detail: { id, from, to, fromPort, toPort }
+    description: |
+      Fired when a connection is removed. Detail: { id, from, to, fromPort, toPort }
     bubbles: true
-
   aui:noodle-drag:
-    description: >
-      Fired during drag-to-connect pointer movement.
-      Detail: { from, fromPort, x, y, reconnect? }
+    description: |
+      Fired during drag-to-connect pointer movement. Detail: { from, fromPort, x, y, reconnect? }
     bubbles: true
-
 tokens:
   color:
     - --aui-accent-500
     - --aui-ink-muted
   motion:
     - noodle-flow (keyframe animation)
-
 examples:
-  - html: |
+  - description: Two connected nodes with a bezier noodle
+    html: |-
       <aui-noodles style="width: 600px; height: 300px;">
-        <aui-container id="a" data-noodle-port="right" kind="card" bordered padding="3" style="position: absolute; left: 40px; top: 120px;">
-          <aui-text weight="medium">Source</aui-text>
-        </aui-container>
-        <aui-container id="b" data-noodle-port="left" kind="card" bordered padding="3" style="position: absolute; left: 400px; top: 120px;">
-          <aui-text weight="medium">Target</aui-text>
-        </aui-container>
+        <div id="a" data-noodle-port="right" style="position: absolute; left: 40px; top: 120px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Source
+        </div>
+        <div id="b" data-noodle-port="left" style="position: absolute; left: 400px; top: 120px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Target
+        </div>
       </aui-noodles>
-    description: Two connected nodes with a bezier noodle.
-    script: |
-      const noodles = document.querySelector('aui-noodles');
-      noodles.connect('a', 'b', 'right', 'left');
-
-  - html: |
+  - description: Editable canvas with port indicators. Drag between ports to connect
+    html: |-
       <aui-noodles editable show-ports style="width: 600px; height: 300px;">
-        <aui-container id="n1" data-noodle-port="right bottom" kind="card" bordered padding="3" style="position: absolute; left: 40px; top: 40px;">
-          <aui-text weight="medium">Node 1</aui-text>
-        </aui-container>
-        <aui-container id="n2" data-noodle-port="left right" kind="card" bordered padding="3" style="position: absolute; left: 240px; top: 120px;">
-          <aui-text weight="medium">Node 2</aui-text>
-        </aui-container>
-        <aui-container id="n3" data-noodle-port="left top" kind="card" bordered padding="3" style="position: absolute; left: 440px; top: 40px;">
-          <aui-text weight="medium">Node 3</aui-text>
-        </aui-container>
+        <div id="n1" data-noodle-port="right bottom" style="position: absolute; left: 40px; top: 40px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Node 1
+        </div>
+        <div id="n2" data-noodle-port="left right" style="position: absolute; left: 240px; top: 120px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Node 2
+        </div>
+        <div id="n3" data-noodle-port="left top" style="position: absolute; left: 440px; top: 40px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Node 3
+        </div>
       </aui-noodles>
-    description: Editable canvas with port indicators. Drag between ports to connect.
-
-  - html: |
+  - description: Step curve style with animated dash pattern
+    html: |-
       <aui-noodles curve="step" stroke-width="3" animated style="width: 500px; height: 200px;">
-        <aui-container id="s1" data-noodle-port="right" kind="card" bordered padding="3" style="position: absolute; left: 20px; top: 80px;">
-          <aui-text weight="medium">Step A</aui-text>
-        </aui-container>
-        <aui-container id="s2" data-noodle-port="left" kind="card" bordered padding="3" style="position: absolute; left: 340px; top: 80px;">
-          <aui-text weight="medium">Step B</aui-text>
-        </aui-container>
+        <div id="s1" data-noodle-port="right" style="position: absolute; left: 20px; top: 80px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Step A
+        </div>
+        <div id="s2" data-noodle-port="left" style="position: absolute; left: 340px; top: 80px; padding: 12px 20px; background: var(--aui-card); border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+          Step B
+        </div>
       </aui-noodles>
-    description: Step curve style with animated dash pattern.
-    script: |
-      const noodles = document.querySelector('aui-noodles');
-      noodles.connect('s1', 's2', 'right', 'left');

package/dist/docs/components/option.yaml

@@ -2,39 +2,31 @@ name: aui-option
 tag: aui-option
 type: component
 summary: Selectable item within aui-select.
-description: >
-  A single option within aui-select.
-  Most behavior is coordinated by the parent listbox. Visual states
-  driven by selected, disabled, and data-navigate-active attributes.
-
+description: |
+  A single option within aui-select. Most behavior is coordinated by the parent listbox. Visual states driven by selected, disabled, and data-navigate-active attributes.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: The option's value for form submission.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents selection.
-
   selected:
     syntax: boolean
     type: boolean
     default: false
     description: Whether this option is currently selected.
-
   label:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       Display label override. When empty, textContent is used.
-
 tokens:
   - name: --aui-option-color
     default: var(--aui-ink)
@@ -63,23 +55,20 @@ tokens:
   - name: --aui-option-background-hover
     default: var(--aui-fill-hover, var(--aui-action-hover))
     description: Background on hover and keyboard highlight.
-
 a11y:
   role: option
   aria:
     aria-selected: Reflects selected attribute.
     aria-disabled: Reflects disabled attribute.
-
 composition:
-  parents: [aui-select, aui-optgroup]
+  parents:
+    - aui-select
+    - aui-optgroup
   children: null
-
 examples:
-  - html: <aui-option value="apple">Apple</aui-option>
-    description: Simple option.
-
-  - html: <aui-option value="banana" selected>Banana</aui-option>
-    description: Pre-selected option.
-
-  - html: <aui-option value="cherry" disabled>Cherry</aui-option>
-    description: Disabled option.
+  - description: Simple option
+    html: <aui-option value="apple">Apple</aui-option>
+  - description: Pre-selected option
+    html: <aui-option value="banana" selected>Banana</aui-option>
+  - description: Disabled option
+    html: <aui-option value="cherry" disabled>Cherry</aui-option>

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>