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

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

@@ -32,6 +32,59 @@ composition:
   parents: [aui-agent-message, aui-agent-feed]
   children: []
 
+tokens:
+  - name: --aui-agent-seeds-padding-block
+    default: var(--aui-agent-seed-pad-block, var(--aui-space))
+    description: Block padding of the seeds container.
+  - name: --aui-agent-seeds-padding-inline
+    default: var(--aui-agent-seed-pad-inline, 0.875rem)
+    description: Inline padding of the seeds container.
+  - name: --aui-agent-seeds-gap
+    default: var(--aui-agent-seed-gap, var(--aui-space))
+    description: Gap between chip rows.
+  - name: --aui-agent-seeds-chip-gap
+    default: "calc(var(--aui-space) * 0.5)"
+    description: Gap between icon and label within a chip.
+  - name: --aui-agent-seeds-chip-padding-block
+    default: "calc(var(--aui-space) * 0.5)"
+    description: Block padding of each chip.
+  - name: --aui-agent-seeds-chip-padding-inline
+    default: "calc(var(--aui-space) * 1.5)"
+    description: Inline padding of each chip.
+  - name: --aui-agent-seeds-chip-font-family
+    default: var(--aui-font-family)
+    description: Font family for chip text.
+  - name: --aui-agent-seeds-chip-font-size
+    default: var(--aui-font-size-sm, 0.8125rem)
+    description: Font size for chip text.
+  - name: --aui-agent-seeds-chip-line-height
+    default: var(--aui-line-height)
+    description: Line height for chip text.
+  - name: --aui-agent-seeds-chip-color
+    default: var(--aui-ink)
+    description: Text color of chips.
+  - name: --aui-agent-seeds-chip-border
+    default: var(--aui-stroke, var(--aui-border-muted))
+    description: Border color of chips.
+  - name: --aui-agent-seeds-chip-border-radius
+    default: var(--aui-radius)
+    description: Border radius of chips.
+  - name: --aui-agent-seeds-chip-background
+    default: transparent
+    description: Background of chips at rest.
+  - name: --aui-agent-seeds-chip-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background of chips on hover.
+  - name: --aui-agent-seeds-chip-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Border color of chips on hover.
+  - name: --aui-agent-seeds-chip-color-hover
+    default: var(--aui-ink-strong)
+    description: Text color of chips on hover.
+  - name: --aui-agent-seeds-chip-background-active
+    default: var(--aui-fill-active, var(--aui-action-active))
+    description: Background of chips when active/pressed.
+
 examples:
   - html: |
       <aui-agent-seeds options='[{"value":"clarify","label":"Clarify user problem"},{"value":"context","label":"Define user context"},{"value":"deliverable","label":"Select deliverable"},{"value":"timeline","label":"Set timeline"}]'>

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

@@ -21,6 +21,53 @@ composition:
   parents: [aui-agent-message]
   children: []
 
+tokens:
+  - name: --aui-agent-text-padding-block
+    default: var(--aui-agent-bubble-pad-block, 0.625rem)
+    description: Block padding of the text container.
+  - name: --aui-agent-text-padding-inline
+    default: var(--aui-agent-bubble-pad-inline, 0.875rem)
+    description: Inline padding of the text container.
+  - name: --aui-agent-text-prose-gap
+    default: "var(--aui-agent-prose-gap, calc(var(--aui-space) * 2))"
+    description: Vertical gap between prose elements (paragraphs, headings, etc.).
+  - name: --aui-agent-text-heading-font-weight
+    default: var(--aui-font-weight-bold, 600)
+    description: Font weight for headings inside rendered markdown.
+  - name: --aui-agent-text-blockquote-border
+    default: var(--aui-border-muted)
+    description: Left border color of blockquotes.
+  - name: --aui-agent-text-blockquote-color
+    default: var(--aui-ink-muted)
+    description: Text color of blockquotes.
+  - name: --aui-agent-text-code-font-family
+    default: var(--aui-font-mono, monospace)
+    description: Font family for inline code.
+  - name: --aui-agent-text-code-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background of inline code spans.
+  - name: --aui-agent-text-code-border-radius
+    default: "calc(var(--aui-radius) * 0.5)"
+    description: Border radius of inline code spans.
+  - name: --aui-agent-text-pre-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Background of code blocks.
+  - name: --aui-agent-text-pre-border-radius
+    default: "calc(var(--aui-radius) * 0.5)"
+    description: Border radius of code blocks.
+  - name: --aui-agent-text-pre-padding
+    default: "calc(var(--aui-space) * 2)"
+    description: Padding inside code blocks.
+  - name: --aui-agent-text-link-color
+    default: var(--aui-ink-accent, var(--aui-accent-solid))
+    description: Text color of links.
+  - name: --aui-agent-text-link-color-hover
+    default: var(--aui-ink-hover)
+    description: Text color of links on hover.
+  - name: --aui-agent-text-hr-border
+    default: var(--aui-border-muted)
+    description: Border color of horizontal rules.
+
 examples:
   - html: |
       <aui-agent-text>## Getting Started

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

