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

package/dist/docs/components/field.yaml

@@ -2,87 +2,76 @@ name: aui-field
 tag: aui-field
 type: element
 summary: Form field wrapper with label, description, and error.
-description: >
-  Wraps a form control with a label, optional description, and
-  error message. All text is rendered CSS-first via content: attr()
-  from HTML attributes — zero JavaScript stamping required. Uses
-  display: flex with column direction, so child controls (aui-input,
-  aui-textarea, aui-select) stretch to full width automatically —
-  no width="full" needed on the child.
-
-# ── Component attributes ──────────────────────────────────
-
+description: |
+  Wraps a form control with a label, optional description, and error message. All text is rendered CSS-first via content: attr() from HTML attributes — zero JavaScript stamping required. Uses display: flex with column direction, so child controls (aui-input, aui-textarea, aui-select) stretch to full width automatically — no width="full" needed on the child.
 attributes:
   label:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Field label text. Rendered via ::before { content: attr(label) }.
-      No JS needed — CSS reads the attribute directly.
-
+    description: |
+      Field label text. Rendered via ::before { content: attr(label) }. No JS needed — CSS reads the attribute directly.
   description:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Help text below the control. Rendered via ::after.
-      Replaced by error text when error attribute is set.
-
+    description: |
+      Help text below the control. Rendered via ::after. Replaced by error text when error attribute is set.
   error:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Error message. When set, replaces description text and
-      cascades danger intent to child controls via CSS custom
-      properties.
-
+    description: |
+      Error message. When set, replaces description text and cascades danger intent to child controls via CSS custom properties.
   required:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      Appends " *" to the label text via CSS content concatenation.
-      Also sets the required constraint on the wrapped control.
-
+    description: |
+      Appends " *" to the label text via CSS content concatenation. Also sets the required constraint on the wrapped control.
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Dims the field and disables pointer events.
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: block
-  accepts: [aui-input, aui-textarea, aui-checkbox, aui-switch, aui-select, aui-radio-group]
+  accepts:
+    - aui-input
+    - aui-textarea
+    - aui-checkbox
+    - aui-switch
+    - aui-select
+    - aui-radio-group
   required: true
-  description: >
-    Exactly one form control as the direct child. The field wrapper
-    provides the label and messages; the control provides the input.
-
-# ── Slots ─────────────────────────────────────────────────
-
+  description: |
+    Exactly one form control as the direct child. The field wrapper provides the label and messages; the control provides the input.
 slots:
   default:
-    accepts: [aui-input, aui-textarea, aui-checkbox, aui-switch, aui-select]
+    accepts:
+      - aui-input
+      - aui-textarea
+      - aui-checkbox
+      - aui-switch
+      - aui-select
     required: true
     description: The form control.
-
-# ── Composition ───────────────────────────────────────────
-
 composition:
-  parents: [aui-stack, aui-grid, form, div, section]
-  children: [aui-input, aui-textarea, aui-checkbox, aui-switch, aui-select, aui-radio-group]
-  context: >
-    Use inside forms, settings panels, registration/login pages.
-    Stack multiple aui-field elements vertically in an aui-stack.
-    The field handles layout (label above, description below);
-    the control handles input behavior.
-
-# ── CSS implementation notes ──────────────────────────────
-
+  parents:
+    - aui-stack
+    - aui-grid
+    - form
+    - div
+    - section
+  children:
+    - aui-input
+    - aui-textarea
+    - aui-checkbox
+    - aui-switch
+    - aui-select
+    - aui-radio-group
+  context: |
+    Use inside forms, settings panels, registration/login pages. Stack multiple aui-field elements vertically in an aui-stack. The field handles layout (label above, description below); the control handles input behavior.
 css-notes:
   attr-bindings:
     - "::before { content: attr(label) } — AB2: label from attribute"
@@ -93,9 +82,6 @@ css-notes:
     - "[error] cascades --aui-stroke to danger color"
     - "[disabled] dims with opacity"
     - "[required] appends asterisk to label"
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   - name: --aui-field-gap
     default: calc(var(--aui-space) * 2)
@@ -121,36 +107,29 @@ tokens:
   - name: --aui-field-error-color
     default: var(--aui-danger, oklch(0.65 0.2 25))
     description: Error message text color.
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: |
+  - description: Basic field with label and input
+    html: |-
       <aui-field label="Email">
         <aui-input type="email" placeholder="you@example.com"></aui-input>
       </aui-field>
