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

package/dist/docs/components/range.yaml

@@ -70,21 +70,30 @@ form:
   value: Current slider value.
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-widget-size
-  spacing:
-    - --aui-pad-control-block
-  color:
-    - --aui-control
-    - --aui-fill
-    - --aui-stroke
-    - --aui-solid
-    - --aui-focus
-  shape:
-    - --aui-radius-round
-  motion:
-    - --aui-easing
+  - name: --aui-range-track-background
+    default: var(--aui-control)
+    description: Track background color.
+  - name: --aui-range-track-border
+    default: var(--aui-border-muted)
+    description: Track border color.
+  - name: --aui-range-track-border-radius
+    default: calc(var(--aui-widget-size) / 2)
+    description: Track corner radius (pill shape).
+  - name: --aui-range-fill-background
+    default: var(--aui-accent, var(--aui-solid))
+    description: Active fill color from min to current value.
+  - name: --aui-range-thumb-background
+    default: "var(--aui-solid-ink, #fff)"
+    description: Thumb fill color.
+  - name: --aui-range-thumb-border
+    default: var(--aui-accent, var(--aui-solid))
+    description: Thumb border color.
+  - name: --aui-range-thumb-border-radius
+    default: var(--aui-radius-round)
+    description: Thumb corner radius.
+  - name: --aui-range-thumb-shadow
+    default: var(--aui-shadow-sm, 0 1px 4px oklch(0% 0 0 / 0.15))
+    description: Thumb drop shadow.
 
 examples:
   - html: <aui-range></aui-range>

package/dist/docs/components/root.yaml

@@ -6,6 +6,17 @@ base: AgentElement
 composition:
   parents: [body]
   children: [aui-header, aui-content, aui-footer, aui-panes, any]
+tokens:
+  - name: --aui-root-font-family
+    default: var(--aui-font-family)
+    description: Base font family for the app shell.
+  - name: --aui-root-color
+    default: var(--aui-ink)
+    description: Default text color for the app shell.
+  - name: --aui-root-background
+    default: var(--aui-doc)
+    description: Background color of the app shell.
+
 examples:
   - html: |
       <aui-container bordered style="min-height: 12rem;">

package/dist/docs/components/segment.yaml

@@ -36,6 +36,41 @@ composition:
   parents: [aui-segmented-control]
   children: null
 
+tokens:
+  - name: --aui-segment-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between icon and label inside the segment.
+  - name: --aui-segment-padding-inline
+    default: calc(var(--aui-pad-control-inline) - var(--aui-space))
+    description: Horizontal padding of the segment.
+  - name: --aui-segment-font-family
+    default: var(--aui-font-family)
+    description: Font family for segment label text.
+  - name: --aui-segment-font-size
+    default: var(--aui-font-size)
+    description: Font size for segment label text.
+  - name: --aui-segment-font-weight
+    default: var(--aui-control-font-weight)
+    description: Font weight for segment labels.
+  - name: --aui-segment-line-height
+    default: var(--aui-control-line-height)
+    description: Line height for segment label text.
+  - name: --aui-segment-color
+    default: var(--aui-ink-muted)
+    description: Text color of inactive segments.
+  - name: --aui-segment-color-hover
+    default: var(--aui-ink)
+    description: Text color on hover.
+  - name: --aui-segment-color-selected
+    default: var(--aui-neutral-11)
+    description: Text color of the selected segment.
+  - name: --aui-segment-border-radius
+    default: calc(var(--aui-radius) - var(--aui-pad-control-block) / 2)
+    description: Border radius of individual segments.
+  - name: --aui-segment-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Text color of disabled segments.
+
 examples:
   - html: <aui-segment value="list">List</aui-segment>
     description: Simple segment.

package/dist/docs/components/segmented-control.yaml

@@ -42,6 +42,29 @@ composition:
   parents: [any]
   children: [aui-segment]
 
