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

package/dist/docs/components/color-slider.yaml

@@ -0,0 +1,153 @@
+name: aui-color-slider
+tag: aui-color-slider
+type: component
+summary: Single-axis gradient slider for an OKLCH color channel (hue, chroma, lightness, or alpha).
+description: |
+  A one-dimensional slider that controls a specific OKLCH color channel. The track renders a computed gradient using hex color stops for the selected channel:
+  - **hue** — perceptual rainbow at current lightness and chroma (0-360, step 1)
+  - **chroma** — saturation range at current L and H (0-0.4, step 0.004)
+  - **lightness** — luminance range at current C and H (0-1, step 0.01)
+  - **alpha** — transparency gradient over checkerboard at current color (0-1, step 0.01)
+
+  Pointer drag and keyboard arrow navigation with Shift for 10x step. Values are snapped to the channel step size.
+base: AgentElement
+attributes:
+  channel:
+    syntax: key-value
+    type: string
+    default: hue
+    description: Which color channel to control (hue, chroma, lightness, alpha).
+  value:
+    syntax: key-value
+    type: string
+    default: "0"
+    description: Current channel value.
+  min:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Minimum value. Defaults to channel minimum (0).
+  max:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Maximum value. Defaults to channel maximum (360 for hue, 0.4 for chroma, 1 for lightness/alpha).
+  hue:
+    syntax: key-value
+    type: string
+    default: "0"
+    description: Reference hue for gradient rendering (used by chroma/lightness/alpha channels).
+  chroma:
+    syntax: key-value
+    type: string
+    default: "0.15"
+    description: Reference chroma for gradient rendering (used by hue/lightness/alpha channels).
+  lightness:
+    syntax: key-value
+    type: string
+    default: "0.65"
+    description: Reference lightness for gradient rendering (used by hue/chroma/alpha channels).
+  disabled:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Prevents interaction. Dims visually.
+a11y:
+  role: slider (on thumb element)
+  keyboard:
+    ArrowRight: "Increase by step (Shift: 10x)."
+    ArrowLeft: "Decrease by step (Shift: 10x)."
+    Home: Set to minimum.
+    End: Set to maximum.
+  aria:
+    aria-valuenow: Current value.
+    aria-valuemin: Channel minimum.
+    aria-valuemax: Channel maximum.
+    aria-label: Channel name (capitalized).
+tokens:
+  - name: --aui-color-slider-height
+    default: var(--aui-color-picker-slider-height, 16px)
+    description: Total height of the slider.
+  - name: --aui-color-slider-track-radius
+    default: var(--aui-color-picker-border-radius, var(--aui-radius-sm, 4px))
+    description: Track corner radius.
+  - name: --aui-color-slider-thumb-size
+    default: 16px
+    description: Thumb diameter.
+  - name: --aui-color-slider-thumb-border
+    default: 2px solid white
+    description: Thumb border.
+  - name: --aui-color-slider-thumb-shadow
+    default: 0 0 0 1px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2)
+    description: Thumb drop shadow.
+internal-structure:
+  - element: div
+    attr: data-color-slider-track
+    description: Gradient track element. Background set dynamically via computed hex stops.
+  - element: div
+    attr: data-color-slider-thumb
+    description: Draggable thumb positioned via --_pct custom property.
+composition:
+  parents:
+    - aui-color-picker
+    - aui-stack
+    - aui-container
+    - div
+  children: []
+  context: |
+    Used inside aui-color-picker in labeled rows (H/C/L/A). Multiple sliders can also be stacked independently for individual channel editing.
+examples:
+  - description: Hue slider (0-360 at L=0.65 C=0.15)
+    html: <aui-color-slider channel="hue" value="250" lightness="0.65" chroma="0.15"></aui-color-slider>
+  - description: Hue slider at 0 (red)
+    html: |-
+      <aui-color-slider channel="hue" value="0" lightness="0.65" chroma="0.2"></aui-color-slider>
+
+      <!-- ===============================================================
+           CHROMA CHANNEL
+           =============================================================== -->
+  - description: Chroma slider at hue 250
+    html: <aui-color-slider channel="chroma" value="0.2" hue="250" lightness="0.65"></aui-color-slider>
+  - description: Chroma slider at hue 145 (green)
+    html: |-
+      <aui-color-slider channel="chroma" value="0.18" hue="145" lightness="0.7"></aui-color-slider>
+
+      <!-- ===============================================================
+           LIGHTNESS CHANNEL
+           =============================================================== -->
+  - description: Lightness slider at hue 250
+    html: |-
+      <aui-color-slider channel="lightness" value="0.65" hue="250" chroma="0.2"></aui-color-slider>
+
+      <!-- ===============================================================
+           ALPHA CHANNEL
+           =============================================================== -->
+  - description: Alpha slider with checkerboard
+    html: |-
+      <aui-color-slider channel="alpha" value="0.8" hue="250" chroma="0.2" lightness="0.65"></aui-color-slider>
+
+      <!-- ===============================================================
+           CUSTOM WIDTH
+           =============================================================== -->
+  - description: Full-width hue slider
+    html: |-
+      <aui-color-slider channel="hue" value="200" lightness="0.65" chroma="0.15" style="width: 100%;"></aui-color-slider>
+
+      <!-- ===============================================================
+           DISABLED
+           =============================================================== -->
+  - description: Disabled hue slider
+    html: |-
+      <aui-color-slider channel="hue" value="250" lightness="0.65" chroma="0.15" disabled></aui-color-slider>
+
+      <!-- ===============================================================
+           GROUP -- all channels together
+           =============================================================== -->
+  - description: All four channel sliders together
+    html: |-
+      <aui-stack gap="3">
+        <aui-color-slider channel="hue" value="250" lightness="0.65" chroma="0.2" style="width: 100%;"></aui-color-slider>
+        <aui-color-slider channel="chroma" value="0.2" hue="250" lightness="0.65" style="width: 100%;"></aui-color-slider>
+        <aui-color-slider channel="lightness" value="0.65" hue="250" chroma="0.2" style="width: 100%;"></aui-color-slider>
+        <aui-color-slider channel="alpha" value="1" hue="250" chroma="0.2" lightness="0.65" style="width: 100%;"></aui-color-slider>
+      </aui-stack>

