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

package/dist/docs/components/alert.yaml

@@ -2,53 +2,48 @@ name: aui-alert
 tag: aui-alert
 type: component
 summary: Contextual banner for status messages.
-description: >
-  Inline alert banner with intent-based coloring via boolean
-  attributes (info, success, warning, danger). Left border accent
-  stripe signals severity. Supports rich content including
-  headings and paragraphs. Optional dismissable behavior via JS.
-
+description: |
+  Inline alert banner with intent-based coloring via boolean attributes (info, success, warning, danger). Left border accent stripe signals severity. Supports rich content including headings and paragraphs. Optional dismissable behavior via JS.
 base: AgentElement
-
-# ── Presentational attributes ─────────────────────────────
-
 presentational:
   intent:
     syntax: boolean
     exclusive: true
     cascades: false
     default: info
-    values: [accent, info, success, warning, danger]
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
     description: Visual intent controlling background tint and border accent color.
-
-# ── Modifiers ─────────────────────────────────────────────
-
 modifiers:
   dismissable:
     syntax: boolean
-    description: >
+    description: |
       Shows a close button area. JS removes the element on click.
-
-# ── Content model ─────────────────────────────────────────
-
 content:
   model: flow
-  accepts: [text, strong, p, aui-text, aui-link]
+  accepts:
+    - text
+    - strong
+    - p
+    - aui-text
+    - aui-link
   required: true
-  description: >
-    Message content. Can be plain text or rich HTML with
-    headings and paragraphs for multi-line alerts.
-
-# ── Slots ─────────────────────────────────────────────────
-
+  description: |
+    Message content. Can be plain text or rich HTML with headings and paragraphs for multi-line alerts.
 slots:
   default:
-    accepts: [text, strong, p, aui-text, aui-link]
+    accepts:
+      - text
+      - strong
+      - p
+      - aui-text
+      - aui-link
     required: true
     description: Alert message content.
-
-# ── CSS tokens consumed ──────────────────────────────────
-
 tokens:
   spacing:
     - --aui-alert-gap
@@ -61,19 +56,26 @@ tokens:
     - --aui-alert-font-size
   shape:
     - --aui-alert-radius
-
-# ── Examples ──────────────────────────────────────────────
-
 examples:
-  - html: <aui-alert>Your session will expire in 5 minutes.</aui-alert>
-    description: Default info alert.
-
-  - html: <aui-alert success>Operation completed successfully.</aui-alert>
-    description: Success alert.
-
-  - html: |
+  - description: Default info alert
+    html: <aui-alert>Your session will expire in 5 minutes.</aui-alert>
+  - description: Success alert
+    html: <aui-alert success>Operation completed successfully.</aui-alert>
+  - description: Warning alert
+    html: <aui-alert warning>This action cannot be undone.</aui-alert>
+  - description: Danger alert
+    html: <aui-alert danger>Failed to save changes. Please try again.</aui-alert>
+  - description: Rich content danger alert
+    html: |-
       <aui-alert danger>
         <strong>Deployment failed</strong>
         <p>Build step 3 returned exit code 1. Check logs for details.</p>
       </aui-alert>
-    description: Rich content danger alert.
+  - description: All four intent variants stacked
+    html: |-
+      <aui-stack gap="3">
+        <aui-alert>Informational message.</aui-alert>
+        <aui-alert success>Success message.</aui-alert>
+        <aui-alert warning>Warning message.</aui-alert>
+        <aui-alert danger>Danger message.</aui-alert>
+      </aui-stack>

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

@@ -2,73 +2,64 @@ name: aui-avatar-group
 tag: aui-avatar-group
 type: component
 summary: Overlapping avatar stack with automatic overflow counter.
