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

package/dist/docs/blocks/data-table.yaml

@@ -0,0 +1,106 @@
+name: data-table
+type: block
+summary: Customer data table with search, status badges, and pagination footer.
+description: |
+  A panel with a searchable data table. Header has a title+count stack and a compact type="search" input (auto icon + clear) in a vertically centered row. The table uses aui-table with cols="2fr 1fr auto" for grid track sizing (Company with name+email stack, Plan, Status badge). Footer shows row count and pagination controls. Status badges use success/warning/danger intents for Active/Trial/Churned states.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-input
+  - aui-table
+  - aui-table-head
+  - aui-table-body
+  - aui-table-row
+  - aui-table-header
+  - aui-table-cell
+  - aui-badge
+  - aui-pagination
+kind: panel
+examples:
+  - description: Customer data table with search, status badges, and pagination footer.
+    html: |-
+      <aui-container kind="panel" bordered max-width="xl">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-stack gap="1" spacer>
+              <aui-heading size="lg">Customers</aui-heading>
+              <aui-text muted size="sm">248 total</aui-text>
+            </aui-stack>
+            <aui-input type="search" placeholder="Search…" size="sm"></aui-input>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-table cols="2fr 1fr auto">
+            <aui-table-head>
+              <aui-table-row>
+                <aui-table-header>Company</aui-table-header>
+                <aui-table-header>Plan</aui-table-header>
+                <aui-table-header>Status</aui-table-header>
+              </aui-table-row>
+            </aui-table-head>
+            <aui-table-body>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Acme Corp</aui-heading>
+                    <aui-text muted size="xs">contact@acme.com</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Enterprise</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Globex Inc</aui-heading>
+                    <aui-text muted size="xs">admin@globex.io</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Pro</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Initech</aui-heading>
+                    <aui-text muted size="xs">hello@initech.com</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Starter</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge warning>Trial</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Umbrella Ltd</aui-heading>
+                    <aui-text muted size="xs">ops@umbrella.co</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Enterprise</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>
+              </aui-table-row>
+              <aui-table-row>
+                <aui-table-cell>
+                  <aui-stack gap="0">
+                    <aui-heading size="sm">Stark Industries</aui-heading>
+                    <aui-text muted size="xs">tony@stark.dev</aui-text>
+                  </aui-stack>
+                </aui-table-cell>
+                <aui-table-cell><aui-text size="sm">Pro</aui-text></aui-table-cell>
+                <aui-table-cell><aui-badge danger>Churned</aui-badge></aui-table-cell>
+              </aui-table-row>
+            </aui-table-body>
+          </aui-table>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text muted size="xs" spacer>Showing 1–5 of 248</aui-text>
+            <aui-pagination total="50" current="1" size="sm"></aui-pagination>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/data-timeline.yaml

@@ -0,0 +1,103 @@
+name: data-timeline
+type: block
+summary: Chronological event timeline with date groups, connector lines, and semantic icons.
+description: |
+  A vertical timeline panel showing events grouped by date. Header has a title and event count badge. Events use aui-stepper with aui-step children for connector lines between entries, with solid-color avatars per action type (deploy=success, comment=warning, update=accent, create=success, delete=danger) using solid for solid avatar backgrounds. Each event row has an aui-heading size="sm" with strong actor/entity names, optional monospace detail via inline font-family, and a timestamp. Date groups use aui-heading group for uppercase section labels and are separated by dividers.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-divider
+kind: panel
+examples:
+  - description: Chronological event timeline with date groups, connector lines, and semantic icons.
+    html: |-
+      <aui-container kind="panel" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>History</aui-heading>
+            <aui-badge>12 events</aui-badge>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Today -->
+              <aui-stack gap="3">
+                <aui-heading group>Today</aui-heading>
+
+                <aui-stepper>
+                  <aui-step state="done">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="arrow-up" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong></aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">commit a1b2c3d · 3 files changed</aui-text>
+                      <aui-text size="xs" muted>10:42 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                      <aui-text size="xs" muted>9:15 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="pencil" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Maria Santos</strong> updated <strong>API rate limits</strong></aui-heading>
+                      <aui-text size="xs" muted>8:30 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+                </aui-stepper>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <!-- Yesterday -->
+              <aui-stack gap="3">
+                <aui-heading group>Yesterday</aui-heading>
+
+                <aui-stepper>
+                  <aui-step state="done">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="plus" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>
+                      <aui-text size="xs" muted>4:32 PM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step state="done">
+                    <aui-avatar size="xs" danger shrink="0" solid><aui-icon name="trash" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>
+                      <aui-text size="xs" muted>2:15 PM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+
+                  <aui-step>
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="gear" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Liam Walker</strong> changed status to <aui-badge success>Resolved</aui-badge></aui-heading>
+                      <aui-text size="xs" muted>11:08 AM</aui-text>
+                    </aui-stack>
+                  </aui-step>
+                </aui-stepper>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/feedback-alert-banner.yaml