-    description: Basic field with label and input.
-
-  - html: |
+  - description: Field with description text
+    html: |-
       <aui-field label="Password" description="Must be at least 8 characters.">
         <aui-input type="password" placeholder="Enter password"></aui-input>
       </aui-field>
-    description: Field with description text.
-
-  - html: |
+  - description: Required field — label shows asterisk
+    html: |-
       <aui-field label="Username" required>
         <aui-input placeholder="Choose a username"></aui-input>
       </aui-field>
-    description: Required field — label shows asterisk.
-
-  - html: |
+  - description: Field with error state
+    html: |-
       <aui-field label="Email" error="This email is already registered.">
         <aui-input type="email" value="taken@example.com"></aui-input>
       </aui-field>
-    description: Field with error state.
-
-  - html: |
+  - description: Disabled field
+    html: |-
       <aui-field label="Name" disabled>
         <aui-input value="Read only" disabled></aui-input>
       </aui-field>
-    description: Disabled field.

package/dist/docs/components/fieldset.yaml

@@ -0,0 +1,92 @@
+name: aui-fieldset
+tag: aui-fieldset
+type: element
+summary: Groups form fields under a legend heading with consistent spacing.
+description: |
+  CSS-only fieldset element that provides consistent legend positioning, border treatment, and spacing. Avoids the cross-browser rendering quirks of the native fieldset element. Legend text is rendered via the legend attribute using ::before.
+presentational:
+  legend:
+    syntax: key-value
+    attribute: legend
+    cascades: false
+    default: null
+    description: Heading text for the group, rendered via CSS attr().
+  description:
+    syntax: key-value
+    attribute: description
+    cascades: false
+    default: null
+    description: Optional description text below the legend.
+modifiers:
+  borderless:
+    syntax: boolean
+    description: |
+      Removes the border, keeps the legend and spacing. Use for ungrouped form sections that still need a heading.
+content:
+  model: flow
+  accepts:
+    - aui-field
+    - aui-input
+    - aui-select
+    - aui-stack
+    - aui-grid
+    - div
+  required: true
+  description: |
+    Form fields and layout containers. Typically aui-field elements with labels and controls.
+slots:
+  default:
+    accepts:
+      - aui-field
+      - aui-stack
+      - aui-grid
+      - aui-divider
+    required: true
+    description: The grouped form fields.
+composition:
+  parents:
+    - aui-stack
+    - aui-content
+    - aui-inset
+    - form
+    - div
+  children:
+    - aui-field
+    - aui-stack
+    - aui-grid
+    - aui-divider
+  context: |
+    Use for multi-section forms and settings pages. Nest inside aui-stack for vertical form layouts. Combine with aui-divider for additional section separation.
+tokens:
+  spacing:
+    - --aui-space
+  color:
+    - --aui-border
+    - --aui-text
+    - --aui-text-muted
+  shape:
+    - --aui-radius
+  typography:
+    - --aui-font-sm
+    - --aui-font-xs
+    - --aui-font-weight-medium
+examples:
+  - description: Basic fieldset with legend
+    html: |-
+      <aui-fieldset legend="Personal Information">
+        <aui-field label="Name"><aui-input></aui-input></aui-field>
+        <aui-field label="Email"><aui-input type="email"></aui-input></aui-field>
+      </aui-fieldset>
+  - description: Fieldset with description
+    html: |-
+      <aui-fieldset legend="Notifications">
+        <span data-fieldset-description>Choose how you want to be notified.</span>
+        <aui-field label="Email"><aui-switch></aui-switch></aui-field>
+        <aui-field label="SMS"><aui-switch></aui-switch></aui-field>
+      </aui-fieldset>
+  - description: Borderless fieldset
+    html: |-
+      <aui-fieldset legend="Billing Address" borderless>
+        <aui-field label="Street"><aui-input></aui-input></aui-field>
+        <aui-field label="City"><aui-input></aui-input></aui-field>
+      </aui-fieldset>

package/dist/docs/components/footer.yaml

