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

package/dist/docs/components/dialog.yaml

@@ -69,17 +69,30 @@ events:
     description: Fires when the dialog closes (Escape, backdrop click, or API).
 
 tokens:
-  color:
-    - --aui-modal
-    - --aui-doc
-    - --aui-border-muted
-    - --aui-ink
-    - --aui-backdrop-color
-    - --aui-backdrop-opacity
-  shadow:
-    - --aui-shadow-lg
-  shape:
-    - --aui-radius
+  - name: --aui-dialog-background
+    default: var(--aui-modal, var(--aui-doc))
+    description: Background color of the dialog content panel.
+  - name: --aui-dialog-color
+    default: var(--aui-ink)
+    description: Text color inside the dialog.
+  - name: --aui-dialog-border
+    default: var(--aui-border-muted)
+    description: Border color of the dialog and child separators.
+  - name: --aui-dialog-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the dialog content panel.
+  - name: --aui-dialog-shadow
+    default: var(--aui-shadow-lg)
+    description: Box shadow of the dialog content panel.
+  - name: --aui-dialog-width
+    default: min(90vw, 32rem)
+    description: Width of the dialog content panel (default size).
+  - name: --aui-dialog-backdrop-color
+    default: var(--aui-backdrop-color, oklch(0% 0 0))
+    description: Color of the backdrop overlay.
+  - name: --aui-dialog-backdrop-opacity
+    default: var(--aui-backdrop-opacity, 0.3)
+    description: Opacity of the backdrop overlay.
 
 examples:
   - html: |

package/dist/docs/components/drawer.yaml

@@ -59,19 +59,27 @@ events:
     description: Fires when the drawer closes.
 
 tokens:
-  color:
-    - --aui-modal
-    - --aui-doc
-    - --aui-border-muted
-    - --aui-ink
-    - --aui-backdrop-color
-    - --aui-backdrop-opacity
-  sizing:
-    - --aui-drawer-width
-    - --aui-drawer-height
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-drawer-background
+    default: var(--aui-modal, var(--aui-doc))
+    description: Background color of the drawer content panel.
+  - name: --aui-drawer-color
+    default: var(--aui-ink)
+    description: Text color inside the drawer.
+  - name: --aui-drawer-border
+    default: var(--aui-border-muted)
+    description: Border color of the drawer edge and child separators.
+  - name: --aui-drawer-width
+    default: 24rem
+    description: Width of the drawer when anchored left or right.
+  - name: --aui-drawer-height
+    default: 24rem
+    description: Height of the drawer when anchored top or bottom.
+  - name: --aui-drawer-backdrop-color
+    default: var(--aui-backdrop-color, oklch(0% 0 0))
+    description: Color of the backdrop overlay.
+  - name: --aui-drawer-backdrop-opacity
+    default: var(--aui-backdrop-opacity, 0.3)
+    description: Opacity of the backdrop overlay.
 
 examples:
   - html: |

package/dist/docs/components/editor.yaml

@@ -130,16 +130,18 @@ composition:
     creates a viewport wrapper and moves all children into it.
 
 tokens:
-  color:
-    - --aui-doc
-    - --aui-border-muted
-    - --aui-accent
-    - --aui-focus
-  motion:
-    - --_editor-zoom
-    - --_editor-pan-x
-    - --_editor-pan-y
-    - --_editor-grid-size
+  - name: --aui-editor-background
+    default: var(--aui-doc)
+    description: Background color of the editor stage.
+  - name: --aui-editor-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the editor container.
+  - name: --aui-editor-selection-color
+    default: var(--aui-accent)
+    description: Color of the selection rectangle border and fill.
+  - name: --aui-editor-focus-color
+    default: var(--aui-focus)
+    description: Focus ring color when the editor is focused.
 
 examples:
   - html: |

package/dist/docs/components/field.yaml

@@ -97,19 +97,30 @@ css-notes:
 # ── CSS tokens consumed ──────────────────────────────────
 
 tokens:
