@agent-ui-kit/web-components 0.0.4 → 0.0.7

package/dist/api.tokens.yaml

@@ -0,0 +1,410 @@
+package: "@agent-ui-kit/web-components"
+version: 0.0.7
+generated: 2026-03-21T16:06:31.486Z
+description: "Design tokens: sizing, typography, spacing, radius, shadow, animation."
+scales:
+  size:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+  fontSize:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+    - 2xl
+  space:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+  icon:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+    - 2xl
+    - 3xl
+  widget:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+  radius:
+    - sharp
+    - round
+    - rounded
+  shadow:
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
+paddingTiers:
+  control: Buttons, inputs, options, tabs, cells
+  container: Card insets, dialog bodies, panels
+  page: Section margins, page edges
+tokens:
+  --aui-font-family:
+    value: system-ui, -apple-system, sans-serif
+    category: ""
+  --aui-font-family-mono:
+    value: ui-monospace, SFMono-Regular, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace
+    category: ""
+  --aui-size-xs:
+    value: 1.5rem
+    category: Size (height-min)
+  --aui-size-sm:
+    value: 1.75rem
+    category: Size (height-min)
+  --aui-size-md:
+    value: 2.25rem
+    category: Size (height-min)
+  --aui-size-lg:
+    value: 2.75rem
+    category: Size (height-min)
+  --aui-size-xl:
+    value: 3.25rem
+    category: Size (height-min)
+  --aui-size:
+    value: var(--aui-size-md)
+    category: Size (height-min)
+  --aui-control-height-xs:
+    value: var(--aui-size-xs)
+    category: Control Height (interactive element height)
+  --aui-control-height-sm:
+    value: var(--aui-size-sm)
+    category: Control Height (interactive element height)
+  --aui-control-height-md:
+    value: var(--aui-size-md)
+    category: Control Height (interactive element height)
+  --aui-control-height-lg:
+    value: var(--aui-size-lg)
+    category: Control Height (interactive element height)
+  --aui-control-height-xl:
+    value: var(--aui-size-xl)
+    category: Control Height (interactive element height)
+  --aui-control-height:
+    value: var(--aui-size)
+    category: Control Height (interactive element height)
+  --aui-hit-target-xs:
+    value: var(--aui-control-height-xs)
+    category: Hit Target (minimum touch/click target)
+  --aui-hit-target-sm:
+    value: var(--aui-control-height-sm)
+    category: Hit Target (minimum touch/click target)
+  --aui-hit-target-md:
+    value: var(--aui-control-height-md)
+    category: Hit Target (minimum touch/click target)
+  --aui-hit-target-lg:
+    value: var(--aui-control-height-lg)
+    category: Hit Target (minimum touch/click target)
+  --aui-hit-target-xl:
+    value: var(--aui-control-height-xl)
+    category: Hit Target (minimum touch/click target)
+  --aui-hit-target:
+    value: var(--aui-control-height)
+    category: Hit Target (minimum touch/click target)
+  --aui-font-xs:
+    value: 0.75rem
+    category: Font Size
+  --aui-font-sm:
+    value: 0.8125rem
+    category: Font Size
+  --aui-font-md:
+    value: 0.875rem
+    category: Font Size
+  --aui-font-lg:
+    value: 0.9375rem
+    category: Font Size
+  --aui-font-xl:
+    value: 1rem
+    category: Font Size
+  --aui-font-2xl:
+    value: 1.5rem
+    category: Font Size
+  --aui-font-size:
+    value: var(--aui-font-md)
+    category: Font Size
+  --aui-tracking-xs:
+    value: 0.01em
+    category: Letter Spacing
+  --aui-tracking-sm:
+    value: 0.005em
+    category: Letter Spacing
+  --aui-tracking-md:
+    value: 0em
+    category: Letter Spacing
+  --aui-tracking-lg:
+    value: -0.005em
+    category: Letter Spacing
+  --aui-tracking-xl:
+    value: -0.01em
+    category: Letter Spacing
+  --aui-tracking-2xl:
+    value: -0.025em
+    category: Letter Spacing
+  --aui-letter-spacing:
+    value: var(--aui-tracking-md)
+    category: Letter Spacing
+  --aui-space-xs:
+    value: 0.125rem
+    category: Space
+  --aui-space-sm:
+    value: 0.1875rem
+    category: Space
+  --aui-space-md:
+    value: 0.25rem
+    category: Space
+  --aui-space-lg:
+    value: 0.25rem
+    category: Space
+  --aui-space-xl:
+    value: 0.25rem
+    category: Space
+  --aui-space:
+    value: var(--aui-space-md)
+    category: Space
+  --aui-pad-k-control:
+    value: "1"
+    category: Padding tuning knobs (density scaling)
+  --aui-pad-k-container:
+    value: "1"
+    category: Padding tuning knobs (density scaling)
+  --aui-pad-control-block:
+    value: calc(var(--aui-space) * 2 * var(--aui-pad-k-control))
+    category: "Tier 1: Control Padding (buttons, inputs, options, tabs, cells)"
+  --aui-pad-control-inline:
+    value: calc(var(--aui-space) * 4 * var(--aui-pad-k-control))
+    category: "Tier 1: Control Padding (buttons, inputs, options, tabs, cells)"
+  --aui-pad-inline-icon:
+    value: calc(var(--aui-space) * 2 * var(--aui-pad-k-control))
+    category: "Tier 1: Control Padding (buttons, inputs, options, tabs, cells)"
+  --aui-pad-block:
+    value: var(--aui-pad-control-block)
+    category: Backward-compat aliases
+  --aui-pad-inline:
+    value: var(--aui-pad-control-inline)
+    category: Backward-compat aliases
+  --aui-pad-container:
+    value: calc(var(--aui-space) * 4 * var(--aui-pad-k-container))
+    category: "Tier 2: Container Padding (card insets, dialog bodies, panels)"
+  --aui-pad-page:
+    value: calc(var(--aui-space) * 8)
+    category: "Tier 3: Page Padding (section margins, page edges)"
+  --aui-pad-gap-control:
+    value: calc(var(--aui-space) * 2 * var(--aui-pad-k-control))
+    category: Gap tokens
+  --aui-pad-gap-container:
+    value: calc(var(--aui-space) * 4 * var(--aui-pad-k-container))
+    category: Gap tokens
+  --aui-pad-gap-page:
+    value: calc(var(--aui-space) * 8)
+    category: Gap tokens
+  --aui-pad-gap:
+    value: var(--aui-pad-gap-container)
+    category: Backward-compat alias
+  --aui-icon-xs:
+    value: 0.75rem
+    category: Icon
+  --aui-icon-sm:
+    value: 0.875rem
+    category: Icon
+  --aui-icon-md:
+    value: 1rem
+    category: Icon
+  --aui-icon-lg:
+    value: 1.125rem
+    category: Icon
+  --aui-icon-xl:
+    value: 1.25rem
+    category: Icon
+  --aui-icon-2xl:
+    value: 1.75rem
+    category: Icon
+  --aui-icon-3xl:
+    value: 2.5rem
+    category: Icon
+  --aui-icon-size:
+    value: var(--aui-icon-md)
+    category: Icon
+  --aui-widget-xs:
+    value: 0.75rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-sm:
+    value: 1rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-md:
+    value: 1.25rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-lg:
+    value: 1.5rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-xl:
+    value: 1.75rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-size:
+    value: var(--aui-widget-md)
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font-xs:
+    value: 0.5625rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font-sm:
+    value: 0.625rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font-md:
+    value: 0.625rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font-lg:
+    value: 0.625rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font-xl:
+    value: 0.75rem
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-widget-font:
+    value: var(--aui-widget-font-md)
+    category: Widget (checkbox, radio, switch, range, badge, kbd)
+  --aui-radius-sharp:
+    value: 0.25rem
+    category: Radius
+  --aui-radius-round:
+    value: 1.25rem
+    category: Radius
+  --aui-radius-rounded:
+    value: 0.75rem
+    category: Radius
+  --aui-radius:
+    value: var(--aui-radius-round)
+    category: Radius
+  --aui-font-weight-control:
+    value: "400"
+    category: Shadow
+  --aui-font-weight-text:
+    value: "400"
+    category: Shadow
+  --aui-font-weight-medium:
+    value: "500"
+    category: Shadow
+  --aui-font-weight-semibold:
+    value: "600"
+    category: Shadow
+  --aui-control-font-weight:
+    value: var(--aui-font-weight-control)
+    category: Shadow
+  --aui-font-weight:
+    value: var(--aui-font-weight-text)
+    category: Shadow
+  --aui-control-line-height:
+    value: "1"
+    category: Shadow
+  --aui-control-line-height-dense:
+    value: "1.25"
+    category: Shadow
+  --aui-control-line-height-relaxed:
+    value: "1.5"
+    category: Shadow
+  --aui-control-line-height-spacious:
+    value: "1.75"
+    category: Shadow
+  --aui-text-line-height:
+    value: "1.5"
+    category: Shadow
+  --aui-line-height:
+    value: var(--aui-text-line-height)
+    category: Shadow
+  --aui-duration:
+    value: 0.225s
+    category: Shadow
+  --aui-easing:
+    value: cubic-bezier(0.2, 0, 0, 1)
+    category: Shadow
+  --aui-easing-bounce-out:
+    value: cubic-bezier(0.175, 0.885, 0.32, 1.275)
+    category: Shadow
+  --aui-easing-bounce-in:
+    value: cubic-bezier(0.6, -0.28, 0.735, 0.045)
+    category: Shadow
+  --aui-focus-ring:
+    value: var(--aui-accent-scrim-600)
+    category: Shadow
+  --aui-backdrop-color:
+    value: oklch(0% 0 0)
+    category: Shadow
+  --aui-backdrop-opacity:
+    value: "0.3"
+    category: Shadow
+  --aui-tooltip-width-max:
+    value: 20rem
+    category: Tooltip
+  --aui-popover-height-max:
+    value: calc(100dvh - 2rem)
+    category: Popover
+  --aui-popover-gap:
+    value: 0.25rem
+    category: Popover
+  --aui-popover-viewport-margin:
+    value: 0.5rem
+    category: Popover
+  --aui-drawer-width:
+    value: 24rem
+    category: Drawer
+  --aui-drawer-height:
+    value: 24rem
+    category: Drawer
+  --aui-sidebar-width:
+    value: 16rem
+    category: Layout
+  --aui-sidebar-width-min:
+    value: 3.5rem
+    category: Layout
+  --aui-sidebar-width-max:
+    value: 20rem
+    category: Layout
+  --aui-sidebar-width-collapsed:
+    value: calc(var(--aui-size) + var(--aui-space) * 2)
+    category: Layout
+  --aui-badge-dot:
+    value: 0.5rem
+    category: Badge
+  --aui-group-header-font:
+    value: 0.625rem
+    category: Group Header
+  --aui-tabs-indicator:
+    value: 2px
+    category: Tabs
+  --aui-focus:
+    value: var(--aui-accent)
+    category: Tabs
+  --aui-fill:
+    value: var(--aui-action)
+    category: Tabs
+  --aui-fill-hover:
+    value: var(--aui-action-hover)
+    category: Tabs
+  --aui-fill-active:
+    value: var(--aui-action-active)
+    category: Tabs
+  --aui-fill-selected:
+    value: var(--aui-action-selected)
+    category: Tabs
+  --aui-fill-disabled:
+    value: var(--aui-action-disabled)
+    category: Tabs
+  --aui-stroke:
+    value: var(--aui-border)
+    category: Tabs
+  --aui-stroke-hover:
+    value: var(--aui-border-hover)
+    category: Tabs
+  --aui-stroke-selected:
+    value: var(--aui-border-selected)
+    category: Tabs
+  --aui-stroke-disabled:
+    value: var(--aui-border-disabled)
+    category: Tabs

