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

package/dist/docs/components/calendar-picker.yaml

@@ -2,15 +2,9 @@ name: aui-calendar-picker
 tag: aui-calendar-picker
 type: component
 summary: Compound date picker with trigger input and calendar popover.
-description: >
-  Combines a read-only trigger (styled like an input) with a popover
-  containing an aui-calendar for date selection. On date select the
-  popover closes, the trigger updates with a formatted date string,
-  and a change event fires. Supports min/max date constraints and
-  a configurable display format.
-
+description: |
+  Combines a read-only trigger (styled like an input) with a popover containing an aui-calendar for date selection. On date select the popover closes, the trigger updates with a formatted date string, and a change event fires. Supports min/max date constraints and a configurable display format.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
@@ -20,7 +14,7 @@ attributes:
   placeholder:
     syntax: key-value
     type: string
-    default: "Select date"
+    default: Select date
     description: Placeholder text shown when no date is selected.
   min:
     syntax: key-value
@@ -35,9 +29,9 @@ attributes:
   format:
     syntax: key-value
     type: string
-    default: "YYYY-MM-DD"
-    description: Display format for the selected date (e.g. MM/DD/YYYY).
-
+    default: medium
+    description: |
+      Display format for the selected date. Named presets use Intl.DateTimeFormat: "long" (March 21, 2026), "medium" (Mar 21, 2026), "short" (03/21/2026). Token-based formats also supported: YYYY-MM-DD, MM/DD/YYYY, etc.
 modifiers:
   disabled:
     syntax: boolean
@@ -45,7 +39,6 @@ modifiers:
   open:
     syntax: boolean
     description: Whether the calendar popover is currently open.
-
 a11y:
   role: combobox (trigger)
   keyboard:
@@ -54,7 +47,6 @@ a11y:
     ArrowDown: Opens the calendar popover.
     ArrowUp: Opens the calendar popover.
     Escape: Closes the calendar popover and returns focus to trigger.
-
 tokens:
   - name: --aui-calendar-picker-font-family
     default: var(--aui-font-family)
@@ -107,36 +99,25 @@ tokens:
   - name: --aui-calendar-picker-dropdown-shadow
     default: var(--aui-shadow-lg)
     description: Box shadow of the calendar dropdown.
-
 events:
   change:
     description: Fired when a date is selected. Detail contains { value, date }.
-
 dependencies:
   - aui-calendar
-
 examples:
-  - html: |
-      <aui-calendar-picker placeholder="Select date"></aui-calendar-picker>
-    description: Default date picker with placeholder.
-
-  - html: |
-      <aui-calendar-picker value="2026-03-15"></aui-calendar-picker>
-    description: Date picker with pre-selected date.
-
-  - html: |
+  - description: Default date picker with placeholder
+    html: <aui-calendar-picker placeholder="Select date"></aui-calendar-picker>
+  - description: Date picker with pre-selected date
+    html: <aui-calendar-picker value="2026-03-15"></aui-calendar-picker>
+  - description: Date picker with min/max constraints
+    html: |-
       <aui-calendar-picker
         value="2026-03-21"
         min="2026-01-01"
         max="2026-12-31"
         placeholder="Pick a date"
       ></aui-calendar-picker>
-    description: Date picker with min/max constraints.
-
-  - html: |
-      <aui-calendar-picker value="2026-03-21" format="MM/DD/YYYY"></aui-calendar-picker>
-    description: Date picker with custom display format.
-
-  - html: |
-      <aui-calendar-picker value="2026-03-21" disabled></aui-calendar-picker>
-    description: Disabled date picker.
+  - description: Date picker with custom display format (MM/DD/YYYY)
+    html: <aui-calendar-picker value="2026-03-21" format="MM/DD/YYYY"></aui-calendar-picker>
+  - description: Disabled date picker
+    html: <aui-calendar-picker value="2026-03-21" disabled></aui-calendar-picker>

package/dist/docs/components/calendar-range-picker.yaml

@@ -2,15 +2,9 @@ name: aui-calendar-range-picker
 tag: aui-calendar-range-picker
 type: component
 summary: Compound date range picker with trigger input and calendar popover.