package/dist/docs/components/color-swatch.yaml

@@ -0,0 +1,98 @@
+name: aui-color-swatch
+tag: aui-color-swatch
+type: element
+summary: Color preview square with checkerboard transparency support.
+description: |
+  CSS-only element that renders a small color preview with a checkerboard background for transparency support. Use in color palettes, swatch pickers, and color field previews. Color is set via --aui-color-swatch-value custom property.
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: md
+    values:
+      - sm
+      - md
+      - lg
+    description: |
+      Swatch dimensions. sm = 16px, md = 24px (default), lg = 32px.
+modifiers:
+  round:
+    syntax: boolean
+    description: |
+      Renders as a circle instead of a rounded square.
+  selected:
+    syntax: boolean
+    description: |
+      Shows a selection ring around the swatch using box-shadow with accent color.
+custom_properties:
+  --aui-color-swatch-value:
+    default: transparent
+    description: The color to display in the swatch.
+content:
+  model: empty
+  accepts: []
+  required: false
+  description: |
+    No content — swatch is a visual indicator only. Color is set via the --aui-color-swatch-value custom property.
+composition:
+  parents:
+    - aui-stack
+    - aui-wrap
+    - aui-grid
+    - div
+  children: null
+  context: |
+    Use in color palette grids, inline color previews, and swatch picker rows. Group multiple swatches in aui-wrap for wrapping palette layouts.
+tokens:
+  sizing:
+    - width / height (16px, 24px, 32px)
+  color:
+    - --aui-border
+    - --aui-control
+    - --aui-surface
+    - --aui-accent-500
+    - --aui-color-swatch-value
+  shape:
+    - --aui-radius-sm
+examples:
+  - description: Basic blue swatch
+    html: '<aui-color-swatch style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>'
+  - description: Color palette row
+    html: |-
+      <aui-wrap gap="2">
+        <aui-color-swatch style="--aui-color-swatch-value: #ef4444"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #f97316"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #eab308"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #22c55e"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #a855f7"></aui-color-swatch>
+      </aui-wrap>
+  - description: Round swatches
+    html: |-
+      <aui-wrap gap="2">
+        <aui-color-swatch round style="--aui-color-swatch-value: #ef4444"></aui-color-swatch>
+        <aui-color-swatch round style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+        <aui-color-swatch round style="--aui-color-swatch-value: #22c55e"></aui-color-swatch>
+      </aui-wrap>
+  - description: All three sizes
+    html: |-
+      <aui-wrap gap="2">
+        <aui-color-swatch size="sm" style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+        <aui-color-swatch size="lg" style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+      </aui-wrap>
+  - description: Transparent colors showing checkerboard
+    html: |-
+      <aui-wrap gap="2">
+        <aui-color-swatch style="--aui-color-swatch-value: rgba(59, 130, 246, 0.5)"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: rgba(239, 68, 68, 0.3)"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: transparent"></aui-color-swatch>
+      </aui-wrap>
+  - description: Selected state with accent ring
+    html: |-
+      <aui-wrap gap="2">
+        <aui-color-swatch selected style="--aui-color-swatch-value: #3b82f6"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #ef4444"></aui-color-swatch>
+        <aui-color-swatch style="--aui-color-swatch-value: #22c55e"></aui-color-swatch>
+      </aui-wrap>