package/dist/docs/components/accordion-item.yaml

@@ -36,6 +36,47 @@ composition:
   parents: [aui-accordion, any]
   children: [any]
 
+tokens:
+  - name: --aui-accordion-item-border-color
+    default: var(--aui-border-muted)
+    description: Bottom border color separating accordion items.
+  - name: --aui-accordion-item-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between chevron and header text.
+  - name: --aui-accordion-item-padding-block
+    default: var(--aui-pad-control-block)
+    description: Vertical padding of header and content.
+  - name: --aui-accordion-item-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding of header and content.
+  - name: --aui-accordion-item-font-family
+    default: var(--aui-font-family)
+    description: Font family for the header text.
+  - name: --aui-accordion-item-font-size
+    default: var(--aui-font-size)
+    description: Font size for the header text.
+  - name: --aui-accordion-item-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for the header text.
+  - name: --aui-accordion-item-line-height
+    default: var(--aui-control-line-height)
+    description: Line height for the header text.
+  - name: --aui-accordion-item-color
+    default: var(--aui-ink)
+    description: Text color of the header.
+  - name: --aui-accordion-item-color-hover
+    default: var(--aui-ink-strong)
+    description: Header text color on hover.
+  - name: --aui-accordion-item-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Header background on hover.
+  - name: --aui-accordion-item-chevron-color
+    default: var(--aui-ink-muted)
+    description: Color of the expand/collapse chevron icon.
+  - name: --aui-accordion-item-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Header text color when disabled.
+
 examples:
   - html: |
       <aui-accordion-item>