-  spacing:
-    - --aui-space
-  typography:
-    - --aui-font-family
-    - --aui-font-size
-    - --aui-text-line-height
-    - --aui-control-line-height-relaxed
-  color:
-    - --aui-ink
-    - --aui-ink-muted
-    - --aui-ink-disabled
-    - --aui-border-danger
-    - --aui-danger
+  - name: --aui-field-gap
+    default: calc(var(--aui-space) * 2)
+    description: Vertical gap between label, control, and description.
+  - name: --aui-field-label-font-size
+    default: var(--aui-font-sm)
+    description: Label text font size.
+  - name: --aui-field-label-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Label text font weight.
+  - name: --aui-field-label-color
+    default: var(--aui-ink-muted)
+    description: Label text color.
+  - name: --aui-field-label-line-height
+    default: var(--aui-control-line-height-relaxed)
+    description: Label text line height.
+  - name: --aui-field-description-color
+    default: var(--aui-ink-muted)
+    description: Description text color.
+  - name: --aui-field-description-font-size
+    default: var(--aui-font-sm)
+    description: Description text font size.
+  - name: --aui-field-error-color
+    default: var(--aui-danger, oklch(0.65 0.2 25))
+    description: Error message text color.
 
 # ── Examples ──────────────────────────────────────────────
 

package/dist/docs/components/graph-port.yaml

@@ -65,6 +65,29 @@ composition:
     Place inside aui-graph-node. The port-id is referenced by
     noodle selectors as "nodeId:portId".
 
+tokens:
+  - name: --aui-graph-port-size
+    default: 8px
+    description: Diameter of the port dot.
+  - name: --aui-graph-port-background
+    default: var(--aui-doc)
+    description: Fill color of the port dot (unfilled state).
+  - name: --aui-graph-port-border-width
+    default: 2px
+    description: Border width of the port dot.
+  - name: --aui-graph-port-border-color
+    default: var(--aui-border)
+    description: Default border color of the port dot.
+  - name: --aui-graph-port-border-color-input
+    default: var(--aui-success)
+    description: Border color for input-type ports.
+  - name: --aui-graph-port-border-color-output
+    default: var(--aui-accent)
+    description: Border color for output-type ports.
+  - name: --aui-graph-port-hover-shadow
+    default: "0 0 6px color-mix(in srgb, var(--aui-accent) 40%, transparent)"
+    description: Box shadow on hover.
+
 examples:
   - html: |
       <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>

package/dist/docs/components/gripper.yaml

@@ -39,6 +39,29 @@ a11y:
   aria:
     aria-orientation: Set from orientation attribute.
 
+tokens:
+  - name: --aui-gripper-color
+    default: var(--aui-border-muted)
+    description: Color of the feedback line at rest.
+  - name: --aui-gripper-color-hover
+    default: var(--aui-accent)
+    description: Color of the feedback line on hover.
+  - name: --aui-gripper-color-dragging
+    default: var(--aui-accent)
+    description: Color of the accent bar while dragging.
+  - name: --aui-gripper-size
+    default: 2px
+    description: Width/height of the feedback line at rest.
+  - name: --aui-gripper-size-dragging
+    default: 6px
+    description: Width/height of the accent bar while dragging.
+  - name: --aui-gripper-border-radius
+    default: 2px
+    description: Border radius of the feedback line at rest.
+  - 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.

package/dist/docs/components/icon.yaml

@@ -80,8 +80,15 @@ a11y:
 # ── CSS tokens consumed ──────────────────────────────────
 
 tokens:
-  sizing:
-    - --aui-icon-size
+  - name: --aui-icon-width
+    default: var(--aui-icon-size)
+    description: Icon width.
+  - name: --aui-icon-height
+    default: var(--aui-icon-size)
+    description: Icon height.
+  - name: --aui-icon-color
+    default: currentColor
+    description: Icon fill color, inherited from parent.
 
 # ── Examples ──────────────────────────────────────────────
 

package/dist/docs/components/input-otp.yaml

@@ -43,6 +43,50 @@ a11y:
     ArrowRight: Move to next cell.
     Backspace: Clear current cell and move to previous.
 