package/dist/docs/components/command.yaml

@@ -2,14 +2,9 @@ name: aui-command
 tag: aui-command
 type: component
 summary: Command palette with search, keyboard navigation, and grouping.
-description: >
-  Root component for the command palette. Composes aui-command-input
-  (search), aui-command-list (scrollable results), aui-command-item
-  (actions), aui-command-group (grouping), and aui-command-empty
-  (no results). Place inside aui-dialog for modal usage.
-
+description: |
+  Root component for the command palette. Composes aui-command-input (search), aui-command-list (scrollable results), aui-command-item (actions), aui-command-group (grouping), and aui-command-empty (no results). Place inside aui-dialog for modal usage.
 base: AgentElement
-
 a11y:
   role: search
   keyboard:
@@ -19,13 +14,11 @@ a11y:
     End: Highlight last item.
     Enter: Select highlighted item.
     Escape: Dismiss (fires dismiss event).
-
 events:
   select:
     description: Fired when an item is selected. detail contains value, label, item.
   dismiss:
     description: Fired on Escape key. Parent dialog can listen to close.
-
 tokens:
   - name: --aui-command-background
     default: var(--aui-modal, var(--aui-doc))
@@ -42,13 +35,17 @@ tokens:
   - name: --aui-command-gap
     default: var(--aui-space)
     description: Gap between command palette sections.
-
 composition:
-  parents: [aui-dialog, any]
-  children: [aui-command-input, aui-command-list, aui-command-empty]
-
+  parents:
+    - aui-dialog
+    - any
+  children:
+    - aui-command-input
+    - aui-command-list
+    - aui-command-empty
 examples:
-  - html: |
+  - description: Command palette with grouped items and search
+    html: |-
       <aui-command max-width="prose">
         <aui-command-input placeholder="Type a command…"></aui-command-input>
         <aui-command-list>
@@ -65,9 +62,8 @@ examples:
         </aui-command-list>
         <aui-command-empty>No results found.</aui-command-empty>
       </aui-command>
-    description: Command palette with grouped items and search.
-
-  - html: |
+  - description: Simple flat command palette
+    html: |-
       <aui-command max-width="md">
         <aui-command-input placeholder="Search actions…"></aui-command-input>
         <aui-command-list>
@@ -78,4 +74,3 @@ examples:
         </aui-command-list>
         <aui-command-empty>No matching commands.</aui-command-empty>
       </aui-command>
-    description: Simple flat command palette.

package/dist/docs/components/container.yaml

@@ -2,126 +2,143 @@ name: aui-container
 tag: aui-container
 type: component
 summary: Unified card and panel surface.
-description: >
-  The standard surface element for cards, panels, and sections.
-  Replaces separate Card and Panel components — a single element
-  with bordered, elevation, shadow, and interactive modifiers. Composes
-  aui-header, aui-content, aui-footer as children.
-
+description: |
+  The standard surface element for cards, panels, and sections. Replaces separate Card and Panel components — a single element with bordered, elevation, shadow, and interactive modifiers. Composes aui-header, aui-content, aui-footer as children.
 base: AgentElement
-
 presentational:
   size:
     syntax: key-value
     attribute: size
     cascades: true
     default: medium
-    values: [xs, sm, md, lg, xl]
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
     description: Cascades size to all children (header, body, footer).
-
   density:
     syntax: key-value
     attribute: density
     cascades: true
     default: regular
-    values: [compact, spacious]
+    values:
+      - compact
+      - spacious
     description: Cascades density to all children.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Cascades color family to all children.
-
   radius:
     syntax: boolean
     exclusive: true
     cascades: true
     default: medium
-    values: [sharp, round]
+    values:
+      - sharp
+      - round
     description: Controls corner radius of the container.
-
 attributes:
   kind:
     syntax: key-value
     type: enum
-    values: [widget, card, panel]
+    values:
+      - widget
+      - card
+      - panel
     default: card
-    description: >
-      Sets the padding and gap scale for all children.
-      widget: 0.75rem (compact, 1/6–1/4 page).
-      card: 1rem (default, 1/4–1/3 page).
-      panel: 1.75rem (spacious, 1/3–3/4 page, modals).
-
+    description: |
+      Sets the padding and gap scale for all children. widget: 0.75rem (compact, 1/6–1/4 page). card: 1rem (default, 1/4–1/3 page). panel: 1.75rem (spacious, 1/3–3/4 page, modals).
   href:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Navigation target when interactive. Clicking the container
-      navigates to this URL.
-
+    description: |
+      Navigation target when interactive. Clicking the container navigates to this URL.
   elevation:
     syntax: key-value
     type: enum
-    values: ["1", "2", "3", "4", "5", "6", "7"]
+    values:
+      - "1"
+      - "2"
+      - "3"
+      - "4"
+      - "5"
+      - "6"
+      - "7"
     default: ""
