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

package/dist/docs/components/select.yaml

@@ -2,90 +2,66 @@ name: aui-select
 tag: aui-select
 type: component
 summary: Universal collection surface — dropdown, toolbar, listbox, and combobox in one element.
-description: >
-  A single component with four presentation modes controlled by the mode
-  attribute. Default is a dropdown select. mode="bar" renders as a toolbar
-  with overflow management. mode="list" is a standalone scrollable listbox.
-  mode="combobox" adds a searchable input. Supports nested aui-select for
-  submenus, aui-optgroup for labeled sections, and aui-option as leaf items.
-  In dropdown mode, the trigger sizes to the widest option content,
-  matching the native <select> intrinsic sizing behavior. Automatically
-  stretches to full width when placed inside aui-field. Use width="full"
-  to override the default width in other contexts.
-
+description: |
+  A single component with four presentation modes controlled by the mode attribute. Default is a dropdown select. mode="bar" renders as a toolbar with overflow management. mode="list" is a standalone scrollable listbox. mode="combobox" adds a searchable input. Supports nested aui-select for submenus, aui-optgroup for labeled sections, and aui-option as leaf items. In dropdown mode, the trigger sizes to the widest option content, matching the native <select> intrinsic sizing behavior. Automatically stretches to full width when placed inside aui-field. Use width="full" to override the default width in other contexts.
 base: AgentElement
-
 attributes:
   mode:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Presentation mode. Empty (default) = dropdown select.
-      "bar" = inline toolbar with overflow.
-      "list" = standalone scrollable listbox.
-      "combobox" = searchable dropdown with type-ahead filtering.
-
+    description: |
+      Presentation mode. Empty (default) = dropdown select. "bar" = inline toolbar with overflow. "list" = standalone scrollable listbox. "combobox" = searchable dropdown with type-ahead filtering.
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks the field as required (dropdown/combobox modes).
-
   placeholder:
     syntax: key-value
     type: string
-    default: "Select…"
+    default: Select…
     description: Placeholder text (dropdown/combobox trigger).
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Currently selected value(s). Comma-separated for multiple.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form field name.
-
   open:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the dropdown/combobox popover is open.
-
   multiple:
     syntax: boolean
     type: boolean
     default: false
     description: Allow multiple selection (list mode).
-
   orientation:
     syntax: key-value
     type: string
     default: ""
     description: Set to "vertical" for vertical bar/list layout.
-
   transparent:
     syntax: boolean
     type: boolean
     default: false
     description: Remove background and border (bar mode).
-
   fill:
     syntax: boolean
     type: boolean
     default: false
     description: Children fill available space equally (bar mode).
-
 tokens:
   - name: --aui-select-font-family
     default: var(--aui-font-family)
@@ -141,34 +117,27 @@ tokens:
   - name: --aui-select-dropdown-shadow
     default: var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))
     description: Box shadow for the dropdown popover.
-
 bar-overflow:
-  description: >
-    In bar mode, items overflow into a "..." popover menu when the container
-    is too narrow. Control which items overflow first using data-priority
-    on children. Groups (aui-optgroup) overflow as a unit — all items in a
-    group move to the overflow menu together. In the bar, group labels are
-    hidden and auto-stamped dividers separate adjacent groups. In the
-    overflow menu, groups render with a horizontal divider + uppercase
-    group header label above their items.
+  description: |
+    In bar mode, items overflow into a "..." popover menu when the container is too narrow. Control which items overflow first using data-priority on children. Groups (aui-optgroup) overflow as a unit — all items in a group move to the overflow menu together. In the bar, group labels are hidden and auto-stamped dividers separate adjacent groups. In the overflow menu, groups render with a horizontal divider + uppercase group header label above their items.
   data-priority:
-    values: ["0", "1", "2", "pin"]
-    aliases: { low: "0", normal: "1", high: "2" }
+    values:
+      - "0"
+      - "1"
+      - "2"
+      - pin
+    aliases:
+      low: "0"
+      normal: "1"
+      high: "2"
     default: "1"
-    description: >
-      Overflow priority for bar mode children.
-      0 (low)    — collapses first.
-      1 (normal) — default, collapses at standard threshold.
-      2 (high)   — collapses last.
-      pin        — never collapses (always visible).
-      Items at the same priority collapse in reverse DOM order (end first).
-
+    description: |
+      Overflow priority for bar mode children. 0 (low)    — collapses first. 1 (normal) — default, collapses at standard threshold. 2 (high)   — collapses last. pin        — never collapses (always visible). Items at the same priority collapse in reverse DOM order (end first).
   padding:
     syntax: key-value
     type: string
     default: ""
     description: Padding variant — none, tight, regular, relaxed (bar mode).