package/dist/docs/components/accordion.yaml

@@ -28,6 +28,11 @@ composition:
   parents: [any]
   children: [aui-accordion-item]
 
+tokens:
+  - name: --aui-accordion-border-color
+    default: var(--aui-border-muted)
+    description: Border color of the accordion container top border and item dividers.
+
 examples:
   - html: |
       <aui-accordion>

package/dist/docs/components/agent-activity.yaml

@@ -50,6 +50,38 @@ composition:
   parents: [aui-agent-message]
   children: [pre, div, any]
 
+tokens:
+  - name: --aui-agent-activity-color
+    default: var(--aui-ink-muted)
+    description: Text color of the activity indicator.
+  - name: --aui-agent-activity-font-size
+    default: var(--aui-font-size-sm, 0.8125rem)
+    description: Font size of the activity label.
+  - name: --aui-agent-activity-gap
+    default: var(--aui-space)
+    description: Gap between status row and content area.
+  - name: --aui-agent-activity-padding-block
+    default: var(--aui-space)
+    description: Block padding of the activity container.
+  - name: --aui-agent-activity-padding-inline
+    default: var(--aui-agent-bubble-pad-inline, 0.875rem)
+    description: Inline padding of the activity container.
+  - name: --aui-agent-activity-row-gap
+    default: "calc(var(--aui-space) * 1.5)"
+    description: Gap between items in the status row (arrow, label, dots, timer).
+  - name: --aui-agent-activity-content-padding-inline-start
+    default: "calc(var(--aui-space) * 3)"
+    description: Left indent of the expandable content area.
+  - name: --aui-agent-activity-content-font-family
+    default: var(--aui-font-mono, monospace)
+    description: Font family for the trace content area.
+  - name: --aui-agent-activity-content-font-size
+    default: var(--aui-font-size-sm, 0.8125rem)
+    description: Font size for the trace content area.
+  - name: --aui-agent-activity-content-max-height
+    default: var(--aui-agent-activity-max-height, 20rem)
+    description: Maximum height of the expandable content area before scrolling.
+
 examples:
   - html: |
       <aui-agent-activity type="typing" active></aui-agent-activity>

