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

package/dist/docs/components/badge.yaml

@@ -0,0 +1,110 @@
+name: aui-badge
+tag: aui-badge
+type: element
+summary: Status indicator with intent colors and dot mode.
+description: |
+  Inline status indicator. Accepts intent for color family. Dot mode renders as a small circle indicator with no text. Use for status labels, counts, category tags.
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: medium
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+    description: Controls badge height and font size.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: true
+    default: neutral
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+    description: Color family for the badge fill and text.
+  variant:
+    syntax: boolean
+    exclusive: true
+    cascades: true
+    default: default
+    values:
+      - primary
+      - outline
+      - ghost
+    description: Surface expression for the badge.
+modifiers:
+  dot:
+    syntax: boolean
+    description: |
+      Small circle indicator with no text content. Overrides size to a fixed dot diameter. Use for presence indicators, notification dots.
+content:
+  model: inline
+  accepts:
+    - text
+  required: false
+  description: |
+    Short label text. Keep to 1-2 words. Empty when using dot modifier — dot mode renders as a solid circle with no text.
+slots:
+  default:
+    accepts:
+      - text
+    required: false
+    description: Badge label text. Empty when dot is set.
+composition:
+  parents:
+    - aui-stack
+    - aui-header
+    - aui-footer
+    - span
+    - div
+    - td
+  children: null
+  context: |
+    Inline element — use inside text, headers, table cells, or stack rows. Group multiple badges in aui-stack direction="row". Dot badges work well next to avatar or status text.
+constraints:
+  - when: dot
+    forbids: default slot content
+    reason: |
+      Dot mode renders as a solid circle. Any text content is hidden (font-size: 0). Do not provide children when dot is set.
+tokens:
+  sizing:
+    - --aui-widget-size
+    - --aui-widget-font
+    - --aui-badge-dot
+  color:
+    - --aui-fill
+    - --aui-ink
+    - --aui-stroke
+    - --aui-solid
+  shape:
+    - --aui-radius-round
+examples:
+  - description: Default badge
+    html: <aui-badge>Default</aui-badge>
+  - description: Accent intent badge
+    html: <aui-badge accent>Accent</aui-badge>
+  - description: Success dot indicator
+    html: <aui-badge dot success></aui-badge>
+  - description: Row of intent badges
+    html: |-
+      <aui-stack direction="row" gap="2" align-items="center">
+        <aui-badge accent>New</aui-badge>
+        <aui-badge info>3</aui-badge>
+        <aui-badge warning>Draft</aui-badge>
+        <aui-badge danger>Error</aui-badge>
+      </aui-stack>
+  - description: Row of dot indicators
+    html: |-
+      <aui-stack direction="row" gap="2" align-items="center">
+        <aui-badge dot></aui-badge>
+        <aui-badge dot accent></aui-badge>
+        <aui-badge dot success></aui-badge>
+        <aui-badge dot danger></aui-badge>
+      </aui-stack>

package/dist/docs/components/bar.yaml