@@ -0,0 +1,42 @@
+name: feedback-alert-banner
+type: block
+summary: Dismissible alert banners in info, success, warning, and danger variants.
+description: |
+  Four inline notification banners showcasing each intent variant using aui-alert. Each alert carries an intent attribute (info, success, warning, danger), an icon attribute for the leading icon, and the dismissable modifier for the close button. Content uses strong for the heading and p elements for body text and optional action links.
+components:
+  - aui-alert
+  - aui-stack
+kind: widget
+examples:
+  - description: Dismissible alert banners in info, success, warning, and danger variants.
+    html: |-
+      <aui-stack>
+
+        <!-- Info -->
+        <aui-alert icon="info" dismissable>
+          <strong>New version available</strong>
+          <p>Version 2.4.1 includes performance improvements and bug fixes.</p>
+          <p><a href="#">View changelog</a></p>
+        </aui-alert>
+
+        <!-- Success -->
+        <aui-alert success icon="check-circle" dismissable>
+          <strong>Deployment successful</strong>
+          <p>Your changes are now live in production.</p>
+        </aui-alert>
+
+        <!-- Warning -->
+        <aui-alert warning icon="warning" dismissable>
+          <strong>Storage almost full</strong>
+          <p>You've used 90% of your storage quota. Consider upgrading your plan.</p>
+          <p><a href="#">Upgrade plan</a></p>
+        </aui-alert>
+
+        <!-- Danger -->
+        <aui-alert danger icon="warning-circle" dismissable>
+          <strong>Payment failed</strong>
+          <p>Your last payment was declined. Please update your billing information to avoid service interruption.</p>
+          <p><a href="#">Update billing</a></p>
+        </aui-alert>
+
+      </aui-stack>

package/dist/docs/blocks/feedback-empty-state.yaml

@@ -0,0 +1,18 @@
+name: feedback-empty-state
+type: block
+summary: Centered empty state with illustration, heading, description, and primary + secondary actions.
+description: |
+  A vertically centered empty-state card for when a collection or page has no content yet. Uses the aui-empty-state component with an icon, heading, description, and a primary CTA button with leading icon.
+components:
+  - aui-container
+  - aui-empty-state
+  - aui-button
+kind: card
+examples:
+  - description: Centered empty state with illustration, heading, description, and primary + secondary actions.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-empty-state icon="file-dashed" heading="No projects yet" description="Create your first project to get started. Projects help you organize your work and collaborate with your team.">
+          <aui-button accent icon-leading="plus">Create Project</aui-button>
+        </aui-empty-state>
+      </aui-container>

package/dist/docs/blocks/feedback-progress-stepper.yaml

@@ -0,0 +1,82 @@
+name: feedback-progress-stepper
+type: block
+summary: Horizontal multi-step progress wizard with step content and navigation footer.
+description: |
+  A wizard-style card with aui-stepper direction="horizontal" at the top showing step indicators connected by lines. Each aui-step has a state-driven avatar with solid backgrounds (done=success check, running=accent number, pending=--aui-neutral-highest with --aui-ink-muted text) with label and optional sublabel. Below the stepper, the current step's content area uses aui-inset gap="4" and shows a title, description, and progress bar with --aui-accent-500 fill on --aui-control track. Footer has scrim Back and primary accent Continue buttons with grow="1" basis="0" for equal sizing. Connector lines between steps are handled by the aui-stepper/aui-step elements.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-button
+  - aui-button-group
+kind: card
+examples:
+  - description: Horizontal multi-step progress wizard with step content and navigation footer.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+
+        <!-- Current step content -->
+        <aui-content>
+          <aui-inset gap="4">
+
+            <!-- Stepper track -->
+            <aui-stepper direction="horizontal">
+
+              <aui-step state="done">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-text size="xs" weight="medium">Account</aui-text>
+                <aui-text size="xs" muted>Completed</aui-text>
+              </aui-step>
+
+              <aui-step state="done">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-text size="xs" weight="medium">Team</aui-text>
+                <aui-text size="xs" muted>3 invited</aui-text>
+              </aui-step>
+
+              <aui-step state="running">
+                <aui-avatar size="xs" accent solid>3</aui-avatar>
+                <aui-text size="xs" weight="medium">Integrations</aui-text>
+                <aui-text size="xs" muted>In progress</aui-text>
+              </aui-step>
+
+              <aui-step>
+                <aui-avatar size="xs" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);">4</aui-avatar>
+                <aui-text size="xs" muted>Review</aui-text>
+              </aui-step>
+
+            </aui-stepper>
+            <aui-stack gap="4">
+              <aui-stack gap="1">
+                <aui-heading size="lg">Connect your tools</aui-heading>
+                <aui-text muted size="sm">Link the services your team uses every day. We'll import your existing data and configure notifications automatically.</aui-text>
+              </aui-stack>
+              <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 5 connected</aui-text>
+                </aui-stack>
+                <div style="height: 4px; border-radius: var(--aui-radius); background: var(--aui-control);">
+                  <div style="width: 40%; height: 100%; border-radius: var(--aui-radius); background: var(--aui-accent-500);"></div>
+                </div>
+              </aui-stack>
+            </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/form-settings-section.yaml