-description: >
-  Combines a read-only trigger (styled like an input) with a popover
-  containing an aui-calendar in range selection mode. On range commit the
-  popover closes, the trigger updates with "Start -- End" text, and a
-  change event fires with { start, end } detail. Supports min/max date
-  constraints.
-
+description: |
+  Combines a read-only trigger (styled like an input) with a popover containing an aui-calendar in range selection mode. On range commit the popover closes, the trigger updates with "Start -- End" text, and a change event fires with { start, end } detail. Supports min/max date constraints.
 base: AgentElement
-
 attributes:
   start:
     syntax: key-value
@@ -25,7 +19,7 @@ attributes:
   placeholder:
     syntax: key-value
     type: string
-    default: "Select dates"
+    default: Select dates
     description: Placeholder text shown when no range is selected.
   min:
     syntax: key-value
@@ -37,7 +31,6 @@ attributes:
     type: string
     default: ""
     description: Maximum selectable date in ISO format. Dates after this are disabled.
-
 modifiers:
   disabled:
     syntax: boolean
@@ -45,7 +38,6 @@ modifiers:
   open:
     syntax: boolean
     description: Whether the calendar popover is currently open.
-
 a11y:
   role: combobox (trigger)
   keyboard:
@@ -54,7 +46,6 @@ a11y:
     ArrowDown: Opens the calendar popover.
     ArrowUp: Opens the calendar popover.
     Escape: Closes the calendar popover and returns focus to trigger.
-
 tokens:
   - name: --aui-calendar-range-picker-font-family
     default: var(--aui-font-family)
@@ -107,24 +98,18 @@ tokens:
   - name: --aui-calendar-range-picker-dropdown-shadow
     default: var(--aui-shadow-lg)
     description: Box shadow of the calendar dropdown.
-
 events:
   change:
     description: Fired when a range is fully selected. Detail contains { start, end }.
-
 dependencies:
   - aui-calendar
-
 examples:
-  - html: |
-      <aui-calendar-range-picker placeholder="Select dates"></aui-calendar-range-picker>
-    description: Default range picker with placeholder.
-
-  - html: |
-      <aui-calendar-range-picker start="2026-03-01" end="2026-03-15"></aui-calendar-range-picker>
-    description: Range picker with pre-selected range.
-
-  - html: |
+  - description: Default range picker with placeholder
+    html: <aui-calendar-range-picker placeholder="Select dates"></aui-calendar-range-picker>
+  - description: Range picker with pre-selected range
+    html: <aui-calendar-range-picker start="2026-03-01" end="2026-03-15"></aui-calendar-range-picker>
+  - description: Range picker with min/max constraints
+    html: |-
       <aui-calendar-range-picker
         start="2026-03-01"
         end="2026-03-15"
@@ -132,8 +117,5 @@ examples:
         max="2026-12-31"
         placeholder="Pick a range"
       ></aui-calendar-range-picker>
-    description: Range picker with min/max constraints.
-
-  - html: |
-      <aui-calendar-range-picker start="2026-03-01" end="2026-03-15" disabled></aui-calendar-range-picker>
-    description: Disabled range picker.
+  - description: Disabled range picker
+    html: <aui-calendar-range-picker start="2026-03-01" end="2026-03-15" disabled></aui-calendar-range-picker>

package/dist/docs/components/calendar.yaml

@@ -2,15 +2,9 @@ name: aui-calendar
 tag: aui-calendar
 type: component
 summary: Date picker with day, month, and year views.
-description: >
-  An interactive calendar for selecting dates. Supports single selection
-  and range selection with hover preview. Click the title to drill up
-  from day → month → year views. Keyboard navigable with arrow keys,
-  Home/End, PageUp/PageDown. Min and max attributes constrain the
-  selectable date range.
-
+description: |
+  An interactive calendar for selecting dates. Supports single selection and range selection with hover preview. Click the title to drill up from day → month → year views. Keyboard navigable with arrow keys, Home/End, PageUp/PageDown. Min and max attributes constrain the selectable date range.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
@@ -30,12 +24,10 @@ attributes:
   range:
     syntax: boolean
     description: Enables range selection (click start, hover to preview, click to commit).