@@ -37,6 +37,26 @@ composition:
   parents: [aui-agent-feed]
   children: [aui-avatar, aui-agent-message, any]
 
+tokens:
+  - name: --aui-agent-thread-column-gap
+    default: "var(--aui-agent-message-gap, calc(var(--aui-space) * 2))"
+    description: Gap between avatar column and message column.
+  - name: --aui-agent-thread-max-width
+    default: var(--aui-agent-bubble-max-width, 85%)
+    description: Maximum width of the thread group.
+  - name: --aui-agent-thread-context-gap
+    default: var(--aui-space)
+    description: Gap between items in the context area (metadata row).
+  - name: --aui-agent-thread-bubbles-gap
+    default: var(--aui-space)
+    description: Gap between consecutive message bubbles.
+  - name: --aui-agent-thread-user-avatar-background
+    default: var(--aui-agent-bubble-user)
+    description: Background of the user avatar circle.
+  - name: --aui-agent-thread-user-avatar-color
+    default: var(--aui-agent-bubble-user-ink)
+    description: Text/icon color of the user avatar.
+
 examples:
   - html: |
       <aui-agent-thread role="assistant" sender="Claude">

package/dist/docs/components/app-shell.yaml

@@ -25,18 +25,24 @@ composition:
     relationship between sidebar width and content column flex.
 
 tokens:
-  color:
-    - --aui-doc
-    - --aui-ink
-    - --aui-panel
-    - --aui-border
-  typography:
-    - --aui-font-family
-  sizing:
-    - --aui-space
-    - --aui-radius
-    - --aui-pad-control-block
-    - --aui-size
+  - name: --aui-app-shell-background
+    default: var(--aui-doc)
+    description: Background color for the application shell.
+  - name: --aui-app-shell-color
+    default: var(--aui-ink)
+    description: Default text color for the shell.
+  - name: --aui-app-shell-font-family
+    default: var(--aui-font-family)
+    description: Font family for the shell.
+  - name: --aui-app-shell-panel-background
+    default: var(--aui-panel)
+    description: Background color for the main content panel.
+  - name: --aui-app-shell-panel-border-radius
+    default: var(--aui-radius)
+    description: Border radius for the main content panel.
+  - name: --aui-app-shell-panel-border-color
+    default: var(--aui-border)
+    description: Border color for sticky header/footer inside main.
 
 examples:
   - html: |

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

@@ -30,6 +30,38 @@ composition:
   parents: [aui-breadcrumb]
   children: null
 
