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

package/dist/docs/blocks/media-image-gallery.yaml

@@ -0,0 +1,39 @@
+name: media-image-gallery
+type: block
+summary: Asset gallery grid with image placeholders, file count badge, and upload button.
+description: |
+  A panel (max-width="xl") for browsing uploaded assets. Header has title with spacer, file count badge, and scrim upload button. Content shows a 3-column flex-wrap layout of aui-button size="fill" icon-size="half" tiles with hide-label, icon-leading="image", --aui-button-background: var(--aui-control), and --aui-button-border: transparent. Tiles use width: calc(33.333% - 0.67rem) and aspect-ratio: 1 for the 3-column grid.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-badge
+  - aui-button
+kind: panel
+examples:
+  - description: Asset gallery grid with image placeholders, file count badge, and upload button.
+    html: |-
+      <aui-container kind="panel" bordered max-width="xl">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>Assets</aui-heading>
+            <aui-badge>24 files</aui-badge>
+            <aui-button scrim size="sm" icon-leading="arrow-up">Upload</aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack direction="row" gap="3" wrap>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 1" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 2" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 3" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 4" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 5" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+              <aui-button size="fill" icon-size="half" hide-label label="Asset 6" icon-leading="image" square style="width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;"></aui-button>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/nav-sidebar.yaml

@@ -0,0 +1,84 @@
+name: nav-sidebar
+type: block
+summary: App sidebar with workspace header, nav items, favorites section, and user footer.
+description: |
+  A fixed-width sidebar for application navigation without height constraint or aui-content wrapper — sections use aui-inset directly separated by aui-divider. Workspace header shows an accent avatar icon with solid background and org name. Main navigation section uses aui-nav-item elements with active state for the current page, and an activity item with a danger badge count. A Favorites section label uses aui-heading group for uppercase styling. Footer has a settings link and user row with avatar, name, and online status dot badge.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-divider
+  - aui-nav-item
+kind: card
+examples:
+  - description: App sidebar with workspace header, nav items, favorites section, and user footer.
+    html: |-
+      <aui-container kind="card" bordered style="width: 15rem;">
+
+        <!-- Workspace header -->
+        <aui-inset>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar size="sm" accent solid><aui-icon name="globe-simple" size="xs"></aui-icon></aui-avatar>
+            <aui-heading size="sm">Acme Inc</aui-heading>
+          </aui-stack>
+        </aui-inset>
+
+        <aui-divider></aui-divider>
+
+        <!-- Main navigation -->
+        <aui-inset>
+          <aui-stack gap="1">
+            <aui-nav-item active>
+              <aui-icon name="house"></aui-icon>
+              Dashboard
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="star"></aui-icon>
+              Projects
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="clock"></aui-icon>
+              Activity
+              <aui-badge danger>3</aui-badge>
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="users-three"></aui-icon>
+              Team
+            </aui-nav-item>
+
+            <aui-heading group style="padding-top: 0.75rem;">Favorites</aui-heading>
+
+            <aui-nav-item muted>
+              <aui-icon name="file-text"></aui-icon>
+              Design System
+            </aui-nav-item>
+            <aui-nav-item muted>
+              <aui-icon name="file-text"></aui-icon>
+              API Docs
+            </aui-nav-item>
+          </aui-stack>
+        </aui-inset>
+
+        <aui-divider></aui-divider>
+
+        <!-- Footer -->
+        <aui-inset>
+          <aui-stack gap="2">
+            <aui-nav-item muted>
+              <aui-icon name="gear"></aui-icon>
+              Settings
+            </aui-nav-item>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar size="xs">SC</aui-avatar>
+              <aui-text size="sm" spacer>Sarah Chen</aui-text>
+              <aui-badge success dot></aui-badge>
+            </aui-stack>
+          </aui-stack>
+        </aui-inset>
+
+      </aui-container>

package/dist/docs/blocks/onboard-stepper.yaml

@@ -0,0 +1,111 @@
+name: onboard-stepper
+type: block
+summary: Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.
+description: |
+  An onboarding card with a header (title + subtitle), a progress bar (--aui-accent-500 fill on --aui-control track) showing completion, and aui-stepper with aui-step children for a vertical step timeline. Steps have state-driven avatars with solid backgrounds (done=success check, running=accent number, pending=--aui-neutral-highest with --aui-ink-muted text). The active step expands to show inline form fields wrapped in a bordered widget container. The Workspace URL field uses aui-input-group with a "yourteam.app/" prefix for connected border treatment. Footer has scrim Back and primary accent Continue buttons in an aui-button-group with equal sizing via grow="1" basis="0". Connector lines between steps are handled by the aui-stepper/aui-step elements.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-input-group
+  - aui-button
+  - aui-button-group
+kind: card
+examples:
+  - description: Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Set up your workspace</aui-heading>
+              <aui-text muted size="sm">Complete these steps to get your team up and running.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Progress bar -->
+              <aui-stack gap="2">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-text size="xs" spacer>Setup progress</aui-text>
+                  <aui-text size="xs" muted>2 of 4 complete</aui-text>
+                </aui-stack>
+                <div style="height: 4px; border-radius: var(--aui-radius); background: var(--aui-control);">
+                  <div style="width: 50%; height: 100%; border-radius: var(--aui-radius); background: var(--aui-accent-500);"></div>
+                </div>
+              </aui-stack>
+
+              <!-- Steps -->
+              <aui-stepper>
+
+                <!-- Step 1: Done -->
+                <aui-step state="done">
+                  <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="sm">Create account</aui-heading>
+                    <aui-text size="xs" muted>Email verified and profile created</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 2: Active -->
+                <aui-step state="running">
+                  <aui-avatar size="xs" accent shrink="0" solid>2</aui-avatar>
+                  <aui-stack gap="3" spacer min-width="0">
+                    <aui-heading size="sm">Name your workspace</aui-heading>
+                    <aui-container kind="widget" bordered>
+                      <aui-inset>
+                        <aui-stack>
+                          <aui-field label="Workspace name" width="full">
+                            <aui-input placeholder="Acme Engineering" width="full"></aui-input>
+                          </aui-field>
+                          <aui-field label="Workspace URL" width="full">
+                            <aui-input placeholder="acme-eng" prefix="yourteam.app/" width="full"></aui-input>
+                          </aui-field>
+                        </aui-stack>
+                      </aui-inset>
+                    </aui-container>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 3: Pending -->
+                <aui-step>
+                  <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);">3</aui-avatar>
+                  <aui-stack gap="1">
+                    <aui-text size="sm" muted>Invite your team</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+                <!-- Step 4: Pending -->
+                <aui-step>
+                  <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);">4</aui-avatar>
+                  <aui-stack gap="1">
+                    <aui-text size="sm" muted>Review and launch</aui-text>
+                  </aui-stack>
+                </aui-step>
+
+              </aui-stepper>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+
+        <aui-footer>
+          <aui-button-group>
+            <aui-button scrim grow="1" basis="0">Back</aui-button>
+            <aui-button primary accent icon-trailing="caret-right" grow="1" basis="0">Continue</aui-button>
+          </aui-button-group>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/overlay-confirmation-modal.yaml

@@ -0,0 +1,60 @@
+name: overlay-confirmation-modal
+type: block
+summary: Confirmation dialog with danger icon, warning detail, and cancel/confirm actions.
+description: |
+  A modal dialog for confirming destructive actions. Two variants shown: an enhanced version with a danger avatar icon (solid background), title, description with bold entity name "AgentUI Corp", a bordered danger aui-alert danger listing impact details, and a footer with scrim cancel and danger-primary confirm buttons using grow="1" basis="0" for equal sizing; and a minimal version with just title, description, and buttons. Uses aui-dialog with open attribute. The danger alert and button use the danger intent for semantic red coloring.
+components:
+  - aui-dialog
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-footer
+  - aui-button
+  - aui-button-group
+  - aui-alert
+kind: card
+examples:
+  - description: Danger confirmation with warning detail
+    html: |-
+      <aui-dialog open max-width="sm">
+        <aui-container kind="card">
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-avatar size="lg" danger solid><aui-icon name="warning"></aui-icon></aui-avatar>
+              <aui-stack gap="2">
+                <aui-heading size="lg">Delete workspace?</aui-heading>
+                <aui-text muted size="sm">This will permanently delete <strong>AgentUI Corp</strong> and remove all associated data. This action cannot be undone.</aui-text>
+              </aui-stack>
+              <aui-alert danger>All 47 projects, 312 files, and 8 team members will be removed.</aui-alert>
+            </aui-stack>
+          </aui-inset>
+          <aui-footer>
+            <aui-button-group>
+              <aui-button scrim grow="1" basis="0">Cancel</aui-button>
+              <aui-button primary danger grow="1" basis="0">Delete Workspace</aui-button>
+            </aui-button-group>
+          </aui-footer>
+        </aui-container>
+      </aui-dialog>
+  - description: Simple confirmation without warning box
+    html: |-
+      <aui-dialog open max-width="sm">
+        <aui-container kind="card">
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-heading size="lg">Discard changes?</aui-heading>
+              <aui-text muted size="sm">You have unsaved changes that will be lost. Are you sure you want to leave this page?</aui-text>
+            </aui-stack>
+          </aui-inset>
+          <aui-footer>
+            <aui-button-group>
+              <aui-button scrim grow="1" basis="0">Keep editing</aui-button>
+              <aui-button primary danger grow="1" basis="0">Discard</aui-button>
+            </aui-button-group>
+          </aui-footer>
+        </aui-container>
+      </aui-dialog>

package/dist/docs/blocks/overlay-dropdown-menu.yaml

@@ -0,0 +1,72 @@
+name: overlay-dropdown-menu
+type: block
+summary: Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.
+description: |
+  Two dropdown menu variants side by side. The actions menu uses aui-dropdown-menu with ghost trigger, containing icon+label options with trailing keyboard shortcuts in mono font (font="mono"), a disabled Archive option, optgroup dividers between groups, and a danger-intent Delete option. The view selector menu uses aui-select mode="list" inside an aui-container with aui-optgroup label attributes for section headers (View, Sort by) and selected attribute for active items, since it tracks selection state rather than firing actions.
+components:
+  - aui-dropdown-menu
+  - aui-container
+  - aui-select
+  - aui-option
+  - aui-optgroup
+  - aui-text
+  - aui-icon
+kind: widget
+examples:
+  - description: Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.
+    html: |-
+      <aui-stack direction="row">
+
+        <!-- Actions menu -->
+        <aui-dropdown-menu label="Actions" ghost>
+          <aui-option value="edit">
+            <aui-icon name="pencil" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Edit</aui-text>
+            <aui-text size="xs" muted font="mono">⌘E</aui-text>
+          </aui-option>
+          <aui-option value="duplicate">
+            <aui-icon name="copy" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Duplicate</aui-text>
+            <aui-text size="xs" muted font="mono">⌘D</aui-text>
+          </aui-option>
+          <aui-option value="share">
+            <aui-icon name="arrow-up" size="sm" muted></aui-icon>
+            <aui-text size="sm" spacer>Share</aui-text>
+          </aui-option>
+          <aui-optgroup>
+            <aui-option value="move">
+              <aui-icon name="star" size="sm" muted></aui-icon>
+              <aui-text size="sm" spacer>Move to</aui-text>
+              <aui-icon name="caret-right" size="sm" muted></aui-icon>
+            </aui-option>
+            <aui-option value="archive" disabled>
+              <aui-icon name="stop" size="sm" muted></aui-icon>
+              <aui-text size="sm" muted spacer>Archive</aui-text>
+            </aui-option>
+          </aui-optgroup>
+          <aui-optgroup>
+            <aui-option value="delete" danger>
+              <aui-icon name="trash" size="sm"></aui-icon>
+              <aui-text size="sm" spacer>Delete</aui-text>
+              <aui-text size="xs" muted font="mono">⌫</aui-text>
+            </aui-option>
+          </aui-optgroup>
+        </aui-dropdown-menu>
+
+        <!-- View selector menu -->
+        <aui-container kind="widget" bordered max-width="xs" shadow="2">
+          <aui-select mode="list">
+            <aui-optgroup label="View">
+              <aui-option value="board" selected>Board</aui-option>
+              <aui-option value="list">List</aui-option>
+              <aui-option value="table">Table</aui-option>
+            </aui-optgroup>
+            <aui-optgroup label="Sort by">
+              <aui-option value="name" selected>Name</aui-option>
+              <aui-option value="date-modified">Date modified</aui-option>
+              <aui-option value="date-created">Date created</aui-option>
+            </aui-optgroup>
+          </aui-select>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/profile-card.yaml

@@ -5,10 +5,8 @@ description: |
   A card displaying a user's profile information at a glance. Centered layout with a large avatar, name, role, short bio, and an aui-stat row for key metrics. Footer provides edit and messaging actions. Useful for team directories, account pages, or social-style dashboards where you need to present identity alongside engagement metrics.
 components:
   - aui-container
-  - aui-inset
-  - aui-header
   - aui-content
-  - aui-footer
+  - aui-inset
   - aui-stack
   - aui-heading
   - aui-text

package/dist/docs/blocks/settings-panel.yaml

@@ -13,9 +13,8 @@ components:
   - aui-text
   - aui-switch
   - aui-button
-  - aui-badge
+  - aui-alert
   - aui-divider
-  - aui-icon
 kind: card
 examples:
   - description: Settings card with toggles, descriptions, and grouped controls.

package/dist/docs/blocks/sidebar-nav.yaml

@@ -5,7 +5,6 @@ description: |
   A fixed-width sidebar for app-level navigation. Uses card kind for tighter padding than panel. Nav items use aui-nav-item elements — the active item uses the active attribute for visual distinction. Footer shows the signed-in user with avatar and email. Designed to sit at the left edge of a layout at 14-16rem width.
 components:
   - aui-container
-  - aui-header
   - aui-content
   - aui-footer
   - aui-inset
@@ -14,7 +13,6 @@ components:
   - aui-text
   - aui-icon
   - aui-avatar
-  - aui-divider
   - aui-nav-item
 kind: card
 examples:

package/dist/docs/blocks/user-profile-card.yaml

@@ -0,0 +1,52 @@
+name: user-profile-card
+type: block
+summary: User profile card with avatar, name, role, stats grid, and action buttons.
+description: |
+  A compact centered profile card. Top section has a large accent solid avatar with initials, name heading, and role/location text. A divider separates the identity from a 3-column stats row using aui-stat for Commits, PRs, and Reviews. Footer has Message (primary accent) and View Profile (outline) buttons with equal sizing via grow="1" basis="0".
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-avatar
+  - aui-button
+  - aui-button-group
+  - aui-divider
+  - aui-footer
+kind: card
+examples:
+  - description: User profile card with avatar, name, role, stats grid, and action buttons.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-inset>
+          <aui-stack gap="4">
+
+            <!-- Identity -->
+            <aui-stack gap="2" align-items="center" text="center">
+              <aui-avatar size="xl" accent solid>KG</aui-avatar>
+              <aui-stack gap="1">
+                <aui-heading size="lg">Kim Granlund</aui-heading>
+                <aui-text muted size="sm">Senior Engineer · San Francisco</aui-text>
+              </aui-stack>
+            </aui-stack>
+
+            <aui-divider></aui-divider>
+
+            <!-- Stats -->
+            <aui-stack direction="row" gap="3" text="center">
+              <aui-stat label="Commits" value="847" spacer></aui-stat>
+              <aui-stat label="PRs" value="132" spacer></aui-stat>
+              <aui-stat label="Reviews" value="56" spacer></aui-stat>
+            </aui-stack>
+
+          </aui-stack>
+        </aui-inset>
+        <aui-footer>
+          <aui-button-group>
+            <aui-button primary accent grow="1" basis="0">Message</aui-button>
+            <aui-button outline grow="1" basis="0">View Profile</aui-button>
+          </aui-button-group>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/user-team-list.yaml

@@ -0,0 +1,116 @@
+name: user-team-list
+type: block
+summary: Team member panel with search, role badges, invite button, and per-row actions.
+description: |
+  A full-featured team management panel. Header shows a title with member count, subtitle, and a trailing invite button. Content area includes a type="search" input (auto icon + clear) followed by repeating member rows separated by dividers. Each row has an avatar with initials, a name/email column using the spacer pattern, a color-coded role badge (Owner=accent, Admin=warning, Member=neutral), and a trailing aui-dropdown-menu with ghost hide-label for per-row actions (edit role, remove). Pending invites are visually dimmed with a small badge alongside the name and have revoke/resend invite options.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-avatar
+  - aui-badge
+  - aui-button
+  - aui-dropdown-menu
+  - aui-option
+  - aui-divider
+kind: panel
+examples:
+  - description: Team member panel with search, role badges, invite button, and per-row actions.
+    html: |-
+      <aui-container kind="panel" bordered max-width="xl">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Team Members</aui-heading>
+              <aui-text muted size="sm">5 members · 1 pending invite</aui-text>
+            </aui-stack>
+          </span>
+          <span slot="trailing">
+            <aui-button primary accent icon-leading="plus">Invite</aui-button>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-field width="full">
+                <aui-input type="search" placeholder="Search members…" width="full"></aui-input>
+              </aui-field>
+              <aui-stack gap="3">
+                <aui-stack direction="row" gap="3" align-items="center">
+                  <aui-avatar>AO</aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="md">Amara Osei</aui-heading>
+                    <aui-text muted size="sm">amara@acme.io</aui-text>
+                  </aui-stack>
+                  <aui-badge accent>Owner</aui-badge>
+                  <aui-dropdown-menu label="Options" ghost hide-label shrink="0">
+                    <aui-option value="edit-role">Edit role</aui-option>
+                    <aui-option value="remove" danger>Remove</aui-option>
+                  </aui-dropdown-menu>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack direction="row" gap="3" align-items="center">
+                  <aui-avatar>JC</aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="md">James Chen</aui-heading>
+                    <aui-text muted size="sm">james@acme.io</aui-text>
+                  </aui-stack>
+                  <aui-badge warning>Admin</aui-badge>
+                  <aui-dropdown-menu label="Options" ghost hide-label shrink="0">
+                    <aui-option value="edit-role">Edit role</aui-option>
+                    <aui-option value="remove" danger>Remove</aui-option>
+                  </aui-dropdown-menu>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack direction="row" gap="3" align-items="center">
+                  <aui-avatar>SP</aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="md">Sara Petrov</aui-heading>
+                    <aui-text muted size="sm">sara@acme.io</aui-text>
+                  </aui-stack>
+                  <aui-badge>Member</aui-badge>
+                  <aui-dropdown-menu label="Options" ghost hide-label shrink="0">
+                    <aui-option value="edit-role">Edit role</aui-option>
+                    <aui-option value="remove" danger>Remove</aui-option>
+                  </aui-dropdown-menu>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack direction="row" gap="3" align-items="center">
+                  <aui-avatar>LW</aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-heading size="md">Liam Walker</aui-heading>
+                    <aui-text muted size="sm">liam@acme.io</aui-text>
+                  </aui-stack>
+                  <aui-badge>Member</aui-badge>
+                  <aui-dropdown-menu label="Options" ghost hide-label shrink="0">
+                    <aui-option value="edit-role">Edit role</aui-option>
+                    <aui-option value="remove" danger>Remove</aui-option>
+                  </aui-dropdown-menu>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack direction="row" gap="3" align-items="center" style="opacity: 0.6;">
+                  <aui-avatar>NK</aui-avatar>
+                  <aui-stack gap="1" spacer>
+                    <aui-stack direction="row" gap="2" align-items="center">
+                      <aui-heading size="md">Nadia Kim</aui-heading>
+                      <aui-badge>Pending</aui-badge>
+                    </aui-stack>
+                    <aui-text muted size="sm">nadia@acme.io</aui-text>
+                  </aui-stack>
+                  <aui-badge>Member</aui-badge>
+                  <aui-dropdown-menu label="Options" ghost hide-label shrink="0">
+                    <aui-option value="revoke-invite">Revoke invite</aui-option>
+                    <aui-option value="resend">Resend invite</aui-option>
+                  </aui-dropdown-menu>
+                </aui-stack>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

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

@@ -50,7 +50,7 @@ examples:
         <aui-agent-thread role="assistant" sender="Claude">
           <aui-avatar>C</aui-avatar>
           <aui-agent-message role="assistant">
-            <aui-agent-text>Sure! Here's a script using `pandas` to group CSV rows by department:
+            <aui-agent-text><template>Sure! Here's a script using `pandas` to group CSV rows by department:
 
       ```python
       import pandas as pd
@@ -63,7 +63,7 @@ examples:
           print(group.to_string(index=False))
       ```
 
-      This reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</aui-agent-text>
+      This reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</template></aui-agent-text>
           </aui-agent-message>
         </aui-agent-thread>
       </aui-agent-feed>

package/dist/docs/components/button.yaml

@@ -19,7 +19,7 @@ presentational:
       - xl
       - fill
     description: |
-      Controls dimensions, typography, icon size, and spacing simultaneously. Swaps 7 tokens at once. The special "fill" value stretches the button to 100% width and height of its parent cell with no minimum constraints.
+      Controls dimensions, typography, icon size, and spacing simultaneously. Swaps 7 tokens at once. The special "fill" value stretches the button to 100% width and height of its parent cell with no minimum constraints. Combine with hide-label and icon-size to create game board cells (e.g. aui-button size="fill" icon-size="half" hide-label label="X" icon-leading="x").
   radius:
     syntax: boolean
     exclusive: true
@@ -149,7 +149,7 @@ modifiers:
   hide-label:
     syntax: boolean
     description: |
-      Hides the label text and collapses the button to icon-only. Square button sized to --aui-size with width/height = var(--aui-size) and padding: 0. Use with a slotted icon, icon-leading, or the icon attribute. Auto-detected when no label attribute and no child text nodes are present.
+      Hides the label text and collapses the button to icon-only. Square button sized to --aui-size with width/height = var(--aui-size) and padding: 0. Use with a slotted icon, icon-leading, or the icon attribute. Auto-detected when no label attribute and no child text nodes are present. When combined with size="fill", the button stretches to fill its grid cell while hiding the label — used for game board cells (tic-tac-toe, battleship, connect-four) where the button fills a square grid cell and shows only an icon or nothing.
   icon-size:
     syntax: key-value
     values:
@@ -349,6 +349,7 @@ use-cases:
   - Form submit/reset triggers.
   - Buttons with text adornments (e.g. "AI" badge via text-leading).
   - Resize-responsive buttons that collapse adornments as space shrinks.
+  - Game board cells using size="fill" + hide-label inside aui-grid square (tic-tac-toe, battleship, connect-four).
 examples:
   - description: Text only
     html: <aui-button>Default</aui-button>