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

package/dist/docs/blocks/login-form.yaml

@@ -1,17 +1,24 @@
 name: login-form
 type: block
 summary: Login card with email, password, and forgot-password link.
-description: >
-  A self-contained sign-in card for authentication flows. Header introduces
-  the form with a friendly heading, content holds email and password fields,
-  and the footer provides a link to the signup page. Use this block as the
-  centerpiece of a login page or inside a modal for session-expired prompts.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button]
+description: |
+  A self-contained sign-in card for authentication flows. Header introduces the form with a friendly heading, content holds email and password fields, and the footer provides a link to the signup page. Use this block as the centerpiece of a login page or inside a modal for session-expired prompts.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Login card with email, password, and forgot-password link.
+    html: |-
       <aui-container kind="panel" bordered max-width="md">
         <aui-header>
           <span slot="leading">
@@ -23,7 +30,7 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6">
+            <aui-stack>
               <aui-field label="Email" width="full">
                 <aui-input type="email" placeholder="you@company.com" width="full"></aui-input>
               </aui-field>
@@ -39,4 +46,3 @@ examples:
           <span slot="content"><aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Login card with email and password fields, forgot-password link, and signup prompt.

package/dist/docs/blocks/login-simple.yaml

@@ -1,18 +1,25 @@
 name: login-simple
 type: block
 summary: Simple bordered login card with email, password, and a single social option.
-description: >
-  The most straightforward login block — a single bordered card with
-  email and password fields, a forgot-password link, and one social
-  login alternative. No brand header, no two-column layout, just the
-  essentials. Drop it into any page where you need a quick, clean
-  authentication form without extra visual flair.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button, aui-divider]
+description: |
+  The most straightforward login block — a single bordered card with email and password fields, a forgot-password link, and one social login alternative. No brand header, no two-column layout, just the essentials. Drop it into any page where you need a quick, clean authentication form without extra visual flair.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-button
+  - aui-divider
 kind: panel
-
 examples:
-  - html: |
+  - description: Simple bordered login card with email, password, and a single social option.
+    html: |-
       <aui-container kind="panel" bordered max-width="md">
         <aui-header>
           <span slot="leading">
@@ -24,7 +31,7 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6">
+            <aui-stack>
               <aui-field label="Email" width="full">
                 <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
               </aui-field>
@@ -51,4 +58,3 @@ examples:
           <span slot="content"><aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Simple login card with email, password, forgot-password link, and Google sign-in option.

package/dist/docs/blocks/login-social.yaml

@@ -1,27 +1,35 @@
 name: login-social
 type: block
 summary: Centered login page with social providers, email/password, and brand header.
-description: >
-  A polished sign-in page that leads with social login buttons (Apple and
-  Google) before falling back to traditional email and password fields.
-  A brand mark sits above the card for identity reinforcement. Below the
-  card a terms notice rounds out the legal requirements. Ideal for
-  consumer-facing apps where frictionless social auth is the primary path.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-divider]
+description: |
+  A polished sign-in page that leads with social login buttons (Apple and Google) before falling back to traditional email and password fields. A brand mark sits above the card for identity reinforcement. Below the card a terms notice rounds out the legal requirements. Ideal for consumer-facing apps where frictionless social auth is the primary path.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-button
+  - aui-divider
 kind: panel
-
 examples:
-  - html: |
+  - description: Centered login page with social providers, email/password, and brand header.
+    html: |-
       <aui-stack gap="4" align-items="center">
         <!-- Brand -->
         <aui-stack direction="row" gap="2" align-items="center">
-          <img src="/icon.svg" alt="Acme Inc" style="width: 1.5rem; height: 1.5rem; border-radius: 0.25rem;">
+          <img src="/icon.svg" alt="Acme Inc" style="width: 1.5rem; height: 1.5rem; border-radius: var(--aui-radius);">
           <aui-heading size="lg" weight="medium">Acme Inc.</aui-heading>
         </aui-stack>
 
         <!-- Card -->
-        <aui-container kind="panel" bordered max-width="md" style="min-width: 20rem;">
+        <aui-container kind="panel" bordered max-width="md" min-width="20">
           <aui-header>
             <span slot="content">
               <aui-stack gap="1" align-items="center" text="center">
@@ -32,7 +40,7 @@ examples:
           </aui-header>
           <aui-content>
             <aui-inset>
-              <aui-stack gap="6">
+              <aui-stack>
                 <!-- Social buttons -->
                 <aui-stack gap="2">
                   <aui-button scrim width="full">Login with Apple</aui-button>
@@ -70,4 +78,3 @@ examples:
           </aui-footer>
         </aui-container>
       </aui-stack>
-    description: Social-first login page with Apple and Google buttons, email/password fallback, and terms notice.

package/dist/docs/blocks/login-two-column.yaml

@@ -1,21 +1,33 @@
 name: login-two-column
 type: block
 summary: Two-column login with form on the left and image placeholder on the right.
-description: >
-  A split-screen authentication layout pairing a fully featured login
-  form with a visual panel. The left column holds email and password
-  fields plus a row of social provider buttons, while the right column
-  serves as an image or brand illustration placeholder. Works well for
-  marketing-oriented sign-in pages where you want to reinforce brand
-  identity alongside the auth flow.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-button-group, aui-divider]
+description: |
+  A split-screen authentication layout pairing a fully featured login form with a visual panel. The left column holds email and password fields plus a row of social provider buttons, while the right column serves as an image or brand illustration placeholder. Works well for marketing-oriented sign-in pages where you want to reinforce brand identity alongside the auth flow.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-button
+  - aui-button-group
+  - aui-divider
 kind: panel
-
 examples:
-  - html: |
+  - description: Two-column login with form on the left and image placeholder on the right.
+    html: |-
       <aui-container padding="4" gap="0" transparent>
-        <aui-stack direction="row" gap="8" style="min-width: 44rem; min-height: 32rem">
+        <aui-stack
+          direction="row"
+          gap="8"
+          min-width="44" style="min-height: 32rem"
+        >
           <!-- Left: form -->
           <aui-container kind="panel" elevation="2" gap="0" spacer>
             <aui-header>
@@ -28,7 +40,7 @@ examples:
             </aui-header>
             <aui-content>
               <aui-inset>
-                <aui-stack gap="6">
+                <aui-stack>
                   <aui-field label="Email" width="full">
                     <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
                   </aui-field>
@@ -65,14 +77,22 @@ examples:
           </aui-container>
 
           <!-- Right: image placeholder -->
-          <aui-container elevation="3" spacer justify-content="center" transparent>
+          <aui-container
+            elevation="3"
+            spacer
+            justify-content="center"
+            transparent
+          >
             <aui-inset>
-              <aui-stack gap="1" align-items="center" text="center">
-                <aui-icon name="image" size="xl" muted></aui-icon>
+              <aui-stack
+                gap="1"
+                align-items="center"
+                text="center"
+              >
+                <aui-icon name="image" size="3xl" muted></aui-icon>
                 <aui-text muted size="sm">Brand illustration</aui-text>
               </aui-stack>
             </aui-inset>
           </aui-container>
         </aui-stack>
       </aui-container>
-    description: Two-column login with email, password, and social buttons on the left and an image placeholder on the right.

package/dist/docs/blocks/marketing-automation.yaml

@@ -1,7 +1,212 @@
 name: marketing-automation
 type: block
 summary: Marketing Automation Engine — 16 nodes, 19 connections.
-description: >
-  Visual graph block rendered from the Marketing Automation Engine dataset using
-  aui-graph components with port-selector noodle connections.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  Visual graph block rendered from the Marketing Automation Engine dataset using aui-graph components with port-selector noodle connections.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: Marketing Automation Engine — 16 nodes, 19 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 37.25rem; min-width: 91.875rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Lead Capture Form → CRM Enrichment -->
+          <aui-graph-noodle from="ma-lead-form:right" to="ma-crm-enrich:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Social Ad Import → CRM Enrichment -->
+          <aui-graph-noodle from="ma-social:right" to="ma-crm-enrich:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Social Ad Import → Lead Scoring Engine -->
+          <aui-graph-noodle from="ma-social:right" to="ma-score:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Webinar Registration → Lead Scoring Engine -->
+          <aui-graph-noodle from="ma-webinar:right" to="ma-score:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- CRM Enrichment → Audience Segmentation -->
+          <aui-graph-noodle from="ma-crm-enrich:right" to="ma-segment:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lead Scoring Engine → Nurture Sequence -->
+          <aui-graph-noodle from="ma-score:right" to="ma-nurture:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lead Scoring Engine → A/B Test Split -->
+          <aui-graph-noodle from="ma-score:right" to="ma-abtest:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Audience Segmentation → Engagement Tracker -->
+          <aui-graph-noodle from="ma-segment:right" to="ma-engage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Nurture Sequence → Engagement Tracker -->
+          <aui-graph-noodle from="ma-nurture:right" to="ma-engage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- A/B Test Split → Email Variant A -->
+          <aui-graph-noodle from="ma-abtest:right" to="ma-email-a:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- A/B Test Split → Email Variant B -->
+          <aui-graph-noodle from="ma-abtest:right" to="ma-email-b:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Engagement Tracker → MQL Qualification -->
+          <aui-graph-noodle from="ma-engage:right" to="ma-mql:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Email Variant A → MQL Qualification -->
+          <aui-graph-noodle from="ma-email-a:right" to="ma-mql:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Email Variant B → Retargeting Pixel -->
+          <aui-graph-noodle from="ma-email-b:right" to="ma-retarget:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- MQL Qualification → Sales Handoff -->
+          <aui-graph-noodle from="ma-mql:bottom" to="ma-sales:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Sales Handoff → Campaign Analytics -->
+          <aui-graph-noodle from="ma-sales:right" to="ma-report:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Retargeting Pixel → Campaign Analytics -->
+          <aui-graph-noodle from="ma-retarget:right" to="ma-report:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Retargeting Pixel → Unsubscribe Handler -->
+          <aui-graph-noodle from="ma-retarget:bottom" to="ma-unsubscribe:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Retargeting Pixel → Nurture Sequence -->
+          <aui-graph-noodle from="ma-retarget:left" to="ma-nurture:bottom" color="warning" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Lead Capture Form -->
+          <aui-graph-node x="24" y="46" node-id="ma-lead-form">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Lead Capture Form</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Social Ad Import -->
+          <aui-graph-node x="24" y="186" node-id="ma-social">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Social Ad Import</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Webinar Registration -->
+          <aui-graph-node x="24" y="326" node-id="ma-webinar">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Webinar Registration</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- CRM Enrichment -->
+          <aui-graph-node x="260" y="116" node-id="ma-crm-enrich">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">CRM Enrichment</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Lead Scoring Engine -->
+          <aui-graph-node x="260" y="256" node-id="ma-score">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lead Scoring Engine</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Audience Segmentation -->
+          <aui-graph-node x="500" y="46" node-id="ma-segment">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Audience Segmentation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Nurture Sequence -->
+          <aui-graph-node x="500" y="186" node-id="ma-nurture">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Nurture Sequence</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- A/B Test Split -->
+          <aui-graph-node x="500" y="326" node-id="ma-abtest">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">A/B Test Split</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Email Variant A -->
+          <aui-graph-node x="740" y="256" node-id="ma-email-a">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Email Variant A</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Email Variant B -->
+          <aui-graph-node x="740" y="396" node-id="ma-email-b">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Email Variant B</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Engagement Tracker -->
+          <aui-graph-node x="740" y="116" node-id="ma-engage">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Engagement Tracker</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- MQL Qualification -->
+          <aui-graph-node x="980" y="116" node-id="ma-mql">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">MQL Qualification</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Sales Handoff -->
+          <aui-graph-node x="980" y="256" node-id="ma-sales">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Sales Handoff</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Retargeting Pixel -->
+          <aui-graph-node x="980" y="396" node-id="ma-retarget">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Retargeting Pixel</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Campaign Analytics -->
+          <aui-graph-node x="1220" y="186" node-id="ma-report">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Campaign Analytics</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Unsubscribe Handler -->
+          <aui-graph-node x="1220" y="396" node-id="ma-unsubscribe">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Unsubscribe Handler</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/member-list.yaml

@@ -1,28 +1,34 @@
 name: member-list
 type: block
 summary: Panel with header and avatar-based member rows.
-description: >
-  A spacious panel listing team members. Header has an icon, title,
-  subtitle, and a primary action button. Each member row shows an
-  avatar, name, metadata, and a role badge.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button]
+description: |
+  A spacious panel listing team members. Header has an icon, title, subtitle, and a primary action button. Each member row shows an avatar, name, metadata, and a role badge.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Panel with header and avatar-based member rows.
+    html: |-
       <aui-container kind="panel" bordered max-width="xl">
         <aui-header>
-          <span slot="leading">
-            <aui-stack direction="row" gap="3" align-items="center">
-              <aui-avatar size="lg" square><aui-icon name="user"></aui-icon></aui-avatar>
-              <aui-stack gap="1">
-                <aui-heading size="xl">Team Members</aui-heading>
-                <aui-text muted size="sm">Manage who has access to this project.</aui-text>
-              </aui-stack>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-avatar size="lg" square><aui-icon name="users-three"></aui-icon></aui-avatar>
+            <aui-stack gap="1" spacer>
+              <aui-heading size="xl">Team Members</aui-heading>
+              <aui-text muted size="sm">Manage who has access to this project.</aui-text>
             </aui-stack>
-          </span>
-          <span slot="trailing"><aui-button primary accent>Invite</aui-button></span>
+            <aui-button primary accent>Invite</aui-button>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -55,4 +61,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Team member list with avatars, roles, and an invite action.