+tokens:
+  - name: --aui-breadcrumb-item-gap
+    default: calc(var(--aui-space) * 2)
+    description: Gap between separator and breadcrumb text.
+  - name: --aui-breadcrumb-item-font-family
+    default: var(--aui-font-family)
+    description: Font family for breadcrumb text.
+  - name: --aui-breadcrumb-item-font-size
+    default: var(--aui-font-size)
+    description: Font size for breadcrumb text.
+  - name: --aui-breadcrumb-item-line-height
+    default: var(--aui-control-line-height)
+    description: Line height for breadcrumb text.
+  - name: --aui-breadcrumb-item-color
+    default: var(--aui-ink-muted)
+    description: Default text color of breadcrumb items.
+  - name: --aui-breadcrumb-item-separator-color
+    default: var(--aui-ink-muted)
+    description: Color of the separator character between items.
+  - name: --aui-breadcrumb-item-link-color
+    default: var(--aui-ink-muted)
+    description: Color of breadcrumb link text.
+  - name: --aui-breadcrumb-item-link-color-hover
+    default: var(--aui-ink)
+    description: Color of breadcrumb link text on hover.
+  - name: --aui-breadcrumb-item-color-current
+    default: var(--aui-ink)
+    description: Text color of the current page item.
+  - name: --aui-breadcrumb-item-font-weight-current
+    default: var(--aui-font-weight-semibold)
+    description: Font weight of the current page item.
+
 examples:
   - html: |
       <aui-breadcrumb>

package/dist/docs/components/breadcrumb.yaml

@@ -32,6 +32,17 @@ composition:
   parents: [any]
   children: [aui-breadcrumb-item]
 
+tokens:
+  - name: --aui-breadcrumb-font-family
+    default: var(--aui-font-family)
+    description: Font family for breadcrumb text.
+  - name: --aui-breadcrumb-font-size
+    default: var(--aui-font-size)
+    description: Font size for breadcrumb text.
+  - name: --aui-breadcrumb-gap
+    default: "calc(var(--aui-space) * 2)"
+    description: Gap between breadcrumb items.
+
 examples:
   - html: |
       <aui-breadcrumb>

package/dist/docs/components/button.yaml

@@ -354,27 +354,57 @@ events:
 # ── CSS tokens consumed ──────────────────────────────────
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-font-size
-    - --aui-font-family
-    - --aui-icon-size
-  spacing:
-    - --aui-pad-control-block
-    - --aui-pad-control-inline
-    - --aui-pad-gap-control
-    - --aui-space
-  color:
-    - --aui-fill
-    - --aui-stroke
-    - --aui-indicator
-    - --aui-ink
-    - --aui-focus
-  shape:
-    - --aui-radius
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-button-size
+    default: var(--aui-size)
+    description: Overall height and minimum width.
+  - name: --aui-button-font-family
+    default: var(--aui-font-family)
+    description: Font family for the label text.
+  - name: --aui-button-font-size
+    default: var(--aui-font-size)
+    description: Label font size.
+  - name: --aui-button-font-weight
+    default: var(--aui-control-font-weight)
+    description: Label font weight.
+  - name: --aui-button-line-height
+    default: var(--aui-control-line-height)
+    description: Label line height.
+  - name: --aui-button-letter-spacing
+    default: var(--aui-letter-spacing)
+    description: Label letter spacing.
+  - name: --aui-button-icon-size
+    default: var(--aui-icon-size)
+    description: Size of leading and trailing icons.
+  - name: --aui-button-color
+    default: var(--aui-indicator, var(--aui-ink))
+    description: Text and icon color.
+  - name: --aui-button-background
+    default: var(--aui-fill)
+    description: Background fill color.
+  - name: --aui-button-border
+    default: var(--aui-stroke)
+    description: Border color.
+  - name: --aui-button-border-radius
+    default: var(--aui-radius)
+    description: Corner radius.
+  - name: --aui-button-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Horizontal padding.
+  - name: --aui-button-padding-block
+    default: var(--aui-pad-control-block)
+    description: Vertical padding.
+  - name: --aui-button-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between icon and label slots.
+  - name: --aui-button-color-hover
+    default: var(--aui-indicator-hover, var(--aui-ink-hover))
+    description: Text and icon color on hover.
+  - name: --aui-button-background-hover
+    default: var(--aui-fill-hover)
+    description: Background fill on hover.
+  - name: --aui-button-border-hover
+    default: var(--aui-stroke-hover)
+    description: Border color on hover.
 
 # ── Use cases ─────────────────────────────────────────────
 

package/dist/docs/components/calendar.yaml

@@ -50,6 +50,83 @@ a11y:
     Enter: Select focused date.
     Space: Select focused date.
 