@@ -0,0 +1,147 @@
+name: aui-footer
+tag: aui-footer
+type: element
+summary: Float-based layout container for bottom bars.
+description: |
+  Same float-based slot layout as aui-header. Leading floats left, trailing floats right, content slot centers absolutely. Text-align center is scoped to the content slot only. Use for page footers, card action bars, dialog button rows.
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: true
+    default: medium
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+    description: Controls min-height and font-size.
+  density:
+    syntax: key-value
+    attribute: density
+    cascades: true
+    default: regular
+    values:
+      - compact
+      - spacious
+    description: Controls padding compression.
+  responsive:
+    syntax: boolean
+    attribute: responsive
+    cascades: false
+    default: false
+    description: |
+      Enables progressive collapse via container queries. Same behavior as aui-header: the footer becomes a container provider and slotted children hide progressively as the container shrinks (trailing < 8rem, leading < 5rem, icon-only < 3rem). Use aui-button in slots for best collapse behavior.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: true
+    default: neutral
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+    description: Color family — cascades to all children.
+content:
+  model: mixed
+  accepts:
+    - text
+    - inline elements
+    - aui-button
+    - aui-badge
+    - span
+    - div
+  required: true
+  description: |
+    Action buttons, status text, or metadata in slots. At minimum, provide content in at least one slot.
+slots:
+  default:
+    accepts:
+      - text
+      - span
+      - div
+      - aui-button
+    required: false
+    description: Center/main content.
+  content:
+    accepts:
+      - text
+      - span
+      - div
+      - aui-button
+    required: false
+    description: |
+      Centered content. Rendered with position: absolute, inset: 0 and flexbox centering. Text-align: center is scoped to this slot only — it does not cascade to leading/trailing.
+  leading:
+    accepts:
+      - text
+      - span
+      - aui-button
+    required: false
+    description: Leading element. Floats left with natural text alignment.
+  trailing:
+    accepts:
+      - text
+      - span
+      - aui-button
+      - div
+    required: false
+    description: Trailing element. Floats right with natural text alignment.
+composition:
+  parents:
+    - aui-stack
+    - div
+    - section
+    - main
+  siblings:
+    typical:
+      - aui-content
+      - aui-header
+    pattern: |
+      aui-footer is typically the last child in a vertical container, after aui-content. Pair with aui-header at the top for a full page/card/dialog frame.
+  context: |
+    Use as the bottom bar of a page, section, card, or dialog. Common patterns: copyright line, pagination, confirm/cancel button pairs.
+tokens:
+  sizing:
+    - --aui-size
+    - --aui-font-size
+  spacing:
+    - --aui-pad-control-block
+    - --aui-pad-control-inline
+    - --aui-pad-gap-container
+examples:
+  - description: Simple copyright footer
+    html: |-
+      <aui-footer dividers>
+        <span slot="leading">© 2026 AgentUI</span>
+        <span slot="trailing">v0.0.1</span>
+      </aui-footer>
+  - description: Dialog action footer — cancel + save
+    html: |-
+      <aui-footer dividers>
+        <span slot="trailing">
+          <aui-button ghost label="Cancel"></aui-button>
+          <aui-button primary accent label="Save" icon-leading="check"></aui-button>
+        </span>
+      </aui-footer>
+  - description: Status footer with centered text
+    html: |-
+      <aui-footer dividers>
+        <aui-icon name="check-circle" slot="leading"></aui-icon>
+        <span slot="content">All changes saved</span>
+        <span slot="trailing">
+          <aui-button ghost label="Undo" icon-leading="arrow-up"></aui-button>
+        </span>
+      </aui-footer>
+  - description: Pagination footer
+    html: |-
+      <aui-footer dividers>
+        <span slot="leading">1–10 of 48</span>
+        <span slot="trailing">
+          <aui-button ghost icon-leading="caret-left" label="Previous" hide-label></aui-button>
+          <aui-button ghost icon-leading="caret-right" label="Next" hide-label></aui-button>
+        </span>
+      </aui-footer>

package/dist/docs/components/grid.yaml