@@ -0,0 +1,84 @@
+name: aui-bar
+tag: aui-bar
+type: element
+summary: Chart bar element with color, tooltip, and interaction states.
+description: |
+  A CSS-only bar element for building bar charts. Sized by height percentage (vertical) or width percentage (horizontal). Uses chart color palette (--aui-chart-1 through --aui-chart-10) via the color attribute. Supports CSS-only tooltips via the label attribute, and interactive dim/highlight behavior on hover via the interactive attribute. Typically placed inside an aui-stack with direction="row" and align-items="end" to form a vertical bar chart. No JavaScript required for basic rendering.
+presentational:
+  color:
+    syntax: key-value
+    type: enum
+    values:
+      - "1"
+      - "2"
+      - "3"
+      - "4"
+      - "5"
+      - "6"
+      - "7"
+      - "8"
+      - "9"
+      - "10"
+    default: "1"
+    description: Chart color from the --aui-chart-N palette.
+modifiers:
+  faded:
+    syntax: boolean
+    description: Reduces opacity to 0.6 for de-emphasized bars.
+  highlighted:
+    syntax: boolean
+    description: Applies brightness boost and shows tooltip.
+  horizontal:
+    syntax: boolean
+    description: Switches to horizontal mode (width-based sizing, adjusted border-radius).
+  interactive:
+    syntax: boolean
+    description: Enables pointer cursor for clickable bars.
+  label:
+    syntax: key-value
+    type: string
+    description: |
+      CSS-only tooltip text shown above the bar on hover or when highlighted. Rendered via ::after pseudo-element with attr().
+tokens:
+  color:
+    - --aui-bar-background
+    - --aui-bar-tooltip-background
+    - --aui-chart-color
+    - --aui-chart-1
+  sizing:
+    - --aui-bar-border-radius
+examples:
+  - description: Simple vertical bar chart with tooltips
+    html: |-
+      <aui-stack direction="row" gap="1" align-items="end" style="height: 8rem;">
+        <aui-bar style="height: 40%;" label="40%"></aui-bar>
+        <aui-bar style="height: 65%;" label="65%"></aui-bar>
+        <aui-bar style="height: 90%;" label="90%"></aui-bar>
+        <aui-bar style="height: 50%;" label="50%"></aui-bar>
+        <aui-bar style="height: 75%;" label="75%"></aui-bar>
+      </aui-stack>
+  - description: Multi-color bars using chart palette
+    html: |-
+      <aui-stack direction="row" gap="1" align-items="end" style="height: 8rem;">
+        <aui-bar color="1" style="height: 60%;" label="Series A"></aui-bar>
+        <aui-bar color="2" style="height: 80%;" label="Series B"></aui-bar>
+        <aui-bar color="3" style="height: 45%;" label="Series C"></aui-bar>
+        <aui-bar color="4" style="height: 70%;" label="Series D"></aui-bar>
+        <aui-bar color="5" style="height: 55%;" label="Series E"></aui-bar>
+      </aui-stack>
+  - description: Horizontal bar chart
+    html: |-
+      <aui-stack gap="1" style="width: 16rem;">
+        <aui-bar horizontal style="width: 75%;" label="75%"></aui-bar>
+        <aui-bar horizontal style="width: 50%;" label="50%"></aui-bar>
+        <aui-bar horizontal style="width: 90%;" label="90%"></aui-bar>
+      </aui-stack>
+  - description: Interactive bars with faded/highlighted states
+    html: |-
+      <aui-stack direction="row" gap="1" align-items="end" style="height: 8rem;">
+        <aui-bar interactive style="height: 55%;" label="Jan"></aui-bar>
+        <aui-bar interactive style="height: 70%;" label="Feb"></aui-bar>
+        <aui-bar interactive highlighted style="height: 85%;" label="Mar"></aui-bar>
+        <aui-bar interactive faded style="height: 40%;" label="Apr"></aui-bar>
+        <aui-bar interactive style="height: 60%;" label="May"></aui-bar>
+      </aui-stack>

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

@@ -2,34 +2,27 @@ name: aui-breadcrumb-item
 tag: aui-breadcrumb-item
 type: component
 summary: Individual breadcrumb link or current-page indicator.
-description: >
-  A single entry in a breadcrumb trail. Set href for a link,
-  or current for the active page (no link, bold text).
-  Always used inside aui-breadcrumb.
-
+description: |
+  A single entry in a breadcrumb trail. Set href for a link, or current for the active page (no link, bold text). Always used inside aui-breadcrumb.
 base: AgentElement
-
 attributes:
   href:
     syntax: key-value
     type: string
     default: ""
     description: Navigation URL. Stamps an anchor element when set.
-
   current:
     syntax: boolean
     type: boolean
     default: false
     description: Marks this item as the current page (aria-current="page").
-
 a11y:
   aria:
     aria-current: page (when current is set).
-
 composition:
-  parents: [aui-breadcrumb]
+  parents:
+    - aui-breadcrumb
   children: null
-
 tokens:
   - name: --aui-breadcrumb-item-gap
     default: calc(var(--aui-space) * 2)
@@ -61,21 +54,19 @@ tokens:
   - name: --aui-breadcrumb-item-font-weight-current
     default: var(--aui-font-weight-semibold)
     description: Font weight of the current page item.
-
 examples:
-  - html: |
+  - description: Full breadcrumb trail with link items and current page
+    html: |-
       <aui-breadcrumb>
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/settings">Settings</aui-breadcrumb-item>
         <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>
       </aui-breadcrumb>
-    description: Full breadcrumb trail with link items and current page.
-
-  - html: |
+  - description: Deep breadcrumb trail with four levels
+    html: |-
       <aui-breadcrumb>
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products">Products</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products/widgets">Widgets</aui-breadcrumb-item>
         <aui-breadcrumb-item current>Deluxe Widget</aui-breadcrumb-item>
       </aui-breadcrumb>
-    description: Deep breadcrumb trail with four levels.

