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

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

@@ -0,0 +1,104 @@
+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.
+base: AgentElement
+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.
+  disabled:
+    syntax: boolean
+    description: |
+      Disables the item. Dims color and prevents pointer interaction.
+  muted:
+    syntax: boolean
+    description: |
+      Reduces opacity for de-emphasized items.
+content:
+  model: inline
+  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:
+  default:
+    accepts:
+      - text
+      - aui-icon
+      - aui-badge
+    required: true
+    description: Nav item content — icon, label text, optional badge.
+tokens:
+  sizing:
+    - --aui-nav-item-gap
+    - --aui-nav-item-padding-block
+    - --aui-nav-item-padding-inline
+    - --aui-nav-item-border-radius
+  typography:
+    - --aui-nav-item-font-size
+    - --aui-nav-item-font-weight
+    - --aui-nav-item-font-weight-active
+  color:
+    - --aui-nav-item-color
+    - --aui-nav-item-color-hover
+    - --aui-nav-item-color-active
+    - --aui-nav-item-color-disabled
+    - --aui-nav-item-background-hover
+    - --aui-nav-item-background-active
+examples:
+  - 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
+        </aui-nav-item>
+        <aui-nav-item disabled>
+          <aui-icon name="lock"></aui-icon>
+          Admin
+        </aui-nav-item>
+      </aui-stack>
+  - 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>

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.