+tokens:
+  - name: --aui-segmented-control-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background color of the segmented control container.
+  - name: --aui-segmented-control-border-color
+    default: var(--aui-border-muted)
+    description: Border color of the container.
+  - name: --aui-segmented-control-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the container.
+  - name: --aui-segmented-control-font-family
+    default: var(--aui-font-family)
+    description: Font family for segment labels.
+  - name: --aui-segmented-control-font-size
+    default: var(--aui-font-size)
+    description: Font size for segment labels.
+  - name: --aui-segmented-control-indicator-background
+    default: white
+    description: Background color of the floating selection indicator.
+  - name: --aui-segmented-control-indicator-shadow
+    default: var(--aui-shadow-sm)
+    description: Box shadow of the floating selection indicator.
+
 examples:
   - html: |
       <aui-segmented-control value="list">

package/dist/docs/components/select.yaml

@@ -86,6 +86,62 @@ attributes:
     default: false
     description: Children fill available space equally (bar mode).
 
+tokens:
+  - name: --aui-select-font-family
+    default: var(--aui-font-family)
+    description: Font family for the select trigger and options.
+  - name: --aui-select-font-size
+    default: var(--aui-font-size)
+    description: Font size for the select trigger and options.
+  - name: --aui-select-font-weight
+    default: var(--aui-control-font-weight)
+    description: Font weight for the trigger label.
+  - name: --aui-select-color
+    default: var(--aui-ink)
+    description: Default text color.
+  - name: --aui-select-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background color of the trigger button.
+  - name: --aui-select-border-color
+    default: var(--aui-stroke)
+    description: Border color of the trigger button.
+  - name: --aui-select-border-radius
+    default: var(--aui-radius)
+    description: Border radius for the trigger and dropdown.
+  - name: --aui-select-size
+    default: var(--aui-size)
+    description: Height of the trigger button.
+  - name: --aui-select-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline padding for the trigger.
+  - name: --aui-select-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between trigger icon, label, and chevron.
+  - name: --aui-select-icon-size
+    default: var(--aui-icon-size)
+    description: Size of the chevron icon.
+  - name: --aui-select-placeholder-color
+    default: var(--aui-ink-placeholder, var(--aui-ink-muted))
+    description: Placeholder text color.
+  - name: --aui-select-chevron-color
+    default: var(--aui-ink-muted)
+    description: Color of the dropdown chevron icon.
+  - name: --aui-select-border-color-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Border color on hover.
+  - name: --aui-select-dropdown-background
+    default: var(--aui-modal, var(--aui-doc))
+    description: Background color of the dropdown popover.
+  - name: --aui-select-dropdown-border-color
+    default: var(--aui-border-muted)
+    description: Border color of the dropdown popover.
+  - name: --aui-select-dropdown-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the dropdown popover.
+  - name: --aui-select-dropdown-shadow
+    default: var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))
+    description: Box shadow for the dropdown popover.
+
 bar-overflow:
   description: >
     In bar mode, items overflow into a "..." popover menu when the container

package/dist/docs/components/sidebar.yaml

@@ -88,23 +88,57 @@ a11y:
     Drag: Resize handle supports pointer drag to resize width.
 
 tokens:
-  sizing:
-    - --aui-sidebar-width
-    - --aui-sidebar-width-min
-    - --aui-sidebar-width-max
-    - --aui-sidebar-width-collapsed
-    - --aui-sidebar-header-height
-  color:
-    - --aui-doc
-    - --aui-border
-    - --aui-action-active
-    - --aui-ink
-    - --aui-ink-muted
-    - --aui-ink-strong
-    - --aui-focus
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-sidebar-border-color
+    default: var(--aui-border)
+    description: Border color between sidebar and content.
+  - name: --aui-sidebar-label-font-size
+    default: calc(var(--aui-font-size) * 0.75)
+    description: Font size for section labels.
+  - name: --aui-sidebar-label-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for section labels.
+  - name: --aui-sidebar-label-letter-spacing
+    default: "0.06em"
+    description: Letter spacing for uppercase section labels.
+  - name: --aui-sidebar-label-color
+    default: var(--aui-ink-muted)
+    description: Text color for section labels.
+  - name: --aui-sidebar-label-padding-block
+    default: var(--aui-space)
+    description: Block padding for section labels.
+  - name: --aui-sidebar-label-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline padding for section labels.
+  - name: --aui-sidebar-nav-color
+    default: var(--aui-ink)
+    description: Default text color for navigation items.
+  - name: --aui-sidebar-nav-color-active
+    default: var(--aui-ink-strong)
+    description: Text color for the active navigation item.
+  - name: --aui-sidebar-nav-font-weight-active
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for the active navigation item.
+  - name: --aui-sidebar-header-nav-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight for header/footer nav items.
+  - name: --aui-sidebar-header-nav-border-radius
+    default: var(--aui-radius)
+    description: Border radius for header/footer nav items.
+  - name: --aui-sidebar-header-nav-color-hover
+    default: var(--aui-ink-strong)
+    description: Text color on header/footer nav item hover.
+  - name: --aui-sidebar-header-nav-background-hover
+    default: var(--aui-action)
+    description: Background color on header/footer nav item hover.
+  - name: --aui-sidebar-resize-handle-background
+    default: var(--aui-action-active)
+    description: Background color of the resize handle on hover/drag.
+  - name: --aui-sidebar-connector-color
+    default: var(--aui-border)
+    description: Color of the vertical connector line on open nav groups.
+  - name: --aui-sidebar-indicator-color
+    default: var(--aui-focus)
+    description: Color of the sliding active indicator bar.
 
 examples:
   - html: |

