@adia-ai/web-components 0.0.1

package/patterns/app-shell/css/app-shell.main.css

@@ -0,0 +1,58 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Main column (topbar + scroll + footer)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Main column ── */
+app-shell-ui > main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  border-inline: var(--page-main-border);
+}
+
+/* ── Main > header (topbar) ──
+   Contains: sidebar toggle, breadcrumb, spacer, action buttons */
+app-shell-ui > main > header {
+  display: flex;
+  align-items: center;
+  gap: var(--page-header-gap);
+  min-height: var(--page-header-height);
+  padding: 0 var(--page-header-px);
+  border-bottom: var(--page-border);
+  font-size: var(--page-header-font);
+  flex-shrink: 0;
+}
+
+/* ── Main > section (scroll container) ──
+   Wraps [data-content-root]. Scrolls vertically, hides scrollbar. */
+app-shell-ui > main > section {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  background: var(--page-content-bg);
+}
+
+app-shell-ui > main > section::-webkit-scrollbar { display: none; }
+
+/* ── Main > footer (status bar) ──
+   Last child auto-pushed to trailing edge via margin-inline-start: auto. */
+app-shell-ui > main > footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+  gap: var(--page-header-gap);
+  min-height: var(--page-header-height);
+  padding: 0 var(--page-header-px);
+  border-top: var(--page-border);
+  font-size: var(--page-header-font);
+  color: var(--page-header-fg-muted);
+}
+
+app-shell-ui > main > footer > :last-child {
+  margin-inline-start: auto;
+}

package/patterns/app-shell/css/app-shell.shell.css

@@ -0,0 +1,44 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Root layout + modes
+
+   Structure:
+     app-shell-ui                               — root shell (flex row, fixed viewport)
+       aside[data-sidebar="leading"]           — nav sidebar (resizable, collapsible)
+       main                                    — center column (topbar + scroll + footer)
+         header                                — topbar
+         section                               — scroll container
+           article[data-content-root]          — page wrapper (sticky bands + centered body)
+             div[data-content-header] > header — sticky page title + tabs
+             div[data-content-body] > section  — centered reading column (tab/form content)
+         footer                                — status bar
+       aside[data-sidebar="trailing"]          — inspector sidebar
+       dialog[data-command]                    — command palette
+
+   Modes (space-separated on mode attribute):
+     "rounded"    — border-radius on scroll section
+     "borderless" — removes chrome borders (content borders persist)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Page modes ── */
+app-shell-ui[mode~="rounded"] > main > section {
+  border-radius: var(--page-content-radius);
+}
+
+app-shell-ui[mode~="borderless"] {
+  --page-main-border: none;
+  --page-border: none;
+  /* Note: --page-content-border is NOT reset — content dividers persist */
+}
+
+/* ── Page shell ── */
+app-shell-ui {
+  display: flex;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--page-bg);
+  position: fixed;
+  inset: 0;
+  overscroll-behavior: none;
+  font-family: var(--page-font-family);
+  font-size: var(--page-body-size);
+}

package/patterns/app-shell/css/app-shell.sidebar.css