-
 a11y:
   role: Depends on mode — combobox (dropdown), toolbar (bar), listbox (list).
   keyboard:
@@ -181,35 +150,37 @@ a11y:
     Escape: Close dropdown or cancel.
     Home: First item.
     End: Last item.
-
 events:
   change:
-    description: >
-      Fired when selection changes (dropdown/list/combobox modes).
-      detail contains value, option, and label.
+    description: |
+      Fired when selection changes (dropdown/list/combobox modes). detail contains value, option, and label.
   overflow:
-    description: >
-      Fired when overflow state changes (bar mode).
-      detail contains visibleCount and overflowedCount.
-
+    description: |
+      Fired when overflow state changes (bar mode). detail contains visibleCount and overflowedCount.
 form:
   associated: true
   value: Selected option value(s).
-
 composition:
-  parents: [aui-field, form, aui-stack, any]
-  children: [aui-option, aui-optgroup, aui-select (submenu), aui-button (bar mode)]
-
+  parents:
+    - aui-field
+    - form
+    - aui-stack
+    - any
+  children:
+    - aui-option
+    - aui-optgroup
+    - aui-select (submenu)
+    - aui-button (bar mode)
 examples:
-  - html: |
+  - description: Dropdown select — click to open, arrow keys to navigate, Enter to select
+    html: |-
       <aui-select placeholder="Choose a fruit">
         <aui-option value="apple">Apple</aui-option>
         <aui-option value="banana">Banana</aui-option>
         <aui-option value="cherry">Cherry</aui-option>
       </aui-select>
-    description: Dropdown select — click to open, arrow keys to navigate, Enter to select.
-
-  - html: |
+  - description: Grouped options with a divider between sections
+    html: |-
       <aui-select placeholder="Category">
         <aui-optgroup label="Fruits">
           <aui-option value="apple">Apple</aui-option>
@@ -220,36 +191,32 @@ examples:
           <aui-option value="spinach">Spinach</aui-option>
         </aui-optgroup>
       </aui-select>
-    description: Grouped options with a divider between sections.
-
-  - html: |
+  - description: Combobox — type to filter options
+    html: |-
       <aui-select mode="combobox" placeholder="Search colors...">
         <aui-option value="red">Red</aui-option>
         <aui-option value="green">Green</aui-option>
         <aui-option value="blue">Blue</aui-option>
         <aui-option value="yellow">Yellow</aui-option>
       </aui-select>
-    description: Combobox — type to filter options.
-
-  - html: |
+  - description: Standalone listbox — all options visible, scrollable
+    html: |-
       <aui-select mode="list" max-width="xs">
         <aui-option value="alpha">Alpha</aui-option>
         <aui-option value="beta" selected>Beta</aui-option>
         <aui-option value="gamma">Gamma</aui-option>
         <aui-option value="delta">Delta</aui-option>
       </aui-select>
-    description: Standalone listbox — all options visible, scrollable.
-
-  - html: |
+  - description: Multi-select listbox — click to toggle, multiple selections allowed
+    html: |-
       <aui-select mode="list" multiple max-width="xs">
         <aui-option value="a" selected>Engineering</aui-option>
         <aui-option value="b">Design</aui-option>
         <aui-option value="c" selected>Product</aui-option>
         <aui-option value="d">Marketing</aui-option>
       </aui-select>
-    description: Multi-select listbox — click to toggle, multiple selections allowed.
-
-  - html: |
+  - description: Bar mode (toolbar) — drag to resize, items overflow into a ··· menu
+    html: |-
       <div style="resize: horizontal; overflow: hidden; border: 1px dashed var(--aui-border-muted); border-radius: var(--aui-radius); padding: 0.5rem; min-width: 10rem; max-width: 100%; width: 100%;">
         <aui-select mode="bar" transparent width="full">
           <aui-option>Cut</aui-option>
@@ -264,9 +231,8 @@ examples:
           <aui-option>Underline</aui-option>
         </aui-select>
       </div>
-    description: Bar mode (toolbar) — drag to resize, items overflow into a ··· menu.
-
-  - html: |
+  - description: Bar mode with pinned item — Home never overflows
+    html: |-
       <aui-select mode="bar" width="full">
         <aui-option overflow-pin>Home</aui-option>
         <aui-option>Projects</aui-option>
