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

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

@@ -2,36 +2,30 @@ 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.
-
+description: |
+  Container for aui-breadcrumb-item children. Sets role="navigation" and aria-label. Separators are rendered via CSS between items.
 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: "/" "›" "→" "·"
 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 +34,72 @@ 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.
-
 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>
-    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>
-    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>
-    description: Custom joiner character (›).
+  - 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 current>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 current>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 current>Permissions</aui-breadcrumb-item>
+      </aui-breadcrumb>

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>