+tokens:
+  - name: --aui-calendar-gap
+    default: calc(var(--aui-space) * 2)
+    description: Gap between calendar sections (header, weekdays, grid).
+  - name: --aui-calendar-padding
+    default: calc(var(--aui-space) * 3)
+    description: Outer padding of the calendar container.
+  - name: --aui-calendar-border-radius
+    default: var(--aui-radius)
+    description: Border radius for the calendar container.
+  - name: --aui-calendar-background
+    default: var(--aui-card)
+    description: Background color of the calendar.
+  - name: --aui-calendar-color
+    default: var(--aui-ink)
+    description: Default text color for the calendar.
+  - name: --aui-calendar-font-size
+    default: var(--aui-font-sm)
+    description: Base font size for calendar content.
+  - name: --aui-calendar-grid-gap
+    default: 2px
+    description: Gap between day cells in the grid.
+  - name: --aui-calendar-weekday-font-size
+    default: var(--aui-font-xs)
+    description: Font size for weekday labels.
+  - name: --aui-calendar-weekday-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight for weekday labels.
+  - name: --aui-calendar-weekday-color
+    default: var(--aui-ink-muted)
+    description: Text color for weekday labels.
+  - name: --aui-calendar-cell-border-radius
+    default: var(--aui-radius)
+    description: Border radius for day and month/year cells.
+  - name: --aui-calendar-cell-background-hover
+    default: var(--aui-control)
+    description: Background color on cell hover.
+  - name: --aui-calendar-cell-color-hover
+    default: var(--aui-ink-strong)
+    description: Text color on cell hover.
+  - name: --aui-calendar-cell-padding-block
+    default: var(--aui-pad-control-block)
+    description: Block padding for month/year cells.
+  - name: --aui-calendar-cell-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline padding for month/year cells.
+  - name: --aui-calendar-today-background
+    default: var(--aui-control)
+    description: Background color for the today cell.
+  - name: --aui-calendar-today-color
+    default: var(--aui-ink-strong)
+    description: Text color for the today cell.
+  - name: --aui-calendar-today-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for the today cell.
+  - name: --aui-calendar-selected-background
+    default: var(--aui-accent, var(--aui-solid))
+    description: Background color for selected cells.
+  - name: --aui-calendar-selected-color
+    default: var(--aui-solid-ink, #fff)
+    description: Text color for selected cells.
+  - name: --aui-calendar-selected-font-weight
+    default: var(--aui-font-weight-semibold)
+    description: Font weight for selected cells.
+  - name: --aui-calendar-outside-color
+    default: var(--aui-ink-muted)
+    description: Text color for days outside the current month.
+  - name: --aui-calendar-disabled-color
+    default: var(--aui-ink-disabled)
+    description: Text color for disabled dates.
+  - name: --aui-calendar-header-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight for header navigation buttons.
+  - name: --aui-calendar-header-title-color
+    default: var(--aui-ink-strong)
+    description: Text color for the month/year title button.
+
 events:
   aui:change:
     description: Fired on single date selection. Detail contains { value }.

package/dist/docs/components/canvas.yaml

@@ -97,10 +97,18 @@ slots:
     description: Floating indicator at right center of the viewport.
 
 tokens:
-  custom:
-    - --_canvas-x — Current pan X offset in px
-    - --_canvas-y — Current pan Y offset in px
-    - --_canvas-zoom — Current zoom level (1 = 100%)
+  - name: --aui-canvas-background
+    default: var(--aui-doc)
+    description: Background color of the canvas surface.
+  - name: --aui-canvas-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the canvas container.
+  - name: --aui-canvas-border-color
+    default: var(--aui-border-muted)
+    description: Border color when the bordered attribute is set.
+  - name: --aui-canvas-focus-color
+    default: var(--aui-focus)
+    description: Focus ring color when the canvas is focused.
 
 events:
   aui:canvas-pan:

package/dist/docs/components/checkbox.yaml

@@ -100,21 +100,51 @@ events:
     description: Fires when checked state changes.
 
 tokens:
-  sizing:
-    - --aui-size
-    - --aui-widget-size
-    - --aui-font-size
-  color:
-    - --aui-ink
-    - --aui-control
-    - --aui-fill
-    - --aui-stroke
-    - --aui-solid
-    - --aui-on-solid
-    - --aui-focus
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-checkbox-gap
+    default: calc(var(--aui-space) * 2)
+    description: Gap between checkbox box and label.
+  - name: --aui-checkbox-font-family
+    default: var(--aui-font-family)
+    description: Label font family.
+  - name: --aui-checkbox-font-size
+    default: var(--aui-font-size)
+    description: Label font size.
+  - name: --aui-checkbox-line-height
+    default: var(--aui-control-line-height-relaxed)
+    description: Label line height.
+  - name: --aui-checkbox-color
+    default: var(--aui-ink)
+    description: Label text color.
+  - name: --aui-checkbox-box-size
+    default: var(--aui-widget-size)
+    description: Width and height of the visual checkbox box.
+  - name: --aui-checkbox-box-background
+    default: var(--aui-control, var(--aui-fill))
+    description: Unchecked box background.
+  - name: --aui-checkbox-box-border
+    default: var(--aui-stroke)
+    description: Unchecked box border color.
+  - name: --aui-checkbox-box-border-radius
+    default: calc(var(--aui-radius) * 0.4)
+    description: Box corner radius.
+  - name: --aui-checkbox-checked-background
+    default: var(--aui-accent)
+    description: Checked box background.
+  - name: --aui-checkbox-checked-border
+    default: var(--aui-accent)
+    description: Checked box border color.
+  - name: --aui-checkbox-checked-color
+    default: var(--aui-solid-ink)
+    description: Check mark color.
+  - name: --aui-checkbox-border-hover
+    default: var(--aui-stroke-hover, var(--aui-border-hover))
+    description: Box border color on hover.
+  - name: --aui-checkbox-background-disabled
+    default: var(--aui-fill-disabled, var(--aui-action-disabled))
+    description: Box background when disabled.
+  - name: --aui-checkbox-border-disabled
+    default: var(--aui-stroke-disabled, var(--aui-border-disabled))
+    description: Box border color when disabled.
 
 css-notes:
   attr-audit:

package/dist/docs/components/command-group.yaml

@@ -9,6 +9,38 @@ attributes:
     type: string
     default: ""
     description: Group heading text.
+tokens:
+  - name: --aui-command-group-gap
+    default: var(--aui-space)
+    description: Gap between group items.
+  - name: --aui-command-group-border-color
+    default: var(--aui-border-muted)
+    description: Border color between adjacent groups.
+  - name: --aui-command-group-heading-size
+    default: var(--aui-size)
+    description: Minimum height of the group heading.
+  - name: --aui-command-group-heading-padding-block
+    default: var(--aui-pad-control-block)
+    description: Block padding for the group heading.
+  - name: --aui-command-group-heading-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline padding for the group heading.
+  - name: --aui-command-group-heading-font-family
+    default: var(--aui-font-family)
+    description: Font family for the group heading.
+  - name: --aui-command-group-heading-font-size
+    default: var(--aui-group-header-font)
+    description: Font size for the group heading.
+  - name: --aui-command-group-heading-font-weight
+    default: var(--aui-font-weight-medium)
+    description: Font weight for the group heading.
+  - name: --aui-command-group-heading-letter-spacing
+    default: "0.05em"
+    description: Letter spacing for the uppercase group heading.
+  - name: --aui-command-group-heading-color
+    default: var(--aui-ink-muted)
+    description: Text color for the group heading.
+
 a11y:
   role: group
 composition:

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

@@ -9,6 +9,35 @@ attributes:
     type: string
     default: "Search…"
     description: Placeholder text.
+tokens:
+  - name: --aui-command-input-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between input icon and text surface.
+  - name: --aui-command-input-size
+    default: var(--aui-size)
+    description: Maximum height of the input row.
+  - name: --aui-command-input-padding-block
+    default: calc(var(--aui-space) * 2)
+    description: Block (vertical) padding for the input.
+  - name: --aui-command-input-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline (horizontal) padding for the input.
+  - name: --aui-command-input-border-color
+    default: var(--aui-border-muted)
+    description: Bottom border color separating input from results.
+  - name: --aui-command-input-font-family
+    default: var(--aui-font-family)
+    description: Font family for input text.
+  - name: --aui-command-input-font-size
+    default: var(--aui-font-size)
+    description: Font size for input text.
+  - name: --aui-command-input-color
+    default: var(--aui-ink)
+    description: Text color for the input.
+  - name: --aui-command-input-color-placeholder
+    default: var(--aui-ink-placeholder, var(--aui-ink-muted))
+    description: Placeholder text color.
+
 a11y:
   role: searchbox
 composition:

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

@@ -25,6 +25,47 @@ attributes:
     default: ""
     description: Extra search terms not visible in the label.
 
+tokens:
+  - name: --aui-command-item-gap
+    default: var(--aui-pad-gap-control)
+    description: Gap between item icon and label.
+  - name: --aui-command-item-size
+    default: var(--aui-size)
+    description: Minimum height of the command item.
+  - name: --aui-command-item-padding-block
+    default: var(--aui-pad-control-block)
+    description: Block (vertical) padding for items.
+  - name: --aui-command-item-padding-inline
+    default: var(--aui-pad-control-inline)
+    description: Inline (horizontal) padding for items.
+  - name: --aui-command-item-font-family
+    default: var(--aui-font-family)
+    description: Font family for item text.
+  - name: --aui-command-item-font-size
+    default: var(--aui-font-size)
+    description: Font size for item text.
+  - name: --aui-command-item-line-height
+    default: var(--aui-control-line-height)
+    description: Line height for item text.
+  - name: --aui-command-item-color
+    default: var(--aui-ink)
+    description: Default text color for items.
+  - name: --aui-command-item-border-radius
+    default: calc(var(--aui-radius) - var(--aui-space))
+    description: Border radius for item highlight.
+  - name: --aui-command-item-background-hover
+    default: var(--aui-fill-hover, var(--aui-action-hover))
+    description: Background color on hover or keyboard focus.
+  - name: --aui-command-item-color-hover
+    default: var(--aui-ink-strong)
+    description: Text color on hover or keyboard focus.
+  - name: --aui-command-item-color-selected
+    default: var(--aui-ink-strong)
+    description: Text color for selected items.
+  - name: --aui-command-item-color-disabled
+    default: var(--aui-ink-disabled, var(--aui-ink-muted))
+    description: Text color for disabled items.
+
 a11y:
   role: option
 

package/dist/docs/components/command.yaml

@@ -26,6 +26,23 @@ events:
   dismiss:
     description: Fired on Escape key. Parent dialog can listen to close.
 
+tokens:
+  - name: --aui-command-background
+    default: var(--aui-modal, var(--aui-doc))
+    description: Background color for the command palette.
+  - name: --aui-command-color
+    default: var(--aui-ink)
+    description: Default text color for command palette content.
+  - name: --aui-command-border-color
+    default: var(--aui-border-muted)
+    description: Border color for the command palette container.
+  - name: --aui-command-border-radius
+    default: var(--aui-radius)
+    description: Border radius for the command palette container.
+  - name: --aui-command-gap
+    default: var(--aui-space)
+    description: Gap between command palette sections.
+
 composition:
   parents: [aui-dialog, any]
   children: [aui-command-input, aui-command-list, aui-command-empty]

package/dist/docs/components/container.yaml

@@ -136,21 +136,15 @@ events:
     description: Fires on interactive containers. Navigates to href if set.
 
 tokens:
-  color:
-    - --aui-card
-    - --aui-doc
-    - --aui-border-muted
-    - --aui-border-hover
-    - --aui-focus
-  shape:
-    - --aui-radius
-  shadow:
-    - --aui-shadow-sm
-    - --aui-shadow-md
-    - --aui-shadow-lg
-  motion:
-    - --aui-duration
-    - --aui-easing
+  - name: --aui-container-background
+    default: var(--aui-card, var(--aui-doc))
+    description: Background color of the container surface.
+  - name: --aui-container-border-radius
+    default: var(--aui-radius)
+    description: Border radius of the container.
+  - name: --aui-container-font-size
+    default: var(--aui-font-lg)
+    description: Base font size for the container.
 
 examples:
   - html: |