@@ -0,0 +1,87 @@
+name: aui-grid
+tag: aui-grid
+type: element
+summary: CSS grid container with column shorthand.
+description: |
+  Grid layout container. Accepts cols attribute for equal-width columns. Default is a single column. Gap scales with density.
+presentational:
+  density:
+    syntax: key-value
+    attribute: density
+    cascades: true
+    default: regular
+    values:
+      - compact
+      - spacious
+    description: Controls gap compression.
+attributes:
+  cols:
+    syntax: key-value
+    type: enum
+    values:
+      - "2"
+      - "3"
+      - "4"
+      - "5"
+      - "6"
+    default: null
+    description: |
+      Number of equal-width grid columns via repeat(N, 1fr). Default is a single column when absent.
+layout:
+  gap:
+    syntax: key-value
+    attribute: gap
+    values:
+      - "0"
+      - "1"
+      - "2"
+      - "3"
+      - "4"
+      - "5"
+      - "6"
+      - "7"
+    description: Explicit gap size (0–7 space units). Overrides density-driven gap.
+content:
+  model: block
+  accepts: any
+  required: true
+  min-children: 1
+  description: |
+    Grid children become grid items. Each child occupies one cell by default. Use CSS grid-column/grid-row on children for spanning.
+slots:
+  default:
+    accepts:
+      - any
+    required: true
+    description: Grid cell children.
+composition:
+  parents:
+    - aui-stack
+    - aui-content
+    - aui-inset
+    - div
+    - section
+    - main
+  children: any
+  context: |
+    Use for card grids, form layouts with columns, dashboard panels. For simple vertical/horizontal stacking, prefer aui-stack.
+tokens:
+  spacing:
+    - --aui-pad-gap-container
+examples:
+  - description: Three-column grid
+    html: |-
+      <aui-grid cols="3">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+      </aui-grid>
+  - description: Two-column grid
+    html: |-
+      <aui-grid cols="2">
+        <div>Left</div>
+        <div>Right</div>
+      </aui-grid>

package/dist/docs/components/gripper.yaml

@@ -2,32 +2,24 @@ name: aui-gripper
 tag: aui-gripper
 type: component
 summary: Resize handle for panes and resizable containers.
-description: >
-  A draggable separator that emits resize events with delta values.
-  Supports both horizontal (col-resize) and vertical (row-resize)
-  orientations. Keyboard resizing via arrow keys. Has a 10px hit area
-  with a 2px feedback line at rest (border-muted) that expands to a
-  6px accent bar on click. Width/height transition is animated between
-  rest and active states.
-
+description: |
+  A draggable separator that emits resize events with delta values. Supports both horizontal (col-resize) and vertical (row-resize) orientations. Keyboard resizing via arrow keys. Has a 10px hit area with a 2px feedback line at rest (border-muted) that expands to a 6px accent bar on click. Width/height transition is animated between rest and active states.
 base: AgentElement
-
 attributes:
   orientation:
     syntax: key-value
     type: enum
-    values: [horizontal, vertical]
+    values:
+      - horizontal
+      - vertical
     default: horizontal
-    description: >
-      Drag axis. Horizontal = vertical divider (drag left/right).
-      Vertical = horizontal divider (drag up/down).
-
+    description: |
+      Drag axis. Horizontal = vertical divider (drag left/right). Vertical = horizontal divider (drag up/down).
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents drag interaction.
-
 a11y:
   role: separator
   keyboard:
@@ -38,7 +30,6 @@ a11y:
     Shift+Arrow: Resize by 10px instead of 1px.
   aria:
     aria-orientation: Set from orientation attribute.
-
 tokens:
   - name: --aui-gripper-color
     default: var(--aui-border-muted)
@@ -61,7 +52,6 @@ tokens:
   - name: --aui-gripper-border-radius-dragging
     default: 6px
     description: Border radius of the accent bar while dragging.
-
 events:
   aui:resize-start:
     description: Fired when drag begins.
@@ -69,10 +59,8 @@ events:
     description: Fired on drag movement. detail contains dx, dy, delta.
   aui:resize-end:
     description: Fired when drag ends. detail contains final dx, dy, delta.
-
 examples:
-  - html: <aui-gripper></aui-gripper>
-    description: Default horizontal gripper (drag left/right).
-
-  - html: <aui-gripper orientation="vertical"></aui-gripper>
-    description: Vertical gripper (drag up/down).
+  - description: Default horizontal gripper (drag left/right)
+    html: <aui-gripper></aui-gripper>
+  - description: Vertical gripper (drag up/down)
+    html: <aui-gripper orientation="vertical"></aui-gripper>