package/dist/docs/components/breadcrumb.yaml

@@ -1,37 +1,37 @@
 name: aui-breadcrumb
 tag: aui-breadcrumb
 type: component
-summary: Breadcrumb navigation trail.
-description: >
-  Container for aui-breadcrumb-item children. Sets role="navigation"
-  and aria-label. Separators are rendered via CSS between items.
-
+summary: Breadcrumb navigation trail with auto-current and depth collapse.
+description: |
+  Container for aui-breadcrumb-item children. Sets role="navigation" and aria-label. Separators are rendered via CSS between items using a --_joiner custom property. The last item is automatically marked [current] by JS. When max-depth is set, middle items collapse into an ellipsis trigger that expands on click.
 base: AgentElement
-
 attributes:
   label:
     syntax: key-value
     type: string
     default: Breadcrumb
     description: Accessible label for the navigation landmark.
-
   joiner:
     syntax: key-value
     type: string
-    default: "/"
-    description: >
-      Separator character between breadcrumb items.
-      Common values: "/" "›" "→" "·"
-
+    default: /
+    description: |
+      Separator character between breadcrumb items. Common values: "/" "›" "→" "·"
+  max-depth:
+    syntax: key-value
+    type: string
+    default: ""
+    description: |
+      When set, collapses middle items to keep only the first item and the last N items visible. Hidden items are replaced by an ellipsis button that expands them on click.
 a11y:
   role: navigation
   aria:
     aria-label: Set from label attribute.
-
 composition:
-  parents: [any]
-  children: [aui-breadcrumb-item]
-
+  parents:
+    - any
+  children:
+    - aui-breadcrumb-item
 tokens:
   - name: --aui-breadcrumb-font-family
     default: var(--aui-font-family)
@@ -40,31 +40,93 @@ tokens:
     default: var(--aui-font-size)
     description: Font size for breadcrumb text.
   - name: --aui-breadcrumb-gap
-    default: "calc(var(--aui-space) * 2)"
+    default: calc(var(--aui-space) * 2)
     description: Gap between breadcrumb items.
-
+  - name: --aui-breadcrumb-item-color-current
+    default: var(--aui-ink-strong)
+    description: Color of the current (last) breadcrumb item.
+  - name: --aui-breadcrumb-item-font-weight-current
+    default: var(--aui-font-weight-medium)
+    description: Font weight of the current breadcrumb item.
+behaviors:
+  auto-current: |
+    The last aui-breadcrumb-item child is automatically marked with the [current] attribute by JS. Any manually set [current] attributes on other items are removed.
+  max-depth-collapse: |
+    When max-depth is set and items exceed maxDepth + 1, middle items are hidden and replaced by an ellipsis button. Clicking the ellipsis expands all hidden items.
 examples:
-  - html: |
+  - description: Typical three-level breadcrumb trail
+    html: |-
       <aui-breadcrumb>
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/settings">Settings</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Profile</aui-breadcrumb-item>
       </aui-breadcrumb>
-    description: Typical three-level breadcrumb trail.
-
-  - html: |
+  - description: Deep breadcrumb trail with four levels
+    html: |-
       <aui-breadcrumb>
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products">Products</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/products/widgets">Widgets</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>Deluxe Widget</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Deluxe Widget</aui-breadcrumb-item>
       </aui-breadcrumb>
-    description: Deep breadcrumb trail with four levels.
-
-  - html: |
+  - description: Custom joiner character (›)
+    html: |-
       <aui-breadcrumb joiner="›">
         <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
         <aui-breadcrumb-item href="/docs">Docs</aui-breadcrumb-item>