package/dist/docs/components/agent-feed.yaml

@@ -36,6 +36,14 @@ composition:
   parents: [aui-content, aui-pane, div, any]
   children: [aui-agent-thread]
 
+tokens:
+  - name: --aui-agent-feed-gap
+    default: var(--aui-pad-gap-container)
+    description: Gap between thread groups in the feed.
+  - name: --aui-agent-feed-padding
+    default: var(--aui-pad-container, var(--aui-space))
+    description: Padding around the feed container.
+
 examples:
   - html: |
       <aui-agent-feed auto-scroll scrollable style="height: 24rem;">

package/dist/docs/components/agent-message.yaml

@@ -75,6 +75,80 @@ composition:
   parents: [aui-agent-thread]
   children: [aui-agent-text, aui-agent-activity, aui-agent-seeds, any]
 
+tokens:
+  - name: --aui-agent-message-border-radius
+    default: var(--aui-agent-bubble-radius, var(--aui-radius))
+    description: Border radius for message bubbles.
+  - name: --aui-agent-message-border-radius-tight
+    default: "calc(var(--aui-space) * 2)"
+    description: Tighter radius for grouped bubble corners near the avatar.
+  - name: --aui-agent-message-background
+    default: var(--aui-agent-bubble-assistant, transparent)
+    description: Background of assistant message bubbles.
+  - name: --aui-agent-message-color
+    default: var(--aui-agent-bubble-assistant-ink, var(--aui-ink))
+    description: Text color of assistant message bubbles.
+  - name: --aui-agent-message-border
+    default: var(--aui-agent-bubble-assistant-border, var(--aui-border-muted))
+    description: Border color of assistant message bubbles.
+  - name: --aui-agent-message-gap
+    default: var(--aui-space)
+    description: Gap between content areas within a message bubble.
+  - name: --aui-agent-message-user-background
+    default: var(--aui-agent-bubble-user, var(--aui-accent-solid))
+    description: Background of user message bubbles.
+  - name: --aui-agent-message-user-color
+    default: var(--aui-agent-bubble-user-ink, white)
+    description: Text color of user message bubbles.
+  - name: --aui-agent-message-user-border
+    default: var(--aui-agent-bubble-user-border, transparent)
+    description: Border color of user message bubbles.
+  - name: --aui-agent-message-streaming-opacity
+    default: var(--aui-agent-streaming-opacity, 0.85)
+    description: Opacity applied to streaming messages.
+  - name: --aui-agent-message-error-border
+    default: var(--aui-border-danger, oklch(0.6 0.2 25))
+    description: Border color for error-status messages.
+  - name: --aui-agent-message-actions-gap
+    default: var(--aui-space)
+    description: Gap between action buttons in the toolbar.
+  - name: --aui-agent-message-actions-padding-inline
+    default: var(--aui-agent-bubble-pad-inline)
+    description: Inline padding of the actions toolbar.
+  - name: --aui-agent-message-action-font-size
+    default: var(--aui-font-size-sm, 0.8125rem)
+    description: Font size of action buttons.
+  - name: --aui-agent-message-action-color
+    default: var(--aui-ink-muted)
+    description: Text color of action buttons.
+  - name: --aui-agent-message-action-padding
+    default: "calc(var(--aui-space) * 0.5) calc(var(--aui-space) * 1)"
+    description: Padding of individual action buttons.
+  - name: --aui-agent-message-action-gap
+    default: "calc(var(--aui-space) * 0.5)"
+    description: Gap between icon and label within an action button.
+  - name: --aui-agent-message-action-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background of action buttons on hover.
+  - name: --aui-agent-message-action-color-hover
+    default: var(--aui-ink)
+    description: Text color of action buttons on hover.
+  - name: --aui-agent-message-popover-padding
+    default: "calc(var(--aui-space) * 0.5)"
+    description: Padding inside the popover actions toolbar.
+  - name: --aui-agent-message-popover-background
+    default: var(--aui-modal, var(--aui-doc))
+    description: Background of the popover actions toolbar.
+  - name: --aui-agent-message-popover-border
+    default: var(--aui-border-muted)
+    description: Border color of the popover actions toolbar.
+  - name: --aui-agent-message-popover-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the popover actions toolbar.
+  - name: --aui-agent-message-popover-shadow
+    default: "var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))"
+    description: Box shadow of the popover actions toolbar.
+
 examples:
   - html: |
       <aui-agent-message role="assistant" status="sent" message-id="msg-001">