package/dist/docs/components/switch.yaml

@@ -90,24 +90,54 @@ events:
     description: Fires when checked state changes.
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-widget-size
-    - --aui-font-size
-  color:
-    - --aui-ink
-    - --aui-ink-muted
-    - --aui-control
-    - --aui-fill
-    - --aui-stroke
-    - --aui-solid
-    - --aui-on-solid
-    - --aui-focus
-  shape:
-    - --aui-radius-round
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-switch-gap
+    default: calc(var(--aui-space) * 2)
+    description: Gap between track and label.
+  - name: --aui-switch-font-family
+    default: var(--aui-font-family)
+    description: Label font family.
+  - name: --aui-switch-font-size
+    default: var(--aui-font-size)
+    description: Label font size.
+  - name: --aui-switch-line-height
+    default: var(--aui-control-line-height-relaxed)
+    description: Label line height.
+  - name: --aui-switch-color
+    default: var(--aui-ink)
+    description: Label text color.
+  - name: --aui-switch-track-background
+    default: var(--aui-action, var(--aui-control, var(--aui-fill)))
+    description: Unchecked track fill.
+  - name: --aui-switch-track-border
+    default: var(--aui-stroke)
+    description: Track border color.
+  - name: --aui-switch-track-border-radius
+    default: var(--aui-radius-round)
+    description: Track corner radius (pill shape).
+  - name: --aui-switch-thumb-background
+    default: "var(--aui-solid-ink, #fff)"
+    description: Thumb fill color.
+  - name: --aui-switch-thumb-border-radius
+    default: var(--aui-radius-round)
+    description: Thumb corner radius.
+  - name: --aui-switch-thumb-shadow
+    default: var(--aui-shadow-sm, 0 1px 3px oklch(0% 0 0 / 0.15))
+    description: Thumb drop shadow.
+  - name: --aui-switch-checked-background
+    default: var(--aui-accent)
+    description: Checked track fill.
+  - name: --aui-switch-checked-border
+    default: var(--aui-accent)
+    description: Checked track border color.
+  - name: --aui-switch-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Track border on hover.
+  - name: --aui-switch-background-disabled
+    default: var(--aui-fill-disabled, var(--aui-action-disabled))
+    description: Track background when disabled.
+  - name: --aui-switch-border-disabled
+    default: var(--aui-stroke-disabled, var(--aui-border-disabled))
+    description: Track border when disabled.
 
 css-notes:
   attr-audit:

package/dist/docs/components/tab.yaml

@@ -38,6 +38,44 @@ composition:
   parents: [aui-tabs]
   children: null
 