-        <aui-breadcrumb-item current>API</aui-breadcrumb-item>
+        <aui-breadcrumb-item >API</aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: Deep breadcrumb trail with five levels
+    html: |-
+      <aui-breadcrumb>
+        <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace">Workspace</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects">Projects</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui">Agent UI</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui/components">Components</aui-breadcrumb-item>
+        <aui-breadcrumb-item >Breadcrumb</aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: Breadcrumb items with leading icons
+    html: |-
+      <aui-breadcrumb>
+        <aui-breadcrumb-item href="/">
+          <aui-icon name="house" slot="leading"></aui-icon>
+          Home
+        </aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/settings">
+          <aui-icon name="gear" slot="leading"></aui-icon>
+          Settings
+        </aui-breadcrumb-item>
+        <aui-breadcrumb-item current>
+          <aui-icon name="user" slot="leading"></aui-icon>
+          Profile
+        </aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: Current page is non-clickable, previous items are links
+    html: |-
+      <aui-breadcrumb joiner="→">
+        <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/blog">Blog</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/blog/2026">2026</aui-breadcrumb-item>
+        <aui-breadcrumb-item >How to build a design system</aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: Deep breadcrumb with arrow joiner and six levels
+    html: |-
+      <aui-breadcrumb joiner="›">
+        <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/admin">Admin</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/admin/users">Users</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/admin/users/roles">Roles</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/admin/users/roles/editor">Editor</aui-breadcrumb-item>
+        <aui-breadcrumb-item>Permissions</aui-breadcrumb-item>
+      </aui-breadcrumb>
+  - description: max-depth="2" collapses middle items into ellipsis (click to expand)
+    html: |-
+      <aui-breadcrumb max-depth="2">
+        <aui-breadcrumb-item href="/">Home</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace">Workspace</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects">Projects</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui">Agent UI</aui-breadcrumb-item>
+        <aui-breadcrumb-item href="/workspace/projects/agent-ui/components">Components</aui-breadcrumb-item>
+        <aui-breadcrumb-item>Breadcrumb</aui-breadcrumb-item>
       </aui-breadcrumb>
-    description: Custom joiner character (›).

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

@@ -0,0 +1,93 @@
+name: aui-button-group
+tag: aui-button-group
+type: element
+summary: Groups buttons with shared or connected borders.
+description: |
+  CSS-only element that groups buttons horizontally or vertically. Full-width (display: flex) by default with a 2-unit gap. Add the [inline] attribute for shrink-wrap (display: inline-flex) behavior. Attached mode removes gap and merges borders between buttons by stripping inner border-radius. Use for toolbars, view toggles, split buttons, and pagination controls.
+presentational:
+  direction:
+    syntax: key-value
+    attribute: direction
+    cascades: false
+    default: row
+    values:
+      - row
+      - column
+    description: Layout axis for the button group.
+modifiers:
+  inline:
+    syntax: boolean
+    description: |
+      Switches from full-width (display: flex) to shrink-wrap (display: inline-flex) so the group only takes the space its buttons need.
+  attached:
+    syntax: boolean
+    description: |
+      Removes gap and merges borders between buttons. Strips inner border-radius so buttons appear as one connected unit.
+content:
+  model: flow
+  accepts:
+    - aui-button
+  required: true
+  description: |
+    Two or more aui-button elements. All buttons should share the same size and variant for visual consistency.
+slots:
+  default:
+    accepts:
+      - aui-button
+    required: true
+    description: The grouped buttons.
+composition:
+  parents:
+    - aui-header
+    - aui-footer
+    - aui-stack
+    - aui-wrap
+    - div
+  children:
+    - aui-button
+  context: |
+    Use in toolbars, card footers, and form actions. Attached mode is best for view toggles and segmented actions. Non-attached mode keeps a small gap for general toolbar groups.
+tokens:
+  spacing:
+    - --aui-space
+  shape:
+    - --aui-button-radius-start
+    - --aui-button-radius-end
+    - --aui-button-radius-top
+    - --aui-button-radius-bottom
+examples:
+  - description: Default full-width button group with 2-unit gap
+    html: |-
+      <aui-button-group>
+        <aui-button>Copy</aui-button>
+        <aui-button>Paste</aui-button>
+        <aui-button>Delete</aui-button>
+      </aui-button-group>
+  - description: Inline (shrink-wrap) button group
+    html: |-
+      <aui-button-group inline>
+        <aui-button>Copy</aui-button>
+        <aui-button>Paste</aui-button>
+        <aui-button>Delete</aui-button>
+      </aui-button-group>
+  - description: Attached button group for view toggles
+    html: |-
+      <aui-button-group attached>
+        <aui-button>List</aui-button>
+        <aui-button>Grid</aui-button>
+        <aui-button>Board</aui-button>
+      </aui-button-group>
+  - description: Vertical button group
+    html: |-
+      <aui-button-group direction="column">
+        <aui-button>Top</aui-button>
+        <aui-button>Middle</aui-button>
+        <aui-button>Bottom</aui-button>
+      </aui-button-group>
+  - description: Attached vertical button group
+    html: |-
+      <aui-button-group attached direction="column">
+        <aui-button>Top</aui-button>
+        <aui-button>Middle</aui-button>
+        <aui-button>Bottom</aui-button>
+      </aui-button-group>