+tokens:
+  - name: --aui-input-otp-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between cells.
+  - name: --aui-input-otp-cell-size
+    default: var(--aui-size)
+    description: Width and height of each cell.
+  - name: --aui-input-otp-font-family
+    default: var(--aui-font-family)
+    description: Cell text font family.
+  - name: --aui-input-otp-font-size
+    default: var(--aui-font-xl)
+    description: Cell text font size.
+  - name: --aui-input-otp-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Cell text font weight.
+  - name: --aui-input-otp-color
+    default: var(--aui-ink)
+    description: Cell text color.
+  - name: --aui-input-otp-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Cell background color.
+  - name: --aui-input-otp-border
+    default: var(--aui-stroke)
+    description: Cell border color.
+  - name: --aui-input-otp-border-radius
+    default: var(--aui-radius)
+    description: Cell corner radius.
+  - name: --aui-input-otp-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Cell border color on hover.
+  - name: --aui-input-otp-border-filled
+    default: var(--aui-solid, var(--aui-accent, oklch(0.55 0.2 260)))
+    description: Cell border color when filled.
+  - name: --aui-input-otp-background-disabled
+    default: var(--aui-fill-disabled, var(--aui-action-disabled))
+    description: Cell background when disabled.
+  - name: --aui-input-otp-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Cell text color when disabled.
+  - name: --aui-input-otp-border-disabled
+    default: var(--aui-stroke-disabled, var(--aui-border-disabled))
+    description: Cell border color when disabled.
+
 events:
   aui:complete:
     description: Fired when all cells are filled. detail.value contains the code.

package/dist/docs/components/input.yaml

@@ -217,30 +217,57 @@ css-notes:
 # ── CSS tokens consumed ──────────────────────────────────
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-font-size
-    - --aui-icon-size
-  spacing:
-    - --aui-pad-control-block
-    - --aui-pad-control-inline
-  color:
-    - --aui-ink
-    - --aui-ink-muted
-    - --aui-ink-placeholder
-    - --aui-ink-disabled
-    - --aui-control
-    - --aui-fill
-    - --aui-fill-disabled
-    - --aui-stroke
-    - --aui-stroke-hover
-    - --aui-stroke-disabled
-    - --aui-focus
-  shape:
-    - --aui-radius
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-input-size
+    default: var(--aui-size)
+    description: Overall height and minimum width.
+  - name: --aui-input-font-family
+    default: var(--aui-font-family)
+    description: Font family for input text.
+  - name: --aui-input-font-size
+    default: var(--aui-font-size)
+    description: Input text font size.
+  - name: --aui-input-font-weight
+    default: var(--aui-control-font-weight)
+    description: Input text font weight.
+  - name: --aui-input-line-height
+    default: var(--aui-control-line-height-relaxed)
+    description: Input text line height.
+  - name: --aui-input-letter-spacing
+    default: var(--aui-letter-spacing)
+    description: Input text letter spacing.
+  - name: --aui-input-color
+    default: var(--aui-ink)
+    description: Text color.
+  - name: --aui-input-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background fill color.
+  - name: --aui-input-border
+    default: var(--aui-stroke)
+    description: Border color.
+  - name: --aui-input-border-radius
+    default: var(--aui-radius)
+    description: Corner radius.
+  - name: --aui-input-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding.
+  - name: --aui-input-padding-block
+    default: var(--aui-pad-control-block)
+    description: Vertical padding.
+  - name: --aui-input-placeholder-color
+    default: var(--aui-ink-placeholder, var(--aui-ink-muted))
+    description: Placeholder text color.
+  - name: --aui-input-icon-size
+    default: var(--aui-icon-size)
+    description: Size of leading and trailing icons.
+  - name: --aui-input-icon-color
+    default: var(--aui-ink-muted)
+    description: Color of leading and trailing icons.
+  - name: --aui-input-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Border color on hover.
+  - name: --aui-input-border-focus
+    default: var(--aui-focus)
+    description: Border and outline color on focus.
 
 # ── Examples ──────────────────────────────────────────────
 

package/dist/docs/components/optgroup.yaml

@@ -11,6 +11,35 @@ description: >
   vertical dividers. When a group overflows, all its items move to the
   overflow menu together, rendered under a divider + uppercase header.
 
