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

package/dist/docs/components/textarea.yaml

@@ -2,138 +2,129 @@ name: aui-textarea
 tag: aui-textarea
 type: component
 summary: Multi-line text input with autogrow support.
-description: >
-  Multi-line input. Same wrapper pattern as aui-input — the
-  wrapper owns the visual chrome, a native <textarea> lives
-  inside with browser chrome stripped. Supports autogrow
-  modifier for auto-expanding height to content. Defaults to
-  width: 20ch for standalone use. Automatically stretches to full
-  width when placed inside aui-field. Use width="full" on the element
-  to override the default width in other contexts.
-
+description: |
+  Multi-line input. Same wrapper pattern as aui-input — the wrapper owns the visual chrome, a native <textarea> lives inside with browser chrome stripped. Supports autogrow modifier for auto-expanding height to content. Defaults to width: 20ch for standalone use. Automatically stretches to full width when placed inside aui-field. Use width="full" on the element to override the default width in other contexts.
 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 font size and padding.
-
   radius:
     syntax: boolean
     exclusive: true
     cascades: true
     default: medium
-    values: [sharp, round]
+    values:
+      - sharp
+      - round
     description: Controls border radius.
-
   density:
     syntax: key-value
     attribute: density
     cascades: true
     default: regular
-    values: [compact, spacious]
+    values:
+      - compact
+      - spacious
     description: Controls padding compression.
-
   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 border and focus ring.
-
 attributes:
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction.
-
   readonly:
     syntax: boolean
     type: boolean
     default: false
     description: Allows selection but prevents editing.
-
   required:
     syntax: boolean
     type: boolean
     default: false
     description: Marks as required for form validation.
-
   autogrow:
     syntax: boolean
     type: boolean
     default: false
-    description: >
+    description: |
       Auto-expands height to fit content. Disables manual resize.
-
   autofocus:
     syntax: boolean
     type: boolean
     default: false
     description: Focuses the textarea on mount.
-
   placeholder:
     syntax: key-value
     type: string
     default: ""
     description: Placeholder text.
-
   value:
     syntax: key-value
     type: string
     default: ""
     description: Current textarea value.
-
   name:
     syntax: key-value
     type: string
     default: ""
     description: Form submission name.
-
   rows:
     syntax: key-value
     type: string
     default: "3"
     description: Initial visible row count.
-
   minlength:
     syntax: key-value
     type: string
     default: ""
     description: Minimum character count.
-
   maxlength:
     syntax: key-value
     type: string
     default: ""
     description: Maximum character count.
-
 modifiers:
   autogrow:
     syntax: boolean
-    description: >
-      Auto-expands textarea height to fit content. Disables
-      manual resize handle. Height adjusts on every input event.
-
+    description: |
+      Auto-expands textarea height to fit content. Disables manual resize handle. Height adjusts on every input event.
 content:
   model: mixed
-  accepts: [textarea]
+  accepts:
+    - textarea
   required: false
   description: Auto-stamps a native textarea if none exists.
-
 composition:
