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

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/financial-risk.yaml

@@ -1,7 +1,164 @@
 name: financial-risk
 type: block
 summary: Financial Risk Cascade — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the Financial Risk Cascade 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 Financial Risk Cascade 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: Financial Risk Cascade — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 71.125rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Market Data Feed → Interest Rate Model -->
+          <aui-graph-noodle from="fr-market:right" to="fr-interest:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Market Data Feed → Credit Risk Model -->
+          <aui-graph-noodle from="fr-market:right" to="fr-credit:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- FX Rate Engine → Credit Risk Model -->
+          <aui-graph-noodle from="fr-fx:right" to="fr-credit:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- FX Rate Engine → VaR Calculator -->
+          <aui-graph-noodle from="fr-fx:right" to="fr-var:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Interest Rate Model → VaR Calculator -->
+          <aui-graph-noodle from="fr-interest:right" to="fr-var:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Credit Risk Model → Stress Test Engine -->
+          <aui-graph-noodle from="fr-credit:right" to="fr-stress:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VaR Calculator → Compliance Gateway -->
+          <aui-graph-noodle from="fr-var:right" to="fr-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VaR Calculator → P&L Attribution -->
+          <aui-graph-noodle from="fr-var:right" to="fr-pnl:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Stress Test Engine → Compliance Gateway -->
+          <aui-graph-noodle from="fr-stress:right" to="fr-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Liquidity Monitor → Compliance Gateway -->
+          <aui-graph-noodle from="fr-liquidity:right" to="fr-compliance:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Compliance Gateway → Regulatory Report -->
+          <aui-graph-noodle from="fr-compliance:right" to="fr-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- P&L Attribution → Counterparty Exposure -->
+          <aui-graph-noodle from="fr-pnl:right" to="fr-counterparty:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Counterparty Exposure → Margin Call Engine -->
+          <aui-graph-noodle from="fr-counterparty:right" to="fr-margin:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Margin Call Engine → Regulatory Report -->
+          <aui-graph-noodle from="fr-margin:right" to="fr-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Market Data Feed -->
+          <aui-graph-node x="24" y="116" node-id="fr-market">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Market Data Feed</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>
+          <!-- FX Rate Engine -->
+          <aui-graph-node x="24" y="256" node-id="fr-fx">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">FX Rate Engine</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>
+          <!-- Interest Rate Model -->
+          <aui-graph-node x="240" y="46" node-id="fr-interest">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Interest Rate Model</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>
+          <!-- Credit Risk Model -->
+          <aui-graph-node x="240" y="186" node-id="fr-credit">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Credit Risk Model</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>
+          <!-- VaR Calculator -->
+          <aui-graph-node x="456" y="46" node-id="fr-var">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">VaR Calculator</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>
+          <!-- Stress Test Engine -->
+          <aui-graph-node x="456" y="186" node-id="fr-stress">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Stress Test 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>
+          <!-- Liquidity Monitor -->
+          <aui-graph-node x="456" y="326" node-id="fr-liquidity">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Liquidity Monitor</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>
+          <!-- Compliance Gateway -->
+          <aui-graph-node x="672" y="116" node-id="fr-compliance">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Compliance Gateway</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>
+          <!-- P&L Attribution -->
+          <aui-graph-node x="672" y="256" node-id="fr-pnl">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">P&L Attribution</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>
+          <!-- Regulatory Report -->
+          <aui-graph-node x="888" y="46" node-id="fr-regulatory">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Regulatory Report</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>
+          <!-- Counterparty Exposure -->
+          <aui-graph-node x="888" y="186" node-id="fr-counterparty">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Counterparty Exposure</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>
+          <!-- Margin Call Engine -->
+          <aui-graph-node x="888" y="326" node-id="fr-margin">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Margin Call 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-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/flow-editor.yaml

@@ -1,17 +1,22 @@
 name: flow-editor
 type: block
 summary: Data-driven pipeline diagram rendered from a JSON dataset.
-description: >
-  A visual flow editor that renders pipeline nodes and connections from
-  a standard JSON structure. Each node has an id, label, description,
-  intent, and x/y position. Connections define from/to relationships
-  between nodes. The same JSON schema powers the static CSS preview
-  shown here and the interactive aui-noodles version with draggable
-  bezier connections. Adapters can transform external formats (Airflow
-  DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-editor, aui-editor-layer, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
-
+description: |
+  A visual flow editor that renders pipeline nodes and connections from a standard JSON structure. Each node has an id, label, description, intent, and x/y position. Connections define from/to relationships between nodes. The same JSON schema powers the static CSS preview shown here and the interactive aui-noodles version with draggable bezier connections. Adapters can transform external formats (Airflow DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-editor
+  - aui-editor-layer
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
 schema:
   nodes:
     - id: string
@@ -25,7 +30,6 @@ schema:
   connections:
     - from: string (node id)
       to: string (node id)
-
 dataset: |
   {
     "nodes": [
@@ -41,18 +45,23 @@ dataset: |
       { "from": "validate",  "to": "warehouse" }
     ]
   }
-
 examples:
-  - html: |
+  - description: Data-driven pipeline diagram rendered from a JSON dataset.
+    html: |-
       <aui-stack gap="2">
-        <aui-graph-ui style="width: 100%; height: 22rem; min-width: 44rem;" zoom="1">
+        <aui-graph-ui connectable style="width: 100%; height: 22rem" min-width="44" zoom="1">
           <aui-graph-layer name="wires" type="svg">
+            <!-- Data Ingest → Transform -->
             <aui-graph-noodle from="data-ingest:out" to="transform:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Data Ingest → Validate -->
             <aui-graph-noodle from="data-ingest:out" to="validate:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Transform → Data Warehouse -->
             <aui-graph-noodle from="transform:out" to="data-warehouse:in" color="success" weight="2"></aui-graph-noodle>
+            <!-- Validate → Data Warehouse -->
             <aui-graph-noodle from="validate:out" to="data-warehouse:in" color="warning" weight="2"></aui-graph-noodle>
           </aui-graph-layer>
           <aui-graph-layer name="content">
+            <!-- Source node -->
             <aui-graph-node x="30" y="45" node-id="data-ingest">
               <aui-container kind="widget" bordered accent>
                 <aui-inset>
@@ -65,6 +74,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Transform node -->
             <aui-graph-node x="270" y="10" node-id="transform">
               <aui-container kind="widget" bordered info>
                 <aui-inset>
@@ -78,6 +88,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Validate node -->
             <aui-graph-node x="270" y="140" node-id="validate">
               <aui-container kind="widget" bordered warning>
                 <aui-inset>
@@ -91,6 +102,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Sink node -->
             <aui-graph-node x="510" y="75" node-id="data-warehouse">
               <aui-container kind="widget" bordered success>
                 <aui-inset>
@@ -108,6 +120,3 @@ examples:
 
         <aui-text muted size="xs" align-items="center">Rendered from a standard JSON dataset. The same schema powers the interactive aui-graph version. Adapters can transform Airflow DAGs, dbt lineage, or CI/CD pipelines into this format.</aui-text>
       </aui-stack>
-    description: >
-      Data pipeline with 4 nodes (Source → Process → QA → Sink) using
-      aui-graph components with draggable nodes and bezier noodle connections.

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>