+tokens:
+  - name: --aui-optgroup-gap
+    default: var(--aui-space)
+    description: Vertical gap between group label and options.
+  - name: --aui-optgroup-border
+    default: var(--aui-border-muted)
+    description: Separator border color between groups.
+  - name: --aui-optgroup-label-font-family
+    default: var(--aui-font-family)
+    description: Group label font family.
+  - name: --aui-optgroup-label-font-size
+    default: var(--aui-group-header-font)
+    description: Group label font size.
+  - name: --aui-optgroup-label-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Group label font weight.
+  - name: --aui-optgroup-label-color
+    default: var(--aui-ink-muted)
+    description: Group label text color.
+  - name: --aui-optgroup-label-size
+    default: var(--aui-size)
+    description: Group label minimum height.
+  - name: --aui-optgroup-label-padding-block
+    default: var(--aui-pad-control-block)
+    description: Group label vertical padding.
+  - name: --aui-optgroup-label-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Group label horizontal padding.
+
 attributes:
   label:
     type: string

package/dist/docs/components/option.yaml

@@ -35,6 +35,35 @@ attributes:
     description: >
       Display label override. When empty, textContent is used.
 
+tokens:
+  - name: --aui-option-color
+    default: var(--aui-ink)
+    description: Option text color.
+  - name: --aui-option-border-radius
+    default: var(--aui-radius)
+    description: Option corner radius.
+  - name: --aui-option-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding.
+  - name: --aui-option-padding-block
+    default: var(--aui-pad-control-block)
+    description: Vertical padding.
+  - name: --aui-option-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between content slots.
+  - name: --aui-option-font-size
+    default: var(--aui-font-size)
+    description: Option text font size.
+  - name: --aui-option-min-height
+    default: var(--aui-size)
+    description: Minimum row height.
+  - name: --aui-option-color-hover
+    default: var(--aui-ink-strong)
+    description: Text color on hover and keyboard highlight.
+  - name: --aui-option-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background on hover and keyboard highlight.
+
 a11y:
   role: option
   aria:

package/dist/docs/components/page-context.yaml

@@ -25,10 +25,18 @@ composition:
       based on which children are present.
 
 tokens:
-  sizing:
-    - --aui-pad-control-block
-    - --aui-size
-    - --aui-space
+  - name: --aui-page-context-min-height
+    default: "calc(var(--aui-pad-control-block) * 2 + var(--aui-size))"
+    description: Minimum height of the context bar.
+  - name: --aui-page-context-gap
+    default: "calc(var(--aui-space) * 2)"
+    description: Gap between grid columns in the context bar.
+  - name: --aui-page-context-padding-block
+    default: var(--aui-space)
+    description: Block padding of the context bar.
+  - name: --aui-page-context-padding-inline
+    default: "calc(var(--aui-space) * 3)"
+    description: Inline padding of the context bar.
 
 examples:
   - html: |

package/dist/docs/components/page-main.yaml

@@ -20,12 +20,24 @@ composition:
       children.
 
 tokens:
-  color:
-    - --aui-panel
-    - --aui-border
-  sizing:
-    - --aui-space
-    - --aui-radius
+  - name: --aui-page-main-gap
+    default: "calc(var(--aui-space) * 2)"
+    description: Gap between the main panel and adjacent elements.
+  - name: --aui-page-main-padding-block-end
+    default: "calc(var(--aui-space) * 2)"
+    description: Bottom padding of the page-main area.
+  - name: --aui-page-main-padding-inline-end
+    default: "calc(var(--aui-space) * 2)"
+    description: Right padding of the page-main area.
+  - name: --aui-page-main-background
+    default: var(--aui-panel)
+    description: Background of the main content panel.
+  - name: --aui-page-main-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the main content panel.
+  - name: --aui-page-main-border-color
+    default: var(--aui-border)
+    description: Border color for sticky header/footer separators.
 
 examples:
   - html: |

package/dist/docs/components/pagination.yaml

@@ -38,6 +38,47 @@ events:
   change:
     description: Fired when page changes. detail.page is the new page number.
 