-  parents: [aui-field, aui-stack, form, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - form
+    - div
   children: null
-  context: >
-    Use inside aui-field for labeled textareas. Standalone for
-    chat inputs, comment boxes, code editors.
-
+  context: |
+    Use inside aui-field for labeled textareas. Standalone for chat inputs, comment boxes, code editors.
 a11y:
   role: implicit (native textarea)
   keyboard:
@@ -142,13 +133,11 @@ a11y:
     aria-disabled: Reflected from disabled.
     aria-readonly: Reflected from readonly.
     aria-required: Reflected from required.
-
 events:
   input:
     description: Fires on every keystroke.
   change:
     description: Fires on blur.
-
 tokens:
   - name: --aui-textarea-font-family
     default: var(--aui-font-family)
@@ -204,28 +193,22 @@ tokens:
   - name: --aui-textarea-border-disabled
     default: var(--aui-stroke-disabled, var(--aui-border-disabled))
     description: Border color when disabled.
-
 css-notes:
   attr-audit:
     - "AB1: [disabled], [readonly], [autogrow] — visual state via attributes"
     - "[autogrow] > textarea { resize: none; overflow: hidden } — CSS disables manual resize"
-    - ":focus-within — focus ring on wrapper"
-
+    - :focus-within — focus ring on wrapper
 examples:
-  - html: <aui-textarea placeholder="Write a message..."></aui-textarea>
-    description: Basic textarea.
-
-  - html: <aui-textarea placeholder="Auto-expanding..." autogrow></aui-textarea>
-    description: Autogrow textarea.
-
-  - html: <aui-textarea placeholder="Disabled" disabled></aui-textarea>
-    description: Disabled textarea.
-
-  - html: <aui-textarea value="Read only content" readonly></aui-textarea>
-    description: Read-only textarea.
-
-  - html: |
+  - description: Basic textarea
+    html: <aui-textarea placeholder="Write a message..."></aui-textarea>
+  - description: Autogrow textarea
+    html: <aui-textarea placeholder="Auto-expanding..." autogrow></aui-textarea>
+  - description: Disabled textarea
+    html: <aui-textarea placeholder="Disabled" disabled></aui-textarea>
+  - description: Read-only textarea
+    html: <aui-textarea value="Read only content" readonly></aui-textarea>
+  - description: Textarea inside a labeled field
+    html: |-
       <aui-field label="Bio" description="Tell us about yourself.">
         <aui-textarea placeholder="Write here..." rows="4"></aui-textarea>
       </aui-field>
-    description: Textarea inside a labeled field.

package/dist/docs/components/time-field.yaml

@@ -1,59 +1,52 @@
 name: aui-time-field
 tag: aui-time-field
 type: component
-summary: Segmented time input with independently editable hour and minute segments.
-description: >
-  A time entry control where hour and minute (and optional AM/PM)
-  are separate focusable segments. Each segment supports arrow-key
-  increment/decrement, direct digit entry with auto-advance, and
-  Tab/Arrow navigation between segments. Supports 12h and 24h
-  formats with configurable minute step. No native form elements.
-
+summary: Segmented time input with independently editable hour, minute, and optional seconds segments.
+description: |
+  A time entry control where hour, minute, and optional seconds (via show-seconds) are separate focusable segments. Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation between segments. Supports 12h and 24h formats with configurable minute step. No native form elements.
 base: AgentElement
-
 attributes:
   value:
     syntax: key-value
     type: string
     default: ""
     description: Time value in HH:MM (24h) format.
-
   min:
     syntax: key-value
     type: string
     default: ""
     description: Earliest allowed time (HH:MM).
-
   max:
     syntax: key-value
     type: string
     default: ""
     description: Latest allowed time (HH:MM).
-
   step:
     syntax: key-value
     type: string
     default: "1"
     description: Minute increment for arrow key navigation.
-
   format:
     syntax: key-value
     type: string
-    default: "24h"
+    default: 24h
     description: Display format (12h or 24h).
-
+  show-seconds:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: |
+      Adds a seconds segment (HH:MM:SS). When enabled, value includes seconds and the committed format is HH:MM:SS.
   placeholder:
     syntax: key-value
     type: string
     default: ""
     description: Placeholder shown in empty segments.
-
   disabled:
     syntax: boolean
     type: boolean
     default: false
     description: Prevents interaction. Dims visually.
-
 a11y:
   role: spinbutton (on each segment)
   keyboard:
@@ -62,14 +55,13 @@ a11y:
     ArrowLeft: Move to previous segment.
     ArrowRight: Move to next segment.
     Tab: Move between segments.
-    "0-9": Digit entry with auto-advance.
+    0-9: Digit entry with auto-advance.
     Backspace: Clear segment.
-    "a/p": Toggle AM/PM (12h format).
+    a/p: Toggle AM/PM (12h format).
   aria:
     aria-label: Segment name (Hour, Minute, AM/PM).
     aria-valuemin: Segment minimum.
     aria-valuemax: Segment maximum.
-
 tokens:
   - name: --aui-time-field-background
     default: var(--aui-control, var(--aui-fill))
@@ -98,23 +90,105 @@ tokens:
   - name: --aui-time-field-segment-color-focus
     default: var(--aui-accent-700)
     description: Focused segment text color.
-
 composition:
-  parents: [aui-field, aui-stack, aui-container, div]
+  parents:
+    - aui-field
+    - aui-stack
+    - aui-container
+    - div
   children: []
-  context: >
-    Standalone time entry. Use inside aui-field for labeled forms.
-    Not an aui-input variant -- separate segmented control.
-
+  context: |
+    Standalone time entry. Use inside aui-field for labeled forms. Not an aui-input variant -- separate segmented control.
 examples:
-  - html: <aui-time-field value="14:30"></aui-time-field>
-    description: 24h time field.
+  - description: Default 24h time field
+    html: <aui-time-field value="14:30"></aui-time-field>
+  - description: Morning time
+    html: |-
+      <aui-time-field value="09:00"></aui-time-field>
+
+      <!-- ===============================================================
+           12H FORMAT
+           =============================================================== -->
+  - description: 12h format with AM/PM segment
+    html: <aui-time-field value="14:30" format="12h"></aui-time-field>
+  - description: 12h morning time
+    html: |-
+      <aui-time-field value="09:15" format="12h"></aui-time-field>
+
+      <!-- ===============================================================
+           EMPTY STATE
+           =============================================================== -->
+  - description: Empty time field (segments show --)
+    html: |-
+      <aui-time-field></aui-time-field>
+
+      <!-- ===============================================================
+           WITH STEP
+           =============================================================== -->
+  - description: 15-minute increment steps
+    html: <aui-time-field value="09:00" step="15"></aui-time-field>
+  - description: 5-minute increments
+    html: |-
+      <aui-time-field value="12:00" step="5"></aui-time-field>
+
+      <!-- ===============================================================
+           DISABLED
+           =============================================================== -->
+  - description: Disabled time field
+    html: |-
+      <aui-time-field value="14:30" disabled></aui-time-field>
 
-  - html: <aui-time-field value="02:30" format="12h"></aui-time-field>
-    description: 12h format with AM/PM.
+      <!-- ===============================================================
+           IN FORM FIELD
+           =============================================================== -->
+  - description: Time field inside aui-field with label
+    html: |-
+      <aui-field label="Meeting Time">
+        <aui-time-field value="10:00"></aui-time-field>
+      </aui-field>
+  - description: 12h time field in form
+    html: |-
+      <aui-field label="Alarm">
+        <aui-time-field value="07:30" format="12h"></aui-time-field>
+      </aui-field>
 
-  - html: <aui-time-field value="09:00" step="15"></aui-time-field>
-    description: 15-minute increments.
+      <!-- ===============================================================
+           ROW -- multiple time fields
+           =============================================================== -->
+  - description: Start and end time fields
+    html: |-
+      <aui-stack direction="row" gap="3">
+        <aui-field label="Start">
+          <aui-time-field value="09:00"></aui-time-field>
+        </aui-field>
+        <aui-field label="End">
+          <aui-time-field value="17:00"></aui-time-field>
+        </aui-field>
+      </aui-stack>
 
-  - html: <aui-time-field value="14:30" disabled></aui-time-field>
-    description: Disabled time field.
+      <!-- ===============================================================
+           WITH SECONDS
+           =============================================================== -->
+  - description: 24h time with seconds
+    html: <aui-time-field value="14:30:45" show-seconds></aui-time-field>
+  - description: 12h time with seconds
+    html: <aui-time-field value="09:15:30" format="12h" show-seconds></aui-time-field>
+  - description: Live clock — updates every second
+    html: |-
+      <aui-field label="Current time (live)">
+        <aui-time-field id="live-clock" show-seconds></aui-time-field>
+      </aui-field>
+      <script>
+        requestAnimationFrame(function tick() {
+          const el = document.getElementById('live-clock')
+          if (el) {
+            const now = new Date()
+            el.setAttribute('value',
+              String(now.getHours()).padStart(2,'0') + ':' +
+              String(now.getMinutes()).padStart(2,'0') + ':' +
+              String(now.getSeconds()).padStart(2,'0')
+            )
+          }
+          requestAnimationFrame(tick)
+        })
+      </script>

package/dist/docs/components/toast.yaml

@@ -2,49 +2,37 @@ name: aui-toast
 tag: aui-toast
 type: component
 summary: Toast notification with auto-dismiss and stacking.
-description: >
-  Ephemeral notification that auto-dismisses. Use the imperative
-  AuiToast.show() API or declaratively with the open attribute.
-  Multiple toasts stack inside aui-toast-container (auto-created
-  on first use). Intent set via boolean attribute (info, success,
-  warning, danger).
-
+description: |
+  Ephemeral notification that auto-dismisses. Use the imperative AuiToast.show() API or declaratively with the open attribute. Multiple toasts stack inside aui-toast-container (auto-created on first use). Intent set via boolean attribute (info, success, warning, danger).
 base: AgentElement
-
 attributes:
   open:
     syntax: boolean
     type: boolean
     default: false
     description: Whether the toast is visible.
-
   message:
     syntax: key-value
     type: string
     default: ""
     description: Toast message text.
-
   duration:
     syntax: key-value
     type: string
     default: "4000"
     description: Auto-dismiss delay in ms. Set to 0 to disable.
-
   closeable:
     syntax: boolean
     type: boolean
     default: true
     description: Show a dismiss button.
-
 a11y:
   role: status
   aria:
     aria-live: polite
-
 events:
   dismiss:
     description: Fired when the toast is dismissed (auto or manual).
-
 tokens:
   - name: --aui-toast-font-family
     default: var(--aui-font-family)
@@ -56,7 +44,7 @@ tokens:
     default: var(--aui-ink)
     description: Text color of the toast.
   - name: --aui-toast-background
-    default: var(--aui-card, var(--aui-doc, #fff))
+    default: var(--aui-card, var(--aui-doc,
     description: Background color of the toast.
   - name: --aui-toast-border
     default: var(--aui-border-muted, oklch(0.8 0 0))
@@ -97,19 +85,14 @@ tokens:
   - name: --aui-toast-intent-danger
     default: var(--aui-danger, oklch(0.6 0.2 25))
     description: Accent color for danger intent toasts.
-
 examples:
-  - html: <aui-toast open message="Item saved successfully" success duration="0"></aui-toast>
-    description: Success toast.
-
-  - html: <aui-toast open message="New version available" info duration="0"></aui-toast>
-    description: Info toast.
-
-  - html: <aui-toast open message="Storage almost full" warning duration="0"></aui-toast>
-    description: Warning toast.
-
-  - html: <aui-toast open message="Failed to delete item" danger duration="0" closeable></aui-toast>
-    description: Danger toast with close button.
-
-  - html: <aui-toast open message="Default toast with no intent" duration="0"></aui-toast>
-    description: Default toast (no intent).
+  - description: Success toast
+    html: <aui-toast open message="Item saved successfully" success duration="0"></aui-toast>
+  - description: Info toast
+    html: <aui-toast open message="New version available" info duration="0"></aui-toast>
+  - description: Warning toast
+    html: <aui-toast open message="Storage almost full" warning duration="0"></aui-toast>
+  - description: Danger toast with close button
+    html: <aui-toast open message="Failed to delete item" danger duration="0" closeable></aui-toast>
+  - description: Default toast (no intent)
+    html: <aui-toast open message="Default toast with no intent" duration="0"></aui-toast>

package/dist/docs/components/tooltip.yaml

@@ -2,55 +2,39 @@ name: aui-tooltip
 tag: aui-tooltip
 type: component
 summary: Hover/focus tooltip with popover-based positioning.
-description: >
-  A lightweight tooltip that appears on hover or focus of its anchor
-  element. Uses the Popover API for top-layer rendering and CSS
-  anchor positioning for placement. The anchor is auto-discovered
-  as the previous sibling element.
-
+description: |
+  A lightweight tooltip that appears on hover or focus of its anchor element. Uses the Popover API for top-layer rendering and CSS anchor positioning for placement. The anchor is auto-discovered as the previous sibling element.
 base: AgentElement
-
-# ── Component attributes ──────────────────────────────────
-
 attributes:
   content:
     syntax: key-value
     type: string
     default: ""
-    description: >
+    description: |
       The text content displayed inside the tooltip.
-
   position:
     syntax: key-value
     type: enum
-    values: [top, bottom, left, right]
+    values:
+      - top
+      - bottom
+      - left
+      - right
     default: top
-    description: >
-      Preferred placement relative to the anchor element.
-      Uses CSS anchor positioning for layout.
-
-# ── Content model ─────────────────────────────────────────
-
+    description: |
+      Preferred placement relative to the anchor element. Uses CSS anchor positioning for layout.
 content:
   model: empty
   accepts: []
   required: false
-  description: >
-    Content is set via the content attribute. The tooltip
-    stamps its own popover surface internally.
-
-# ── Composition ───────────────────────────────────────────
-
+  description: |
+    Content is set via the content attribute. The tooltip stamps its own popover surface internally.
 composition:
-  parents: [any]
+  parents:
+    - any
   children: null
-  context: >
-    Place as a sibling immediately after the element you want
-    to annotate. The tooltip auto-discovers the previous sibling
-    as its anchor. Works with any interactive element.
-
-# ── Accessibility ─────────────────────────────────────────
-
+  context: |
+    Place as a sibling immediately after the element you want to annotate. The tooltip auto-discovers the previous sibling as its anchor. Works with any interactive element.
 a11y:
   role: tooltip (on the popover surface)
   aria:
@@ -58,12 +42,8 @@ a11y:
   keyboard:
     Escape: Dismisses the tooltip.
   focus:
-    description: >
-      Tooltip appears on focusin and disappears on focusout
-      of the anchor element.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
+    description: |
+      Tooltip appears on focusin and disappears on focusout of the anchor element.
 tokens:
   - name: --aui-tooltip-padding
     default: 0.375rem 0.625rem
@@ -89,23 +69,50 @@ tokens:
   - name: --aui-tooltip-offset
     default: 0.375rem
     description: Distance between tooltip and its anchor element.
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: |
+  - description: Tooltip on an hide-label button
+    html: |-
       <aui-button hide-label ghost label="Settings">
         <aui-icon name="gear" slot="leading"></aui-icon>
       </aui-button>
       <aui-tooltip content="Settings" position="bottom"></aui-tooltip>
-    description: Tooltip on an hide-label button.
-
-  - html: |
+  - description: Tooltip with keyboard shortcut hint
+    html: |-
       <aui-button primary accent>Save</aui-button>
       <aui-tooltip content="Save your changes (⌘S)"></aui-tooltip>
-    description: Tooltip with keyboard shortcut hint.
-
-  - html: |
+  - description: Tooltip positioned to the right of an icon
+    html: |-
       <aui-icon name="info" label="Info"></aui-icon>
       <aui-tooltip content="More information" position="right"></aui-tooltip>
-    description: Tooltip positioned to the right of an icon.
+  - description: Tooltip positioned to the top (default)
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Top tooltip (default)" position="top"></aui-tooltip>
+  - description: Tooltip positioned to the bottom
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Bottom tooltip" position="bottom"></aui-tooltip>
+  - description: Tooltip positioned to the left
+    html: |-
+      <aui-button>Hover me</aui-button>
+      <aui-tooltip content="Left tooltip" position="left"></aui-tooltip>
+  - description: Long text tooltip that wraps across multiple lines
+    html: |-
+      <aui-button>Terms</aui-button>
+      <aui-tooltip content="By continuing you agree to the Terms of Service, Privacy Policy, and acknowledge that your data may be processed in accordance with applicable regulations." position="top"></aui-tooltip>
+  - description: Tooltip on an icon-only button with ghost style
+    html: |-
+      <aui-button hide-label ghost label="Delete">
+        <aui-icon name="trash" slot="leading"></aui-icon>
+      </aui-button>
+      <aui-tooltip content="Delete item" position="bottom"></aui-tooltip>
+  - description: Tooltip on an icon-only button showing a keyboard shortcut
+    html: |-
+      <aui-button hide-label ghost label="Undo">
+        <aui-icon name="arrow-counter-clockwise" slot="leading"></aui-icon>
+      </aui-button>
+      <aui-tooltip content="Undo (⌘Z)" position="bottom"></aui-tooltip>
+  - description: Tooltip with keyboard shortcut hint on a text button
+    html: |-
+      <aui-button primary>New file</aui-button>
+      <aui-tooltip content="Create a new file (⌘N)" position="top"></aui-tooltip>