-
 modifiers:
   disabled:
     syntax: boolean
     description: Disables all interaction.
-
 a11y:
   role: group
   keyboard:
@@ -49,7 +41,6 @@ a11y:
     PageDown: Next month (Shift next year).
     Enter: Select focused date.
     Space: Select focused date.
-
 tokens:
   - name: --aui-calendar-gap
     default: calc(var(--aui-space) * 2)
@@ -109,7 +100,7 @@ tokens:
     default: var(--aui-accent, var(--aui-solid))
     description: Background color for selected cells.
   - name: --aui-calendar-selected-color
-    default: var(--aui-solid-ink, #fff)
+    default: var(--aui-solid-ink,
     description: Text color for selected cells.
   - name: --aui-calendar-selected-font-weight
     default: var(--aui-font-weight-semibold)
@@ -126,26 +117,17 @@ tokens:
   - name: --aui-calendar-header-title-color
     default: var(--aui-ink-strong)
     description: Text color for the month/year title button.
-
 events:
   aui:change:
     description: Fired on single date selection. Detail contains { value }.
   aui:range-select:
     description: Fired on range commit. Detail contains { start, end }.
-
 examples:
-  - html: |
-      <aui-calendar></aui-calendar>
-    description: Default calendar — current month, no selection.
-
-  - html: |
-      <aui-calendar value="2026-03-17"></aui-calendar>
-    description: Calendar with a pre-selected date.
-
-  - html: |
-      <aui-calendar min="2026-03-10" max="2026-03-25"></aui-calendar>
-    description: Constrained date range — only March 10-25 selectable.
-
-  - html: |
-      <aui-calendar range></aui-calendar>
-    description: Range selection mode — click start, hover preview, click to commit.
+  - description: Default calendar — current month, no selection
+    html: <aui-calendar></aui-calendar>
+  - description: Calendar with a pre-selected date
+    html: <aui-calendar value="2026-03-17"></aui-calendar>
+  - description: Constrained date range — only March 10-25 selectable
+    html: <aui-calendar min="2026-03-10" max="2026-03-25"></aui-calendar>
+  - description: Range selection mode — click start, hover preview, click to commit
+    html: <aui-calendar range></aui-calendar>

package/dist/docs/components/canvas.yaml

@@ -2,100 +2,88 @@ name: aui-canvas
 tag: aui-canvas
 type: component
 summary: Versatile preview surface with pan/zoom, backgrounds, and editor layout slots.
-description: >
-  A composable canvas surface that serves three roles:
-  1. Simple preview container with background patterns (replaces .block-render)
-  2. Infinite canvas with pan and zoom for visual editors
-  3. Full editor layout with leading/trailing panels and floating toolbars
-
-  The canvas uses a slot-based architecture. Content goes in the default
-  slot. Panels attach via leading/trailing slots. Floating UI (toolbars,
-  indicators) uses float-top/bottom/left/right slots positioned absolutely
-  within the canvas viewport.
-
-  Pan uses pointer-captured drag on the background. Zoom uses wheel events.
-  Both expose CSS custom properties (--_canvas-x, --_canvas-y, --_canvas-zoom)
-  so content transforms are CSS-driven.
-
+description: |
+  A composable canvas surface that serves three roles: 1. Simple preview container with background patterns (replaces .block-render) 2. Infinite canvas with pan and zoom for visual editors 3. Full editor layout with leading/trailing panels and floating toolbars
+  The canvas uses a slot-based architecture. Content goes in the default slot. Panels attach via leading/trailing slots. Floating UI (toolbars, indicators) uses float-top/bottom/left/right slots positioned absolutely within the canvas viewport.
+  Pan uses pointer-captured drag on the background. Zoom uses wheel events. Both expose CSS custom properties (--_canvas-x, --_canvas-y, --_canvas-zoom) so content transforms are CSS-driven.
 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.
-
 attributes:
   background:
     syntax: key-value
     type: enum
-    values: [none, grid, dots]
+    values:
+      - none
+      - grid
+      - dots
     default: none
-    description: >
-      Background pattern. grid = checkerboard squares.
-      dots = dot matrix. none = transparent.
-
+    description: |
+      Background pattern. grid = checkerboard squares. dots = dot matrix. none = transparent.
   orientation:
     syntax: key-value
     type: enum
-    values: [horizontal, vertical]
+    values:
+      - horizontal
+      - vertical
     default: horizontal
-    description: >
-      Layout direction. horizontal = [leading][content][trailing].
-      vertical = [content] over [leading][trailing].
-
+    description: |
+      Layout direction. horizontal = [leading][content][trailing]. vertical = [content] over [leading][trailing].
 modifiers:
   pan-enabled:
     syntax: boolean
     description: Enable click-and-drag panning of the canvas content.
-
   zoom-enabled:
     syntax: boolean
     description: Enable scroll-to-zoom on the canvas content.
-
   infinite:
     syntax: boolean
-    description: >
-      Infinite canvas mode. Content is not constrained to the
-      viewport bounds. Combines pan-enabled + zoom-enabled.
-
+    description: |
+      Infinite canvas mode. Content is not constrained to the viewport bounds. Combines pan-enabled + zoom-enabled.
   bordered:
     syntax: boolean
     description: Adds a visible border around the canvas.
-
 slots:
   default:
-    accepts: [any]
+    accepts:
+      - any
     required: true
     description: Main canvas content.
-
   leading:
-    accepts: [any]
+    accepts:
+      - any
     description: Left panel (horizontal) or top panel (vertical).
-
   trailing:
-    accepts: [any]
+    accepts:
+      - any
     description: Right panel (horizontal) or bottom panel (vertical).
-
   float-top:
-    accepts: [any]
+    accepts:
+      - any
     description: Floating toolbar at top center of the viewport.
-
   float-bottom:
-    accepts: [any]
+    accepts:
+      - any
     description: Floating toolbar at bottom center of the viewport.
-
   float-left:
-    accepts: [any]
+    accepts:
+      - any
     description: Floating indicator at left center of the viewport.
-
   float-right:
-    accepts: [any]
+    accepts:
+      - any
     description: Floating indicator at right center of the viewport.
-
 tokens:
   - name: --aui-canvas-background
     default: var(--aui-doc)
@@ -109,23 +97,21 @@ tokens:
   - name: --aui-canvas-focus-color
     default: var(--aui-focus)
     description: Focus ring color when the canvas is focused.
-
 events:
   aui:canvas-pan:
     description: Fires on pan change. Detail contains { x, y }.
   aui:canvas-zoom:
     description: Fires on zoom change. Detail contains { zoom }.
-
 a11y:
   role: region
   keyboard:
     "0": Reset zoom to 100%.
-    "+": Zoom in.
+    +: Zoom in.
     "-": Zoom out.
     Escape: Reset pan and zoom.
-
 examples:
-  - html: |
+  - description: Simple preview with grid background
+    html: |-
       <aui-canvas bordered background="grid" style="height: 12rem;">
         <aui-container kind="card" bordered max-width="xs">
           <aui-inset>
@@ -134,9 +120,8 @@ examples:
           </aui-inset>
         </aui-container>
       </aui-canvas>
-    description: Simple preview with grid background.
-
-  - html: |
+  - description: Infinite canvas with pan and zoom
+    html: |-
       <aui-canvas bordered background="dots" infinite style="height: 20rem;">
         <div style="position: absolute; top: 5rem; left: 5rem;">
           <aui-container kind="widget" bordered accent>
@@ -149,9 +134,8 @@ examples:
           </aui-container>
         </div>
       </aui-canvas>
-    description: Infinite canvas with pan and zoom.
-
-  - html: |
+  - description: Full editor layout with panels and floating toolbar
+    html: |-
       <aui-canvas bordered background="dots" style="height: 24rem;">
         <div slot="leading" style="width: 14rem; background: var(--aui-panel); border-right: 1px solid var(--aui-border-muted); padding: 1rem;">
           <aui-heading size="sm">Sidebar</aui-heading>
@@ -166,4 +150,3 @@ examples:
           <aui-heading size="sm">Properties</aui-heading>
         </div>
       </aui-canvas>
-    description: Full editor layout with panels and floating toolbar.

package/dist/docs/components/checkbox.yaml

@@ -2,90 +2,86 @@ name: aui-checkbox
 tag: aui-checkbox
 type: component
 summary: Checkbox with custom check and indeterminate indicators.
-description: >
-  Custom checkbox. A hidden native input participates in forms.
-  A visual [data-box] element renders the check/indeterminate icon
-  via ::before pseudo-element. Label rendered via CSS
-  ::after { content: attr(label) } — JS only sets aria-label for
-  accessibility, no DOM stamping for the visible label.
-
+description: |
+  Custom checkbox. A hidden native input participates in forms. A visual [data-box] element renders the check/indeterminate icon via ::before pseudo-element. Label rendered via CSS ::after { content: attr(label) } — JS only sets aria-label for accessibility, no DOM stamping for the visible label.
 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: Controls checkbox and label size.
-
   intent:
     syntax: boolean
     exclusive: true
     cascades: true
     default: neutral
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Color family for the checked state fill.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   checked:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the checkbox is checked.
-
   indeterminate:
     syntax: boolean
     type: boolean
     default: false
     description: Shows a dash indicator instead of a check.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks as required for form validation.
-
   label:
     syntax: key-value
     type: string
     default: ""
     description: Label text displayed next to the checkbox.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form submission name.
-
   value:
     syntax: key-value
     type: string
-    default: "on"
+    default: on
     description: Form submission value when checked.
-
 content:
   model: inline
-  accepts: [input]
+  accepts:
+    - input
   required: false
-  description: >
-    Auto-stamps hidden input for form participation. Label is
-    rendered purely via CSS ::after on :scope — no stamped span.
-
+  description: |
+    Auto-stamps hidden input for form participation. Label is rendered purely via CSS ::after on :scope — no stamped span.
 composition:
-  parents: [aui-field, aui-stack, form, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Use inside aui-field for labeled form checkboxes, or standalone
-    with the label attribute. Group in aui-stack for checkbox lists.
-
+  context: |
+    Use inside aui-field for labeled form checkboxes, or standalone with the label attribute. Group in aui-stack for checkbox lists.
 a11y:
   role: checkbox
   keyboard:
@@ -94,11 +90,9 @@ a11y:
   aria:
     aria-checked: true, false, or mixed (indeterminate).
     aria-disabled: Reflected from disabled.
-
 events:
   change:
     description: Fires when checked state changes.
-
 tokens:
   - name: --aui-checkbox-gap
     default: calc(var(--aui-space) * 2)
@@ -145,27 +139,21 @@ tokens:
   - name: --aui-checkbox-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Box border color when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [checked], [indeterminate], [disabled] — all visual via attributes"
     - "CG2: ::before on [data-box] for check/dash icon"
     - "CG3: ::after { content: attr(label) } — label rendered in CSS, overflow: hidden on ::after only"
     - "CG4: gap uses 2 * space (tightened from 3 * space)"
-    - ":has(> input:focus-visible) — focus ring on visual box"
-
+    - :has(> input:focus-visible) — focus ring on visual box
 examples:
-  - html: <aui-checkbox label="Accept terms"></aui-checkbox>
-    description: Default unchecked checkbox.
-
-  - html: <aui-checkbox label="Newsletter" checked></aui-checkbox>
-    description: Pre-checked checkbox.
-
-  - html: <aui-checkbox label="Select all" indeterminate></aui-checkbox>
-    description: Indeterminate state.
-
-  - html: <aui-checkbox label="Unavailable" disabled></aui-checkbox>
-    description: Disabled checkbox.
-
-  - html: <aui-checkbox label="Enabled" checked accent></aui-checkbox>
-    description: Accent-colored checked checkbox.
+  - description: Default unchecked checkbox
+    html: <aui-checkbox label="Accept terms"></aui-checkbox>
+  - description: Pre-checked checkbox
+    html: <aui-checkbox label="Newsletter" checked></aui-checkbox>
+  - description: Indeterminate state
+    html: <aui-checkbox label="Select all" indeterminate></aui-checkbox>
+  - description: Disabled checkbox
+    html: <aui-checkbox label="Unavailable" disabled></aui-checkbox>
+  - description: Accent-colored checked checkbox
+    html: <aui-checkbox label="Enabled" checked accent></aui-checkbox>