@@ -275,23 +241,37 @@ examples:
         <aui-option>Reports</aui-option>
         <aui-option>Settings</aui-option>
       </aui-select>
-    description: Bar mode with pinned item — Home never overflows.
-
-  - html: |
-      <aui-select mode="bar" transparent width="full">
-        <aui-option overflow-pin>Home</aui-option>
-        <aui-optgroup label="Content">
-          <aui-option>Pages</aui-option>
-          <aui-option>Posts</aui-option>
-          <aui-option>Media</aui-option>
-        </aui-optgroup>
-        <aui-optgroup label="Settings">
-          <aui-option>General</aui-option>
-          <aui-option>Users</aui-option>
-          <aui-option>Billing</aui-option>
-        </aui-optgroup>
-      </aui-select>
-    description: >
-      Bar mode with grouped overflow — groups separated by auto-stamped
-      dividers inline. When overflowed, groups render in the menu with
-      divider + uppercase header + items. Group labels hidden in bar.
+  - description: Bar mode with grouped overflow — groups spill as a unit with divider + header in the overflow menu. Resize to see
+    html: |-
+      <div style="resize: horizontal; overflow: hidden; border: 1px dashed var(--aui-border-muted); border-radius: var(--aui-radius); padding: 0.5rem; min-width: 10rem; max-width: 100%; width: 100%;">
+        <aui-select mode="bar" transparent width="full">
+          <aui-option overflow-pin>Home</aui-option>
+          <aui-optgroup label="Content">
+            <aui-option>Pages</aui-option>
+            <aui-option>Posts</aui-option>
+            <aui-option>Media</aui-option>
+          </aui-optgroup>
+          <aui-optgroup label="Settings">
+            <aui-option>General</aui-option>
+            <aui-option>Users</aui-option>
+            <aui-option>Billing</aui-option>
+          </aui-optgroup>
+        </aui-select>
+      </div>
+  - description: Bar mode with mixed pinned items and groups — pinned items stay, groups overflow together
+    html: |-
+      <div style="resize: horizontal; overflow: hidden; border: 1px dashed var(--aui-border-muted); border-radius: var(--aui-radius); padding: 0.5rem; min-width: 10rem; max-width: 100%; width: 100%;">
+        <aui-select mode="bar" width="full">
+          <aui-option overflow-pin>Dashboard</aui-option>
+          <aui-optgroup label="Data">
+            <aui-option>Tables</aui-option>
+            <aui-option>Queries</aui-option>
+            <aui-option>Schemas</aui-option>
+          </aui-optgroup>
+          <aui-optgroup label="Tools">
+            <aui-option>Import</aui-option>
+            <aui-option>Export</aui-option>
+          </aui-optgroup>
+          <aui-option overflow-pin>Help</aui-option>
+        </aui-select>
+      </div>

package/dist/docs/components/skeleton.yaml

@@ -2,57 +2,43 @@ name: aui-skeleton
 tag: aui-skeleton
 type: component
 summary: Loading placeholder with shimmer animation.
-description: >
-  Animated placeholder element for content that has not yet loaded.
-  Uses a gradient shimmer animation. Shape variants for text lines,
-  circles, and rectangles. Width and height set via inline style
-  bridging to CSS custom properties.
-
+description: |
+  Animated placeholder element for content that has not yet loaded. Uses a gradient shimmer animation. Shape variants for text lines, circles, and rectangles. Width and height set via inline style bridging to CSS custom properties.
 base: AgentElement
-
-# ── Presentational attributes ─────────────────────────────
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: false
     default: md
-    values: [xs, sm, md, lg]
+    values:
+      - xs
+      - sm
+      - md
+      - lg
     description: Controls placeholder height. xs=0.5rem, sm=0.75rem, md=1rem, lg=1.5rem.
-
   type:
     syntax: key-value
     attribute: type
     cascades: false
     default: text
-    values: [text, circle, rect]
+    values:
+      - text
+      - circle
+      - rect
     description: Shape variant — text line, avatar circle, or image rectangle.
-
-# ── Modifiers ─────────────────────────────────────────────
-
 modifiers:
   round:
     syntax: boolean
-    description: >
-      Fully rounded corners (pill shape). Applies radius-full
-      regardless of type.
-
-# ── Content model ─────────────────────────────────────────
-
+    description: |
+      Fully rounded corners (pill shape). Applies radius-full regardless of type.
 content:
   model: empty
   accepts: []
   required: false