-description: >
-  Displays child aui-avatar elements in an overlapping row with
-  descending z-index. When the max attribute is set and children
-  exceed that count, excess avatars are hidden and a +N counter
-  is stamped. Size attribute propagates to child avatars.
-
+description: |
+  Displays child aui-avatar elements in an overlapping row with descending z-index. When the max attribute is set and children exceed that count, excess avatars are hidden and a +N counter is stamped. Size attribute propagates to child avatars.
 base: AgentElement
-
-# -- Component attributes ------------------------------------------
-
 attributes:
   max:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Maximum visible avatars. Remaining are hidden and a +N
-      overflow counter is shown.
-
+    description: |
+      Maximum visible avatars. Remaining are hidden and a +N overflow counter is shown.
   size:
     syntax: key-value
     type: string
     default: ""
-    values: [xs, sm, lg]
-    description: >
-      Passed through to child aui-avatar elements for consistent
-      sizing across the group.
-
-# -- Content model -------------------------------------------------
-
+    values:
+      - xs
+      - sm
+      - lg
+    description: |
+      Passed through to child aui-avatar elements for consistent sizing across the group.
 content:
   model: block
-  accepts: [aui-avatar]
+  accepts:
+    - aui-avatar
   required: true
-  description: >
-    One or more aui-avatar children. Order determines stacking
-    (first avatar on top, highest z-index).
-
-# -- Slots ---------------------------------------------------------
-
+  description: |
+    One or more aui-avatar children. Order determines stacking (first avatar on top, highest z-index).
 slots:
   default:
-    accepts: [aui-avatar]
+    accepts:
+      - aui-avatar
     required: true
     description: Avatar children to display in the overlapping stack.
-
-# -- Composition ---------------------------------------------------
-
 composition:
-  parents: [aui-stack, aui-header, aui-footer, div, span]
-  children: [aui-avatar]
-  context: >
-    Inline-flex element. Use inside headers, cards, list items,
-    or stacks. Commonly paired with team/contributor displays.
-
-# -- Examples ------------------------------------------------------
-
+  parents:
+    - aui-stack
+    - aui-header
+    - aui-footer
+    - div
+    - span
+  children:
+    - aui-avatar
+  context: |
+    Inline-flex element. Use inside headers, cards, list items, or stacks. Commonly paired with team/contributor displays.
 examples:
-  - html: |
+  - description: Three overlapping avatars
+    html: |-
       <aui-avatar-group>
         <aui-avatar>A</aui-avatar>
         <aui-avatar>B</aui-avatar>
         <aui-avatar>C</aui-avatar>
       </aui-avatar-group>
-    description: Basic avatar group showing all avatars.
 
-  - html: |
+      <!-- ===============================================================
+           MAX OVERFLOW
+           =============================================================== -->
+  - description: Max 3, showing +2 overflow counter
+    html: |-
       <aui-avatar-group max="3">
         <aui-avatar>A</aui-avatar>
         <aui-avatar>B</aui-avatar>
@@ -76,11 +67,47 @@ examples:
         <aui-avatar>D</aui-avatar>
         <aui-avatar>E</aui-avatar>
       </aui-avatar-group>
-    description: Avatar group with max=3 showing +2 overflow.
+  - description: Max 2, showing +4 overflow counter
+    html: |-
+      <aui-avatar-group max="2">
+        <aui-avatar>A</aui-avatar>
+        <aui-avatar>B</aui-avatar>
+        <aui-avatar>C</aui-avatar>
+        <aui-avatar>D</aui-avatar>
+        <aui-avatar>E</aui-avatar>
+        <aui-avatar>F</aui-avatar>
+      </aui-avatar-group>
 
-  - html: |
+      <!-- ===============================================================
+           SIZE VARIANTS
+           =============================================================== -->
+  - description: Small size avatar group
+    html: |-
       <aui-avatar-group size="sm">
         <aui-avatar>A</aui-avatar>
         <aui-avatar>B</aui-avatar>
+        <aui-avatar>C</aui-avatar>
+      </aui-avatar-group>
+  - description: Large size avatar group
+    html: |-
+      <aui-avatar-group size="lg">
+        <aui-avatar>A</aui-avatar>
+        <aui-avatar>B</aui-avatar>
+        <aui-avatar>C</aui-avatar>
+      </aui-avatar-group>
+
+      <!-- ===============================================================
+           MANY AVATARS
+           =============================================================== -->
+  - description: Team display with max 4
+    html: |-
+      <aui-avatar-group max="4">
+        <aui-avatar>AL</aui-avatar>
+        <aui-avatar>BK</aui-avatar>
+        <aui-avatar>CJ</aui-avatar>
+        <aui-avatar>DM</aui-avatar>
+        <aui-avatar>EP</aui-avatar>
+        <aui-avatar>FR</aui-avatar>
+        <aui-avatar>GS</aui-avatar>
+        <aui-avatar>HT</aui-avatar>
       </aui-avatar-group>
-    description: Small size avatars.

package/dist/docs/components/avatar.yaml

@@ -0,0 +1,99 @@
+name: aui-avatar
+tag: aui-avatar
+type: element
+summary: Avatar circle or square showing initials or image.
+description: |
+  Displays user initials or a profile image. Circle by default, square with the square modifier. Sized by --aui-size token. Use for user profiles, contact lists, comment threads.
+presentational:
+  size:
+    syntax: key-value
+    attribute: size
+    cascades: false
+    default: medium
+    values:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+    description: Controls avatar dimensions.
+  intent:
+    syntax: boolean
+    exclusive: true
+    cascades: false
+    default: neutral
+    values:
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+    description: Color family for the avatar background.
+modifiers:
+  square:
+    syntax: boolean
+    description: |
+      Uses border-radius (from --aui-radius) instead of circle. Use for workspace/team/app icons rather than people.
+content:
+  model: inline
+  accepts:
+    - text
+    - img
+  required: true
+  description: |
+    1-2 character initials as text, or an img element for photos. When using img, the image fills the avatar and clips to the circle/square shape via object-fit: cover.
+slots:
+  default:
+    accepts:
+      - text
+      - img
+    required: true
+    description: |
+      Initials text (1-2 uppercase letters) or an img element.
+composition:
+  parents:
+    - aui-stack
+    - aui-header
+    - span
+    - div
+    - td
+  children: null
+  context: |
+    Inline element. Use in headers, comment threads, user lists. Group with aui-stack direction="row" for avatar stacks. Pair with text for "avatar + name" patterns.
+constraints:
+  - when: img child
+    require: alt attribute on img
+    reason: |
+      Avatar images need alt text for screen readers. Set alt to the person's name or a descriptive label.
+tokens:
+  sizing:
+    - --aui-size
+    - --aui-font-size
+  color:
+    - --aui-control
+    - --aui-ink-muted
+  shape:
+    - --aui-radius
+examples:
+  - description: Default avatar with initials
+    html: <aui-avatar>KG</aui-avatar>
+  - description: Accent-colored avatar
+    html: <aui-avatar accent>AI</aui-avatar>
+  - description: Square avatar for non-person entities
+    html: <aui-avatar square>SQ</aui-avatar>
+  - description: Avatar size comparison
+    html: |-
+      <aui-stack direction="row" gap="2" align-items="center">
+        <aui-avatar size="sm">KG</aui-avatar>
+        <aui-avatar>KG</aui-avatar>
+        <aui-avatar size="lg">KG</aui-avatar>
+      </aui-stack>
+  - description: Avatars with intent colors
+    html: |-
+      <aui-stack direction="row" gap="2" align-items="center">
+        <aui-avatar accent>A</aui-avatar>
+        <aui-avatar info>B</aui-avatar>
+        <aui-avatar success>C</aui-avatar>
+        <aui-avatar warning>D</aui-avatar>
+        <aui-avatar danger>E</aui-avatar>
+      </aui-stack>

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.