package/dist/docs/components/agent-prompt.yaml

@@ -30,6 +30,53 @@ composition:
   parents: [aui-agent-input, aui-stack]
   children: [aui-textarea, aui-button, aui-inset, any]
 
+tokens:
+  - name: --aui-agent-prompt-background
+    default: var(--aui-control)
+    description: Background of the prompt container.
+  - name: --aui-agent-prompt-border
+    default: var(--aui-border-muted)
+    description: Border color of the prompt container.
+  - name: --aui-agent-prompt-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the prompt container.
+  - name: --aui-agent-prompt-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Border color on hover.
+  - name: --aui-agent-prompt-focus-color
+    default: var(--aui-focus)
+    description: Focus ring color when textarea is focused.
+  - name: --aui-agent-prompt-surface-padding-block
+    default: "calc(var(--aui-space) * 2)"
+    description: Block padding of the textarea surface.
+  - name: --aui-agent-prompt-surface-padding-inline
+    default: "calc(var(--aui-space) * 3)"
+    description: Inline padding of the textarea surface.
+  - name: --aui-agent-prompt-toolbar-border
+    default: var(--aui-border-muted)
+    description: Border color of the bottom toolbar separator.
+  - name: --aui-agent-prompt-toolbar-gap
+    default: "calc(var(--aui-space) * 2)"
+    description: Gap between items in the toolbar.
+  - name: --aui-agent-prompt-toolbar-padding
+    default: "calc(var(--aui-space) * 2)"
+    description: Padding of the toolbar area.
+  - name: --aui-agent-prompt-ghost-background-hover
+    default: var(--aui-fill-hover)
+    description: Hover background in ghost variant.
+  - name: --aui-agent-prompt-outline-border
+    default: var(--aui-stroke)
+    description: Border color in outline variant.
+  - name: --aui-agent-prompt-outline-background-hover
+    default: var(--aui-fill-hover)
+    description: Hover background in outline variant.
+  - name: --aui-agent-prompt-inline-surface-padding-block
+    default: "calc(var(--aui-space) * 1.5)"
+    description: Block padding of the textarea in inline mode.
+  - name: --aui-agent-prompt-inline-submit-margin
+    default: "calc(var(--aui-space) * 1.5)"
+    description: Inline-end margin for the submit button in inline mode.
+
 examples:
   - html: |
       <aui-agent-prompt>