-    description: >
-      Surface brightness level. 1=doc (dimmest) through
-      7=modal (brightest). Controls background color.
-
+    description: |
+      Surface brightness level. 1=doc (dimmest) through 7=modal (brightest). Controls background color.
   shadow:
     syntax: key-value
     type: enum
-    values: ["1", "2", "3"]
+    values:
+      - "1"
+      - "2"
+      - "3"
     default: ""
-    description: >
+    description: |
       Shadow depth. 1=subtle, 2=medium, 3=prominent.
-
 modifiers:
   bordered:
     syntax: boolean
     description: Adds a visible border around the container.
-
   interactive:
     syntax: boolean
-    description: >
+    description: |
       Makes the container clickable with hover/active states.
-
 content:
   model: block
-  accepts: [aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-grid, div, p, any]
+  accepts:
+    - aui-header
+    - aui-content
+    - aui-footer
+    - aui-inset
+    - aui-stack
+    - aui-grid
+    - div
+    - p
+    - any
   required: true
-  description: >
-    Typically aui-header + aui-content + aui-footer for structured
-    cards. Or aui-inset for simple content cards. Child headers
-    and footers automatically get separator borders.
-
+  description: |
+    Typically aui-header + aui-content + aui-footer for structured cards. Or aui-inset for simple content cards. Child headers and footers automatically get separator borders.
 slots:
   default:
-    accepts: [any]
+    accepts:
+      - any
     required: true
     description: Container content.
-
 composition:
-  parents: [aui-stack, aui-grid, div, section, main]
+  parents:
+    - aui-stack
+    - aui-grid
+    - div
+    - section
+    - main
   children:
-    typical: [aui-header, aui-content, aui-footer, aui-inset]
-    pattern: >
-      The standard card pattern is header + body + footer.
-      For simple content, use aui-inset directly.
-  context: >
-    Use for cards in grids, settings panels, dashboard tiles,
-    detail panes. The bordered modifier is the most common —
-    shadow/elevation is for floating/overlay surfaces.
-
+    typical:
+      - aui-header
+      - aui-content
+      - aui-footer
+      - aui-inset
+    pattern: |
+      The standard card pattern is header + body + footer. For simple content, use aui-inset directly.
+  context: |
+    Use for cards in grids, settings panels, dashboard tiles, detail panes. The bordered modifier is the most common — shadow/elevation is for floating/overlay surfaces.
 constraints:
   - when: interactive
     require: href or click handler
     reason: Interactive containers need a destination or action.
-
 a11y:
   role: When interactive, role="button" is set automatically.
   keyboard:
@@ -130,11 +147,9 @@ a11y:
   focus:
     default: Not focusable unless interactive.
     interactive: tabindex="0".
-
 events:
   click:
     description: Fires on interactive containers. Navigates to href if set.
-
 tokens:
   - name: --aui-container-background
     default: var(--aui-card, var(--aui-doc))
@@ -145,9 +160,9 @@ tokens:
   - name: --aui-container-font-size
     default: var(--aui-font-lg)
     description: Base font size for the container.
-
 examples:
-  - html: |
+  - description: Card kind — Settings form (1.25rem padding)
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <aui-stack gap="1">
@@ -176,9 +191,8 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Card kind — Settings form (1.25rem padding).
-
-  - html: |
+  - description: Widget kind — Compact dashboard stat cards (0.75rem padding)
+    html: |-
       <aui-stack direction="row" gap="3" style="flex-wrap: wrap;">
         <aui-container kind="widget" bordered style="flex: 1; min-width: 12rem;">
           <aui-inset>
@@ -214,9 +228,8 @@ examples:
           </aui-inset>
         </aui-container>
       </aui-stack>
-    description: Widget kind — Compact dashboard stat cards (0.75rem padding).
-
-  - html: |
+  - description: Panel kind — Spacious member list (1.75rem padding)
+    html: |-
       <aui-container kind="panel" bordered max-width="xl">
         <aui-header>
           <span slot="leading">
@@ -261,9 +274,8 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Panel kind — Spacious member list (1.75rem padding).
-
-  - html: |
+  - description: Elevated success card with centered content
+    html: |-
       <aui-container kind="card" bordered shadow="2" success max-width="md">
         <aui-inset>
           <aui-stack gap="4" align-items="center" style="text-align: center;">
@@ -274,9 +286,8 @@ examples:
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Elevated success card with centered content.
-
-  - html: |
+  - description: Widget kind — Compact clickable navigation card
+    html: |-
       <aui-container kind="widget" bordered interactive href="#" max-width="sm">
         <aui-inset>
           <aui-stack direction="row" gap="2" align-items="center">
@@ -289,4 +300,3 @@ examples:
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Widget kind — Compact clickable navigation card.