@@ -0,0 +1,116 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Sidebar
+
+   Resizable side panels with header/section/footer structure.
+   Acts as a CSS container query provider (container-name: sidebar)
+   so children can adapt to collapsed width via @container.
+   ═══════════════════════════════════════════════════════════════ */
+
+[data-sidebar] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-width: var(--page-sidebar-min-width);
+  max-width: var(--page-sidebar-max-width);
+  min-height: 0;
+  font-size: var(--page-sidebar-font);
+  position: relative;
+  container-type: inline-size;
+  container-name: sidebar;
+  transition: width var(--page-duration) var(--page-easing);
+}
+
+/* ── Resize handle ──
+   6px invisible hit area straddling the sidebar edge.
+   Accent color on hover/drag. */
+[data-sidebar] > [data-resize] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background var(--page-duration-fast) var(--page-easing);
+  z-index: 2;
+}
+
+[data-sidebar="leading"] > [data-resize] { right: -3px; }
+[data-sidebar="trailing"] > [data-resize] { left: -3px; }
+
+[data-sidebar] > [data-resize]:hover {
+  background: var(--page-sidebar-resize-accent);
+}
+
+[data-sidebar][data-resizing] > [data-resize] {
+  background: var(--page-sidebar-resize-accent);
+}
+
+/* During drag: disable transition + text selection */
+[data-sidebar][data-resizing] {
+  user-select: none;
+  transition: none;
+}
+
+/* ── Sidebar widths ── */
+[data-sidebar="leading"] {
+  width: var(--page-sidebar-width-leading);
+}
+
+[data-sidebar="trailing"] {
+  width: var(--page-sidebar-width-trailing);
+}
+
+/* ── Sidebar header / footer ── */
+[data-sidebar] > header,
+[data-sidebar] > footer {
+  display: flex;
+  align-items: center;
+  gap: var(--page-sidebar-gap);
+  padding: var(--page-sidebar-px);
+  flex-shrink: 0;
+  overflow: hidden;
+  min-width: 0;
+}
+
+[data-sidebar] > header {
+  min-height: var(--page-header-height);
+  border-bottom: var(--page-border);
+}
+
+[data-sidebar] > footer {
+  min-height: var(--page-header-height);
+  margin-top: auto;
+  border-top: var(--page-border);
+}
+
+/* ── Sidebar section (scrollable body) ── */
+[data-sidebar] > section {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--page-sidebar-px);
+  min-height: 0;
+  scrollbar-width: none;
+}
+
+[data-sidebar] > section::-webkit-scrollbar { display: none; }
+
+/* span[slot="pad"] — opt-in padding wrapper for sidebar content
+   that needs inset (e.g. trailing sidebar inspector fields) */
+[data-sidebar] span[slot="pad"] {
+  display: block;
+  padding: var(--page-sidebar-px);
+}
+
+/* Reset app-nav-ui border/padding inside sidebars */
+[data-sidebar] app-nav-ui {
+  border: none;
+  padding: 0;
+}
+
+/* Sidebar-level divider (outside app-nav-ui scope) */
+[data-sidebar] > section > hr[data-nav-divider] {
+  border: none;
+  height: 1px;
+  background: var(--page-sidebar-divider-bg);
+  margin: var(--page-sidebar-gap) var(--page-sidebar-px);
+}

package/patterns/app-shell/css/app-shell.templates.css