+tokens:
+  - name: --aui-tab-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between icon and label inside the tab.
+  - name: --aui-tab-padding-block
+    default: calc(var(--aui-pad-control-block) * 1.5)
+    description: Vertical padding of the tab trigger.
+  - name: --aui-tab-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding of the tab trigger.
+  - name: --aui-tab-font-family
+    default: var(--aui-font-family)
+    description: Font family for tab label text.
+  - name: --aui-tab-font-size
+    default: var(--aui-font-size)
+    description: Font size for tab label text.
+  - name: --aui-tab-font-weight
+    default: var(--aui-control-font-weight)
+    description: Font weight for inactive tab labels.
+  - name: --aui-tab-line-height
+    default: var(--aui-control-line-height)
+    description: Line height for tab label text.
+  - name: --aui-tab-color
+    default: var(--aui-ink-muted)
+    description: Text color of inactive tabs.
+  - name: --aui-tab-color-hover
+    default: var(--aui-ink)
+    description: Text color on hover.
+  - name: --aui-tab-color-selected
+    default: var(--aui-accent)
+    description: Text color of the selected tab.
+  - name: --aui-tab-font-weight-selected
+    default: var(--aui-font-weight-medium)
+    description: Font weight of the selected tab.
+  - name: --aui-tab-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Text color of disabled tabs.
+
 examples:
   - html: |
       <aui-tabs value="general">

package/dist/docs/components/table-cell.yaml

@@ -6,6 +6,23 @@ base: AgentElement
 composition:
   parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
   children: null
+tokens:
+  - name: --aui-table-cell-font-size
+    default: var(--aui-font-size)
+    description: Font size for cell content.
+  - name: --aui-table-cell-color
+    default: var(--aui-ink)
+    description: Text color for data cells.
+  - name: --aui-table-cell-size
+    default: var(--aui-size)
+    description: Minimum height of the data cell.
+  - name: --aui-table-cell-padding-block
+    default: var(--aui-pad-control-block)
+    description: Block (vertical) padding for data cells.
+  - name: --aui-table-cell-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline (horizontal) padding for data cells.
+
 examples:
   - html: See aui-table for full usage.
     description: Used within aui-table structure.

package/dist/docs/components/table-header.yaml

@@ -6,6 +6,26 @@ base: AgentElement
 composition:
   parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
   children: null
+tokens:
+  - name: --aui-table-header-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight for header text.
+  - name: --aui-table-header-font-size
+    default: var(--aui-font-size)
+    description: Font size for header text.
+  - name: --aui-table-header-color
+    default: var(--aui-ink-muted)
+    description: Text color for header cells.
+  - name: --aui-table-header-size
+    default: var(--aui-size)
+    description: Minimum height of the header cell.
+  - name: --aui-table-header-padding-block
+    default: var(--aui-pad-control-block)
+    description: Block (vertical) padding for header cells.
+  - name: --aui-table-header-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline (horizontal) padding for header cells.
+
 examples:
   - html: See aui-table for full usage.
     description: Used within aui-table structure.

package/dist/docs/components/table-row.yaml

@@ -6,6 +6,20 @@ base: AgentElement
 composition:
   parents: [aui-table, aui-table-head, aui-table-body, aui-table-row]
   children: null
+tokens:
+  - name: --aui-table-row-border
+    default: var(--aui-border-muted)
+    description: Border color between rows.
+  - name: --aui-table-row-head-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background color for header rows.
+  - name: --aui-table-row-hover-background
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background color on row hover.
+  - name: --aui-table-row-hover-color
+    default: var(--aui-ink-strong)
+    description: Text color on row hover.
+
 examples:
   - html: See aui-table for full usage.
     description: Used within aui-table structure.

package/dist/docs/components/table.yaml

@@ -156,6 +156,50 @@ api:
       Returns a copy of the currently selected row IDs. Each ID comes
       from the row's `id` field (or a JSON-stringified fallback).
 
+tokens:
+  - name: --aui-table-font-family
+    default: var(--aui-font-family)
+    description: Font family for the table.
+  - name: --aui-table-font-size
+    default: var(--aui-font-size)
+    description: Base font size for table content.
+  - name: --aui-table-color
+    default: var(--aui-ink)
+    description: Default text color for the table.
+  - name: --aui-table-border
+    default: var(--aui-border-muted)
+    description: Border color for table outline and dividers.
+  - name: --aui-table-border-radius
+    default: var(--aui-radius)
+    description: Border radius for the outer table container.
+  - name: --aui-table-toolbar-background
+    default: var(--aui-fill)
+    description: Background color for the search toolbar.
+  - name: --aui-table-toolbar-gap
+    default: var(--aui-gap)
+    description: Gap between toolbar items.
+  - name: --aui-table-toolbar-padding
+    default: var(--aui-pad-control-inline)
+    description: Padding for the search toolbar.
+  - name: --aui-table-footer-background
+    default: var(--aui-fill)
+    description: Background color for the pagination footer.
+  - name: --aui-table-footer-font-size
+    default: var(--aui-font-xs)
+    description: Font size for footer text.
+  - name: --aui-table-footer-color
+    default: var(--aui-ink-muted)
+    description: Text color for footer content.
+  - name: --aui-table-footer-padding
+    default: var(--aui-pad-control-block) var(--aui-pad-control-inline)
+    description: Padding for the pagination footer.
+  - name: --aui-table-footer-gap
+    default: var(--aui-gap)
+    description: Gap between footer items.
+  - name: --aui-table-selected-background
+    default: var(--aui-action-hover, var(--aui-fill-hover))
+    description: Background color for selected rows.
+
 a11y:
   role: table
 

package/dist/docs/components/tabs.yaml

@@ -41,6 +41,20 @@ composition:
   parents: [any]
   children: [aui-tab, aui-tab-panel]
 
+tokens:
+  - name: --aui-tabs-separator-color
+    default: var(--aui-border-muted)
+    description: Color of the separator line beneath tabs.
+  - name: --aui-tabs-indicator-color
+    default: var(--aui-accent)
+    description: Color of the sliding active indicator.
+  - name: --aui-tabs-indicator-size
+    default: 2px
+    description: Thickness of the active indicator bar.
+  - name: --aui-tabs-indicator-radius
+    default: 1px
+    description: Border radius of the indicator bar ends.
+
 examples:
   - html: |
       <aui-tabs value="general">

package/dist/docs/components/textarea.yaml

@@ -150,25 +150,60 @@ events:
     description: Fires on blur.
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-font-size
-  spacing:
-    - --aui-pad-control-block
-    - --aui-pad-control-inline
-  color:
-    - --aui-ink
-    - --aui-ink-muted
-    - --aui-ink-placeholder
-    - --aui-control
-    - --aui-fill
-    - --aui-stroke
-    - --aui-focus
-  shape:
-    - --aui-radius
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-textarea-font-family
+    default: var(--aui-font-family)
+    description: Font family for textarea text.
+  - name: --aui-textarea-font-size
+    default: var(--aui-font-size)
+    description: Textarea text font size.
+  - name: --aui-textarea-font-weight
+    default: var(--aui-control-font-weight)
+    description: Textarea text font weight.
+  - name: --aui-textarea-line-height
+    default: var(--aui-text-line-height)
+    description: Text line height.
+  - name: --aui-textarea-letter-spacing
+    default: var(--aui-letter-spacing)
+    description: Text letter spacing.
+  - name: --aui-textarea-color
+    default: var(--aui-ink)
+    description: Text color.
+  - name: --aui-textarea-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background fill color.
+  - name: --aui-textarea-border
+    default: var(--aui-stroke)
+    description: Border color.
+  - name: --aui-textarea-border-radius
+    default: var(--aui-radius)
+    description: Corner radius.
+  - name: --aui-textarea-padding-block
+    default: calc((var(--aui-size) - 1lh) / 2)
+    description: Vertical padding, centered to first line height.
+  - name: --aui-textarea-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding.
+  - name: --aui-textarea-placeholder-color
+    default: var(--aui-ink-placeholder, var(--aui-ink-muted))
+    description: Placeholder text color.
+  - name: --aui-textarea-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Border color on hover.
+  - name: --aui-textarea-focus-outline
+    default: 2px solid var(--aui-focus)
+    description: Outline style on focus.
+  - name: --aui-textarea-focus-border
+    default: var(--aui-focus)
+    description: Border color on focus.
+  - name: --aui-textarea-background-disabled
+    default: var(--aui-fill-disabled, var(--aui-action-disabled))
+    description: Background when disabled.
+  - name: --aui-textarea-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Text color when disabled.
+  - name: --aui-textarea-border-disabled
+    default: var(--aui-stroke-disabled, var(--aui-border-disabled))
+    description: Border color when disabled.
 
 css-notes:
   attr-audit: