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

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>