@@ -0,0 +1,214 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Page templates (headers, body layouts, form sections)
+
+   Structure:
+     <article data-content-root>
+       [data-content-header]   — sticky top band, border-bottom
+         <header>...</header>  — centered column (padding + max-width)
+       [data-content-body]     — scrollable flex column (size only)
+         <section>...</section> — centered column (padding + max-width + gap)
+       [data-content-footer]   — sticky bottom band, border-top
+         <footer>...</footer>  — centered column (padding + max-width)
+
+   The outer `[data-*]` wrapper owns full-width concerns (sticky
+   position, border, background, scroll sizing). The inner semantic
+   element (<header>/<section>/<footer>) owns the centered reading
+   column (max-width, gutter, rhythm). Full-bleed content (iframes,
+   split panes) can skip <section> and sit directly in
+   [data-content-body] to opt out of the column.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Content root ── */
+[data-content-root] {
+  position: relative;
+  isolation: isolate;
+  min-block-size: 100%;
+}
+
+/* Fill-mode: when the body contains only an iframe (or explicit opt-in),
+   make the root a flex column that stretches to the scroll section's
+   visible height, so [data-content-body] flex: 1 resolves against a real
+   size and the iframe's block-size: 100% can fill. Prose pages (natural
+   root height + section scroll) are unaffected. */
+[data-content-root]:has(> [data-content-body] > iframe:only-child),
+[data-content-root][data-fill] {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+/* ── Scaffold content columns ─────────────────────────────────────
+   Max-width + centering + horizontal inset are properties of the
+   NAMED inner semantic elements, not the [data-*] wrappers.
+
+   Who owns what:
+     • [data-content-header] / [data-content-footer]
+         — own sticky position, border, background (full-width band).
+     • [data-content-body]
+         — owns flex sizing + scroll; no padding, no max-width.
+     • Inner <header> / <section> / <footer>
+         — own max-width, margin-inline: auto, padding (centered column).
+     • Cards / modals / drawers
+         — own margin/padding via their own CSS; never inherit this.
+   ─────────────────────────────────────────────────────────────── */
+[data-content-header] > header,
+[data-content-body] > section,
+[data-content-footer] > footer {
+  max-width: var(--page-content-max-width);
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[data-content-header] > header,
+[data-content-footer] > footer {
+  padding-inline: var(--page-content-inset);
+}
+
+/* Full-width escape hatch — stretch the centered column to 100%. */
+[data-content-full] [data-content-header] > header,
+[data-content-full] [data-content-body] > section,
+[data-content-full] [data-content-footer] > footer,
+[data-content-header][data-content-full] > header,
+[data-content-body][data-content-full] > section,
+[data-content-footer][data-content-full] > footer,
+[data-content-header] > header[data-content-full],
+[data-content-body] > section[data-content-full],
+[data-content-footer] > footer[data-content-full] {
+  max-width: 100%;
+}
+
+/* ── Content header — sticky top, border-bottom ── */
+[data-content-header] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: var(--page-content-border);
+  background: var(--page-content-bg);
+}
+
+[data-content-header] > header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-header-gap);
+  padding-block: var(--page-content-inset) var(--page-header-gap);
+}
+
+/* When tabs are present, remove bottom padding so tabs sit flush against border */
+[data-content-header] > header:has(tabs-ui) {
+  padding-bottom: 0;
+}
+
+/* Variant: non-sticky, no border, transparent bg */
+[data-content-header]:has(> header[data-flush]) {
+  position: static;
+  border-bottom: none;
+  background: none;
+}
+
+/* Variant: compact padding (for dense headers) */
+[data-content-header] > header[data-compact] {
+  padding-block: var(--page-header-px);
+}
+
+/* Title row: h1 left, actions right */
+[data-content-header] > header > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--page-header-gap);
+}
+
+/* h1 + description — typography handled by [variant] attribute */
+[data-content-header] h1 { margin: 0; }
+[data-content-header] > header > p { margin: 0; }
+
+/* ── Content body ──
+   Wrapper: flex column that fills the scroll section. No padding,
+   no max-width — those live on the inner <section>. Non-section
+   children (iframes, split panes) go full-bleed. */
+[data-content-body] {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inner <section> — the centered reading column. Owns gutter and
+   section-to-section rhythm. Stacks with flex gap so direct children
+   (<card-ui>, <grid-ui>, nested <section>, …) have zero wrapper margin. */
+[data-content-body] > section {
+  padding: var(--page-content-inset);
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-section-gap, var(--a-space-8));
+}
+
+/* iframe-as-page-content: fill the body.
+   display: block kills the 4-5px inline-descender gap. */
+[data-content-body] > iframe {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  flex: 1;
+}
+
+/* ── Content footer — sticky bottom, border-top ── */
+[data-content-footer] {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  border-top: var(--page-content-border);
+  background: var(--page-content-bg);
+}
+
+[data-content-footer] > footer {
+  padding: var(--page-content-inset);
+}
+
+/* ── Tab content ──
+   Marker for the active tab's form sections. Gutter/padding is
+   owned by the <article> wrapper. */
+
+/* ── Form sections ──
+   Each section: kicker-styled h2 label, then [data-section] grid. */
+[data-tab-content] > section {
+  margin-bottom: var(--page-section-gap);
+}
+
+/* h2 — kicker role (small, uppercase, muted, letter-spaced) */
+[data-tab-content] > section > h2 {
+  font-size: var(--page-section-size);
+  font-weight: var(--page-section-weight);
+  line-height: var(--page-section-leading);
+  letter-spacing: var(--page-section-tracking);
+  text-transform: var(--page-section-case);
+  color: var(--page-section-color);
+  margin: 0 0 var(--page-section-mb);
+  padding-bottom: var(--page-section-pb);
+  border-bottom: var(--page-content-border);
+}
+
+/* Two-column settings layout: description left, controls right */
+[data-tab-content] > section > [data-section] {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: var(--page-section-gap) var(--page-header-gap);
+}
+
+/* h3 — subsection role */
+[data-tab-content] > section > [data-section] > aside > h3 {
+  font-size: var(--page-subsection-size);
+  font-weight: var(--page-subsection-weight);
+  color: var(--page-subsection-color);
+  margin: 0 0 var(--page-section-pb);
+}
+
+/* Aside description */
+[data-tab-content] > section > [data-section] > aside > p {
+  margin: 0;
+}

package/patterns/app-shell/css/app-shell.tokens.css