+tokens:
+  - name: --aui-pagination-gap
+    default: 2px
+    description: Gap between page buttons.
+  - name: --aui-pagination-font-family
+    default: var(--aui-font-family)
+    description: Font family for page numbers.
+  - name: --aui-pagination-font-size
+    default: var(--aui-font-size)
+    description: Font size for page numbers.
+  - name: --aui-pagination-color
+    default: var(--aui-ink-muted)
+    description: Text color of page buttons.
+  - name: --aui-pagination-color-hover
+    default: var(--aui-ink)
+    description: Text color of page buttons on hover.
+  - name: --aui-pagination-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background color of page buttons on hover.
+  - name: --aui-pagination-border-radius
+    default: var(--aui-radius)
+    description: Border radius of page buttons.
+  - name: --aui-pagination-padding-inline
+    default: calc(var(--aui-pad-control-inline) * 0.5)
+    description: Horizontal padding inside page buttons.
+  - name: --aui-pagination-current-background
+    default: var(--aui-solid, var(--aui-accent, oklch(0.55 0.2 260)))
+    description: Background color of the current page button.
+  - name: --aui-pagination-current-color
+    default: var(--aui-on-solid, #fff)
+    description: Text color of the current page button.
+  - name: --aui-pagination-current-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight of the current page button.
+  - name: --aui-pagination-arrow-font-size
+    default: var(--aui-font-xl)
+    description: Font size for prev/next arrow icons.
+  - name: --aui-pagination-ellipsis-color
+    default: var(--aui-ink-muted)
+    description: Color of the ellipsis indicators.
+
 examples:
   - html: <aui-pagination page="3" total="10"></aui-pagination>
     description: Pagination on page 3 of 10.

package/dist/docs/components/pane.yaml

@@ -64,6 +64,29 @@ attributes:
       Resize priority. High-priority panes absorb delta first during
       cascade resize. Low-priority panes resize last.
 
+tokens:
+  - name: --aui-pane-accent
+    default: var(--aui-focus)
+    description: Accent color for edge indicators during drag.
+  - name: --aui-pane-border
+    default: var(--aui-border)
+    description: Border color for pane header divider.
+  - name: --aui-pane-background
+    default: var(--aui-panel)
+    description: Background color for the pane header.
+  - name: --aui-pane-content-padding
+    default: calc(2 * var(--aui-space))
+    description: Padding inside the pane content area.
+  - name: --aui-pane-header-font-size
+    default: var(--aui-group-header-font)
+    description: Font size for the pane header label.
+  - name: --aui-pane-header-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for the pane header label.
+  - name: --aui-pane-header-letter-spacing
+    default: "0.04em"
+    description: Letter spacing for the uppercase pane header label.
+
 composition:
   parents: [aui-panes]
   children: [any]

package/dist/docs/components/radio.yaml

@@ -99,20 +99,48 @@ events:
     description: Fires when this radio becomes selected.
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-widget-size
-    - --aui-font-size
-  color:
-    - --aui-ink
-    - --aui-control
-    - --aui-fill
-    - --aui-stroke
-    - --aui-solid
-    - --aui-focus
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-radio-gap
+    default: calc(var(--aui-space) * 2)
+    description: Gap between circle and label.
+  - name: --aui-radio-font-family
+    default: var(--aui-font-family)
+    description: Label font family.
+  - name: --aui-radio-font-size
+    default: var(--aui-font-size)
+    description: Label font size.
+  - name: --aui-radio-line-height
+    default: var(--aui-control-line-height-relaxed)
+    description: Label line height.
+  - name: --aui-radio-color
+    default: var(--aui-ink)
+    description: Label text color.
+  - name: --aui-radio-circle-size
+    default: var(--aui-widget-size)
+    description: Width and height of the radio circle.
+  - name: --aui-radio-circle-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Unchecked circle background.
+  - name: --aui-radio-circle-border
+    default: var(--aui-stroke)
+    description: Unchecked circle border color.
+  - name: --aui-radio-checked-background
+    default: var(--aui-accent)
+    description: Selected circle background.
+  - name: --aui-radio-checked-border
+    default: var(--aui-accent)
+    description: Selected circle border color.
+  - name: --aui-radio-checked-dot-color
+    default: var(--aui-solid-ink)
+    description: Inner dot color when selected.
+  - name: --aui-radio-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Circle border on hover.
+  - name: --aui-radio-background-disabled
+    default: var(--aui-fill-disabled, var(--aui-action-disabled))
+    description: Circle background when disabled.
+  - name: --aui-radio-border-disabled
+    default: var(--aui-stroke-disabled, var(--aui-border-disabled))
+    description: Circle border when disabled.
 
 css-notes:
   attr-audit: