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

package/dist/docs/blocks/issue-assign.yaml

@@ -1,26 +1,38 @@
 name: issue-assign
 type: block
 summary: Issue assignment card with user search and selected token chips.
-description: >
-  A compact card for assigning users to an issue. Header shows the task title
-  with an add button. Content area shows selected users as removable aui-chip
-  elements with avatar and name. Use for project management, code review
-  assignment, or task delegation.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-chip, aui-button, aui-icon]
+description: |
+  A compact card for assigning users to an issue. Header shows the task title with an add button. Content area shows selected users as removable aui-chip elements with avatar and name. Use for project management, code review assignment, or task delegation.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-chip
+  - aui-button
+  - aui-icon
 kind: card
-
 examples:
-  - html: |
+  - description: Issue assignment card with user search and selected token chips.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
-          <span slot="leading">
-            <aui-stack gap="1">
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-stack gap="1" spacer>
               <aui-heading size="lg">Assign Issue</aui-heading>
               <aui-text muted size="sm">Select users to assign to this issue.</aui-text>
             </aui-stack>
-          </span>
-          <span slot="trailing"><aui-button ghost size="sm"><aui-icon name="plus"></aui-icon></aui-button></span>
+            <aui-dropdown-menu label="Add assignee" ghost hide-label size="sm" icon-leading="plus">
+              <aui-option value="sarah">Sarah Chen</aui-option>
+              <aui-option value="marcus">Marcus Rivera</aui-option>
+              <aui-option value="priya">Priya Santos</aui-option>
+              <aui-option value="james">James Wilson</aui-option>
+            </aui-dropdown-menu>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -31,4 +43,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Issue assignment with selected user token and add action.

package/dist/docs/blocks/keyboard-shortcuts.yaml

@@ -1,16 +1,22 @@
 name: keyboard-shortcuts
 type: block
 summary: Panel listing keyboard shortcuts with command names and key combinations.
-description: >
-  A bordered card listing action names paired with their keyboard shortcuts
-  using aui-kbd elements. Separated by thin dividers. Use for help panels,
-  settings overlays, or onboarding checklists.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-kbd]
+description: |
+  A bordered card listing action names paired with their keyboard shortcuts using aui-kbd elements. Separated by thin dividers. Use for help panels, settings overlays, or onboarding checklists.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-divider
+  - aui-kbd
 kind: card
-
 examples:
-  - html: |
+  - description: Panel listing keyboard shortcuts with command names and key combinations.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="content"><aui-heading size="lg">Shortcuts</aui-heading></span>
@@ -46,4 +52,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Keyboard shortcuts reference panel.

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

@@ -1,46 +1,73 @@
 name: login-branded
 type: block
 summary: Two-column login with branded sidebar panel and image placeholder.
-description: >
-  A split-screen login that dedicates the left column to brand identity
-  and the authentication form, while the right column acts as an image
-  or illustration placeholder. The left panel carries the brand logo at
-  the top and vertically centers the form fields, giving the page a
-  polished, marketing-ready feel. Suited for SaaS products that want
-  every touchpoint to reinforce brand recognition.
-
-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 split-screen login that dedicates the left column to brand identity and the authentication form, while the right column acts as an image or illustration placeholder. The left panel carries the brand logo at the top and vertically centers the form fields, giving the page a polished, marketing-ready feel. Suited for SaaS products that want every touchpoint to reinforce brand recognition.
+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: Two-column login with branded sidebar panel and image placeholder.
+    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: brand + form -->
           <aui-container kind="panel" elevation="2" gap="0" spacer>
             <aui-header>
               <span slot="leading">
                 <aui-stack direction="row" gap="2" align-items="center">
-                  <img src="/icon.svg" alt="Acme Inc" style="width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;">
+                  <img
+                    src="/icon.svg"
+                    alt="Acme Inc"
+                    style="width: 1.25rem; height: 1.25rem; border-radius: var(--aui-radius)"
+                  />
                   <aui-heading size="md" weight="medium">Acme Inc.</aui-heading>
                 </aui-stack>
               </span>
             </aui-header>
             <aui-content>
               <aui-inset>
-                <aui-stack gap="6">
+                <aui-stack>
                   <aui-stack gap="1">
                     <aui-heading size="xl">Welcome back</aui-heading>
-                    <aui-text muted size="sm">Enter your credentials to access your account</aui-text>
+                    <aui-text muted size="sm"
+                      >Enter your credentials to access your account</aui-text
+                    >
                   </aui-stack>
 
                   <aui-field label="Email" width="full">
-                    <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
+                    <aui-input
+                      type="email"
+                      placeholder="m@example.com"
+                      width="full"
+                    ></aui-input>
                   </aui-field>
 
                   <aui-field label="Password" width="full">
-                    <aui-input type="password" placeholder="Enter your password" width="full"></aui-input>
-                    <aui-text muted size="xs" slot="trailing" text="right"><a href="#">Forgot your password?</a></aui-text>
+                    <aui-input
+                      type="password"
+                      placeholder="Enter your password"
+                      width="full"
+                    ></aui-input>
+                    <aui-text muted size="xs" slot="trailing" text="right"
+                      ><a href="#">Forgot your password?</a></aui-text
+                    >
                   </aui-field>
 
                   <aui-button primary accent width="full">Login</aui-button>
@@ -63,19 +90,31 @@ examples:
               </aui-inset>
             </aui-content>
             <aui-footer>
-              <span slot="content"><aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text></span>
+              <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>
 
           <!-- 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: Branded two-column login with form on the left panel and image placeholder on the right.

package/dist/docs/blocks/login-email-only.yaml

@@ -1,26 +1,28 @@
 name: login-email-only
 type: block
 summary: Minimal centered login with email field and optional social buttons.
-description: >
-  A card-less, centered authentication layout built for magic-link or
-  passwordless flows. A brand icon and heading anchor the top, followed
-  by a single email field and login button. Social alternatives sit
-  below a subtle "Or" separator. Best for apps that prioritize
-  passwordless auth while keeping social login as a secondary path.
-
-components: [aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button]
+description: |
+  A card-less, centered authentication layout built for magic-link or passwordless flows. A brand icon and heading anchor the top, followed by a single email field and login button. Social alternatives sit below a subtle "Or" separator. Best for apps that prioritize passwordless auth while keeping social login as a secondary path.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-field
+  - aui-input
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Minimal centered login with email field and optional social buttons.
+    html: |-
       <aui-stack gap="4" align-items="center" text="center" max-width="md">
-        <img src="/icon.svg" alt="Acme Inc" style="width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;">
+        <img src="/icon.svg" alt="Acme Inc" style="width: 2.5rem; height: 2.5rem; border-radius: var(--aui-radius);">
         <aui-stack gap="1" align-items="center">
           <aui-heading size="xl">Welcome to Acme Inc.</aui-heading>
           <aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text>
         </aui-stack>
 
-        <aui-stack gap="6" width="full" text="left">
+        <aui-stack width="full" text="left">
           <aui-field label="Email" width="full" hide-label>
             <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
           </aui-field>
@@ -36,4 +38,3 @@ examples:
 
         <aui-text muted size="xs">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
       </aui-stack>
-    description: Minimal email-only login with social alternatives and terms notice.

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-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>
@@ -48,11 +60,11 @@ examples:
                   </aui-stack>
 
                   <!-- Social row -->
-                  <aui-stack direction="row" gap="2">
-                    <aui-button scrim grow="1">Apple</aui-button>
-                    <aui-button scrim grow="1">Google</aui-button>
-                    <aui-button scrim grow="1">Meta</aui-button>
-                  </aui-stack>
+                  <aui-button-group>
+                    <aui-button scrim grow="1" basis="0">Apple</aui-button>
+                    <aui-button scrim grow="1" basis="0">Google</aui-button>
+                    <aui-button scrim grow="1" basis="0">Meta</aui-button>
+                  </aui-button-group>
 
                   <!-- Terms -->
                   <aui-text muted size="xs" align-items="center" text="center">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
@@ -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.