@@ -0,0 +1,129 @@
+name: form-settings-section
+type: block
+summary: Multi-section settings page with profile form fields and notification toggles.
+description: |
+  A vertically stacked pair of settings sections. The first section uses aui-fieldset legend="Personal Details" (borderless) to group a profile form with two-column field rows using gap="3" between rows (display name, email, timezone, role) with fields using grow="1" basis="0" for equal sizing, and a save/cancel footer in an aui-button-group. The second section uses aui-fieldset legend="Notification Channels" (borderless) for notification toggle rows where the switch aligns horizontally with the title in a direction="row" stack, and the description sits below spanning full width. No footer on the notifications section since toggles save immediately. Both sections follow the container-header- content skeleton with the notifications section adding dividers between rows. Sections are wrapped in a max-width stack for page-level constraint.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-select
+  - aui-option
+  - aui-switch
+  - aui-button
+  - aui-button-group
+  - aui-fieldset
+  - aui-divider
+kind: card
+examples:
+  - description: Multi-section settings page with profile form fields and notification toggles.
+    html: |-
+      <aui-stack gap="4" max-width="2xl">
+
+        <!-- Profile section -->
+        <aui-container kind="card" bordered>
+          <aui-header>
+            <span slot="leading">
+              <aui-stack gap="1">
+                <aui-heading size="lg">Profile</aui-heading>
+                <aui-text muted size="sm">Your public identity across the workspace.</aui-text>
+              </aui-stack>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-fieldset legend="Personal Details" borderless>
+                <aui-stack direction="row" gap="3">
+                  <aui-field label="Display name" width="full" grow="1" basis="0">
+                    <aui-input placeholder="Amara Osei" width="full"></aui-input>
+                  </aui-field>
+                  <aui-field label="Email address" width="full" grow="1" basis="0">
+                    <aui-input type="email" placeholder="amara@acme.io" width="full"></aui-input>
+                  </aui-field>
+                </aui-stack>
+                <aui-stack direction="row" gap="3">
+                  <aui-field label="Timezone" width="full" grow="1" basis="0">
+                    <aui-select width="full" placeholder="(UTC-08:00) Pacific Time">
+                      <aui-option value="pst">(UTC-08:00) Pacific Time</aui-option>
+                      <aui-option value="mst">(UTC-07:00) Mountain Time</aui-option>
+                      <aui-option value="cst">(UTC-06:00) Central Time</aui-option>
+                      <aui-option value="est">(UTC-05:00) Eastern Time</aui-option>
+                    </aui-select>
+                  </aui-field>
+                  <aui-field label="Role" width="full" grow="1" basis="0">
+                    <aui-select width="full" placeholder="Engineering">
+                      <aui-option value="eng">Engineering</aui-option>
+                      <aui-option value="design">Design</aui-option>
+                      <aui-option value="product">Product</aui-option>
+                      <aui-option value="marketing">Marketing</aui-option>
+                    </aui-select>
+                  </aui-field>
+                </aui-stack>
+              </aui-fieldset>
+            </aui-inset>
+          </aui-content>
+          <aui-footer>
+            <aui-button-group>
+              <aui-button primary grow="1" basis="0">Save changes</aui-button>
+              <aui-button scrim grow="1" basis="0">Cancel</aui-button>
+            </aui-button-group>
+          </aui-footer>
+        </aui-container>
+
+        <!-- Notifications section -->
+        <aui-container kind="card" bordered>
+          <aui-header>
+            <span slot="leading">
+              <aui-stack gap="1">
+                <aui-heading size="lg">Notifications</aui-heading>
+                <aui-text muted size="sm">Choose which updates reach you and how.</aui-text>
+              </aui-stack>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-fieldset legend="Notification Channels" borderless>
+                <aui-stack gap="1">
+                  <aui-stack direction="row" gap="3" align-items="center">
+                    <aui-heading size="md" spacer>Email notifications</aui-heading>
+                    <aui-switch checked></aui-switch>
+                  </aui-stack>
+                  <aui-text muted size="sm">Receive updates via email when someone mentions you.</aui-text>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="1">
+                  <aui-stack direction="row" gap="3" align-items="center">
+                    <aui-heading size="md" spacer>Push notifications</aui-heading>
+                    <aui-switch checked></aui-switch>
+                  </aui-stack>
+                  <aui-text muted size="sm">Get push notifications on your mobile device.</aui-text>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="1">
+                  <aui-stack direction="row" gap="3" align-items="center">
+                    <aui-heading size="md" spacer>Weekly report</aui-heading>
+                    <aui-switch></aui-switch>
+                  </aui-stack>
+                  <aui-text muted size="sm">Receive a weekly summary of your activity.</aui-text>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="1">
+                  <aui-stack direction="row" gap="3" align-items="center">
+                    <aui-heading size="md" spacer>Marketing emails</aui-heading>
+                    <aui-switch></aui-switch>
+                  </aui-stack>
+                  <aui-text muted size="sm">Occasional product updates and announcements.</aui-text>
+                </aui-stack>
+              </aui-fieldset>
+            </aui-inset>
+          </aui-content>
+        </aui-container>
+
+      </aui-stack>