@@ -0,0 +1,116 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Design tokens
+
+   Declared on :where(app-shell-ui) for zero specificity.
+   All children (main + sidebars) inherit these.
+
+   Token groups:
+     --page-*          — shell, borders, backgrounds
+     --page-header-*   — topbar/footer bars
+     --page-sidebar-*  — sidebar geometry
+     --page-content-*  — scroll area, sticky header, typography
+     --page-section-*  — form section headings
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(app-shell-ui) {
+  /* Shell — root backgrounds and border shorthand */
+  --page-bg:                var(--a-canvas-1);       /* chrome/sidebar bg */
+  --page-border:            1px solid var(--a-border-subtle); /* chrome borders (killed by "borderless") */
+  --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
+
+  /* Header / footer bars — shared by topbar + bottombar */
+  --page-header-height:     48px;
+  --page-header-px:         var(--a-space-3);
+  --page-header-gap:        var(--a-space-3);
+  --page-header-font:       var(--a-ui-size);
+  --page-header-fg-muted:   var(--a-fg-muted);         /* footer text, section labels */
+
+  /* Sidebar — geometry and constraints */
+  --page-sidebar-px:        var(--a-space-1);        /* inner padding for header/footer/section */
+  --page-sidebar-gap:       var(--a-space-1);        /* gap between sidebar header/footer items */
+  --page-sidebar-font:      var(--a-ui-size);
+  --page-sidebar-min-width: 48px;                    /* collapsed icon-only width */
+  --page-sidebar-max-width: 480px;                   /* drag resize upper bound */
+  --page-sidebar-resize-accent: var(--a-accent); /* resize handle color */
+  --page-sidebar-divider-bg: var(--a-border-subtle); /* hr divider inside sidebar */
+  --page-sidebar-width-leading:  clamp(var(--page-sidebar-min-width), 200px, 240px);
+  --page-sidebar-width-trailing: clamp(var(--page-sidebar-min-width), 200px, 240px);
+
+  /* Content area — scroll region inside main */
+  --page-content-bg:        var(--a-canvas-0);       /* content surface (lighter than chrome) */
+  --page-content-radius:    var(--a-radius-lg);      /* used by "rounded" mode */
+  --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
+  --page-content-max-width: 1540px;                   /* max-width for content children */
+  --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
+
+  /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
+  --page-section-gap:             var(--a-space-6);
+  --page-section-size:            var(--a-kicker-size);
+  --page-section-weight:          var(--a-kicker-weight);
+  --page-section-leading:         var(--a-kicker-leading);
+  --page-section-tracking:        var(--a-kicker-tracking);
+  --page-section-case:            var(--a-kicker-case);
+  --page-section-color:           var(--a-kicker-color);
+  --page-section-mb:              var(--a-space-3);
+  --page-section-pb:              var(--a-space-2);
+
+  /* Sub-section labels (e.g. "Details") — maps to "subsection" typography role */
+  --page-subsection-size:         var(--a-subsection-size);
+  --page-subsection-weight:       var(--a-subsection-weight);
+  --page-subsection-color:        var(--a-subsection-color);
+
+  /* Sidebar collapsed — icon/avatar sizes when sidebar is narrow */
+  --page-sidebar-collapsed-icon:   1.0625rem;   /* select leading icon */
+  --page-sidebar-collapsed-avatar: 1.5rem;      /* select leading avatar */
+
+  /* Helpers — layout utility spacing */
+  --page-actions-gap:       var(--a-space-2);    /* inline action group gap */
+  --page-grid-gap:          var(--a-space-3);    /* grid/col/row default gap */
+
+  /* Animation */
+  --page-duration:            var(--a-duration);
+  --page-duration-fast:       var(--a-duration-fast);
+  --page-easing:              var(--a-easing);
+
+  /* Shell typography */
+  --page-font-family:         var(--a-font-family);
+  --page-body-size:           var(--a-body-size);
+
+  /* Nav — root container tokens */
+  --nav-duration:             var(--a-duration);
+  --nav-duration-fast:        var(--a-duration-fast);
+  --nav-easing:               var(--a-easing);
+  --nav-label-px:             var(--a-space-2);
+  --nav-label-py:             var(--a-space-1);
+  --nav-label-font-size:      var(--a-ui-tiny);
+  --nav-label-weight:         var(--a-weight-medium);
+  --nav-label-fg:             var(--a-fg-muted);
+  --nav-divider-bg:           var(--a-border-subtle);
+  --nav-divider-my:           var(--a-space-1);
+
+  /* Nav — group tokens */
+  --nav-group-indent-rail-bg: var(--a-border-subtle);
+  --nav-group-icon-font-size: var(--a-ui-size);
+  --nav-group-text-weight:    var(--a-weight-medium);
+  --nav-group-badge-bg:       var(--a-bg-muted);
+  --nav-group-badge-px:       var(--a-space-1);
+  --nav-group-badge-radius:   var(--a-radius-full);
+
+  /* Nav — item tokens */
+  --nav-item-icon-font-size:  var(--a-ui-size);
+  --nav-item-selected-weight: var(--a-weight-medium);
+  --nav-item-badge-fg:        var(--a-fg-muted);
+  --nav-item-badge-bg:        var(--a-bg-muted);
+  --nav-item-badge-px:        var(--a-space-1);
+  --nav-item-badge-radius:    var(--a-radius-full);
+  --nav-item-trailing-font:   var(--a-ui-sm);
+  --nav-item-trailing-fg:     var(--a-fg-muted);
+  --nav-item-trailing-border: var(--a-border-subtle);
+  --nav-item-trailing-radius: var(--a-radius-sm);
+  --nav-item-trailing-px:     var(--a-space-0-5);
+  --nav-item-child-height:    var(--a-size-sm);
+  --nav-item-child-font:      var(--a-ui-sm);
+
+  /* Global icon size bump */
+  --a-icon-size: 18px;
+}

package/patterns/app-shell/index.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AdiaUI — App Shell</title>
+  <link rel="stylesheet" href="../../styles/tokens.css" />
+  <link rel="stylesheet" href="../../styles/styles.css" />
+  <link rel="stylesheet" href="app-shell.css" />
+  <link rel="stylesheet" href="app-nav.css" />
+</head>
+<body>
+<app-shell-ui mode="rounded borderless">
+
+<!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->
+<aside data-sidebar="leading">
+  <header>
+    <select-ui id="workspace-select" avatar="" value="adia-ui" variant="ghost" style="flex:1"></select-ui>
+  </header>
+
+  <section>
+    <app-nav-ui id="nav">
+      <app-nav-item-ui icon="magnifying-glass" text="Search" value="search">
+        <span slot="icon"><icon-ui name="magnifying-glass"></icon-ui></span>
+        <span slot="text">Search</span>
+      </app-nav-item-ui>
+      <hr data-nav-divider />
+      <app-nav-group-ui icon="house" text="Home">
+        <app-nav-item-ui text="Dashboard" value="dashboard" selected></app-nav-item-ui>
+        <app-nav-item-ui text="Analytics" value="analytics"></app-nav-item-ui>
+        <app-nav-item-ui text="Reports" value="reports"></app-nav-item-ui>
+      </app-nav-group-ui>
+      <app-nav-group-ui icon="gear" text="Settings">
+        <app-nav-item-ui text="General" value="general"></app-nav-item-ui>
+        <app-nav-item-ui text="Team" value="team"></app-nav-item-ui>
+        <app-nav-item-ui text="Billing" value="billing"></app-nav-item-ui>
+      </app-nav-group-ui>
+    </app-nav-ui>
+  </section>
+
+  <footer>
+    <select-ui id="user-select" avatar="https://i.pravatar.cc/32?u=demo" value="demo" variant="ghost" style="flex:1"></select-ui>
+  </footer>
+  <div data-resize></div>
+</aside>
+
+<!-- ═══════════════ MAIN ═══════════════ -->
+<main>
+  <header>
+    <button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"></button-ui>
+    <breadcrumb-ui>
+      <a href="#">Home</a>
+      <span>Dashboard</span>
+    </breadcrumb-ui>
+    <span data-spacer></span>
+    <div data-actions>
+      <button-ui icon="moon" variant="ghost" size="sm"></button-ui>
+    </div>
+  </header>
+
+  <section>
+    <article data-content-root>
+      <div data-content-header>
+        <header>
+          <div>
+            <h1>Dashboard</h1>
+            <div data-actions>
+              <button-ui text="Export" variant="outline" size="sm"></button-ui>
+            </div>
+          </div>
+          <p>Welcome back. Here's what's happening.</p>
+        </header>
+      </div>
+      <div data-content-body>
+        <section data-tab-content>
+          <p style="color:var(--a-fg-muted); text-align:center;">
+            App Shell pattern demo. Resize the sidebar, toggle collapse, and explore the navigation.
+          </p>
+        </section>
+      </div>
+    </article>
+  </section>
+
+  <footer>
+    <span>AdiaUI App Shell</span>
+    <span data-spacer></span>
+    <span>v0.1.0</span>
+  </footer>
+</main>
+
+</app-shell-ui>
+
+<script type="module">
+  import '../../components/index.js';
+  import '../../patterns/index.js';
+
+  customElements.whenDefined('select-ui').then(() => {
+    document.getElementById('workspace-select').options = [
+      { label: 'Workspaces', options: [
+        { value: 'adia-ui', icon: 'stack', label: 'AdiaUI' },
+        { value: 'acme', icon: 'chart-bar', label: 'Acme App' },
+      ]},
+    ];
+    document.getElementById('user-select').options = [
+      { header: true, avatar: 'https://i.pravatar.cc/32?u=demo', label: 'Demo User', description: 'demo@example.com' },
+      { separator: true },
+      { action: 'logout', icon: 'sign-out', label: 'Log out' },
+    ];
+  });
+</script>
+</body>
+</html>