-  description: >
+  description: |
     No content — skeleton is a visual placeholder only.
-
-# ── Slots ─────────────────────────────────────────────────
-
 slots: {}
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   sizing:
     - --aui-skeleton-width
@@ -62,20 +48,34 @@ tokens:
     - --aui-skeleton-highlight
   shape:
     - --aui-skeleton-radius
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-skeleton></aui-skeleton>
-    description: Default text line placeholder.
-
-  - html: <aui-skeleton type="circle"></aui-skeleton>
-    description: Circle placeholder for avatars.
-
-  - html: |
+  - description: Default text line placeholder
+    html: <aui-skeleton></aui-skeleton>
+  - description: Circle placeholder for avatars
+    html: <aui-skeleton type="circle"></aui-skeleton>
+  - description: Rectangle placeholder for images or cards
+    html: <aui-skeleton type="rect"></aui-skeleton>
+  - description: Size variants
+    html: |-
+      <aui-stack gap="2">
+        <aui-skeleton size="xs"></aui-skeleton>
+        <aui-skeleton size="sm"></aui-skeleton>
+        <aui-skeleton></aui-skeleton>
+        <aui-skeleton size="lg"></aui-skeleton>
+      </aui-stack>
+  - description: Multiple text lines with decreasing widths
+    html: |-
       <aui-stack gap="2">
         <aui-skeleton></aui-skeleton>
         <aui-skeleton style="--aui-skeleton-width: 80%"></aui-skeleton>
         <aui-skeleton style="--aui-skeleton-width: 60%"></aui-skeleton>
       </aui-stack>
-    description: Multiple text lines with decreasing widths.
+  - description: Avatar with text lines loading state
+    html: |-
+      <aui-stack direction="row" gap="3" align-items="center">
+        <aui-skeleton type="circle"></aui-skeleton>
+        <aui-stack gap="2" style="flex: 1">
+          <aui-skeleton></aui-skeleton>
+          <aui-skeleton style="--aui-skeleton-width: 60%"></aui-skeleton>
+        </aui-stack>
+      </aui-stack>

package/dist/docs/components/sparkline.yaml

@@ -2,54 +2,38 @@ 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".
-
+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
-
-# ── Component attributes ──────────────────────────────────
-
 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.
-
+    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: >
+    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 ─────────────────────────────────────────
-
+    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: >
+  description: |
     No child content. Bars are stamped by JS from the values attribute.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   - name: --aui-sparkline-height
     default: 2rem
@@ -60,29 +44,28 @@ tokens:
   - name: --aui-sparkline-bar-radius
     default: var(--aui-radius)
     description: Corner radius of each bar.
-
-# ── Accessibility ─────────────────────────────────────────
-
 a11y:
   role: img
   aria:
     aria-label: Derived from values attribute for screen readers.
-
-# ── Use cases ─────────────────────────────────────────────
-
 use-cases:
   - Inline trend indicator in table cells.
   - Dashboard metric sparkline beside a stat card.
   - Activity or usage micro-chart.
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-sparkline values="40,55,35,70,60,80,95"></aui-sparkline>
-    description: Default sparkline with last bar highlighted.
-
-  - html: <aui-sparkline values="60,45,55,50,70,65,85" highlight="max" color="2"></aui-sparkline>
-    description: Sparkline with max bar highlighted, color 2.
-
-  - html: <aui-sparkline values="30,50,40,60,55,45,50" highlight="none" color="3"></aui-sparkline>
-    description: All bars at full opacity, color 3.
+  - 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

@@ -2,48 +2,39 @@ 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.
-
+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 attributes ─────────────────────────────
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: false
     default: md
-    values: [xs, sm, md, lg]
+    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]
+    values:
+      - accent
+      - success
+      - warning
+      - danger
     description: Color of the spinning ring segment.
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: empty
   accepts: []
   required: false
-  description: >
+  description: |
     No content — spinner is a visual indicator only.
-
-# ── Slots ─────────────────────────────────────────────────
-
 slots: {}
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   sizing:
     - --aui-spinner-size
@@ -51,25 +42,33 @@ tokens:
   color:
     - --aui-spinner-track
     - --aui-spinner-fill
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-spinner></aui-spinner>
-    description: Default medium spinner.
-
-  - html: |
+  - 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: All four sizes side by side.
-
-  - html: |
+  - 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: Inline spinner with loading text.
+  - 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>