@devjuliovilla/jv-ui 1.6.1 → 1.7.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -19734,7 +19734,14 @@ class JvSidebarComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    currentTheme = input('light', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
+    themeOptions = input([], ...(ngDevMode ? [{ debugName: "themeOptions" }] : /* istanbul ignore next */ []));
+    topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
+    showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
     collapseToggle = output();
+    mobileClose = output();
+    themeChange = output();
+    actionClick = output();
     activeChildParentIds = computed(() => {
         const url = this.router.url;
         const ids = new Set();
@@ -19777,248 +19784,322 @@ class JvSidebarComponent {
         target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle" }, ngImport: i0, template: `
-    <aside class="jv-sidebar" [class.is-collapsed]="collapsed()" [class.is-mobile-open]="mobileOpen()">
-      <div class="jv-sidebar-brand">
-        <div class="brand-mark">
-          <jv-icon [name]="brandIcon()" [size]="18" />
-        </div>
-
-        @if (!collapsed()) {
-          <div class="brand-copy">
-            <strong>{{ title() }}</strong>
-            @if (subtitle()) {
-              <span>{{ subtitle() }}</span>
-            }
-          </div>
-        }
-      </div>
-
-      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
-        <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
-                <button
-                  type="button"
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [attr.title]="item.label"
-                  (click)="navigateTo(item.href)"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </button>
-              } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
-              }
-            }
-
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label">
-                      {{ child.label }}
-                    </a>
-                  }
-                }
-              </div>
-            }
-          </li>
-        }
-        </ul>
-      </nav>
-
-      <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
-          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
-          @if (!collapsed()) {
-            <span>Collapse</span>
-          }
-        </button>
-      </div>
-    </aside>
-  `, isInline: true, styles: [".jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar{width:100%;min-width:0;height:auto;max-height:100vh;border-right:0;border-bottom:1px solid var(--jv-color-border)}.jv-sidebar:not(.is-mobile-open){display:none}.jv-sidebar.is-collapsed{width:100%;min-width:0}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvSidebarComponent, isStandalone: true, selector: "jv-sidebar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose", themeChange: "themeChange", actionClick: "actionClick" }, ngImport: i0, template: `
+    @if (mobileOpen()) {
+      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
+    }
+
+    <aside
+      class="jv-sidebar"
+      [class.is-collapsed]="collapsed()"
+      [class.is-mobile-open]="mobileOpen()"
+    >
+      <div class="jv-sidebar-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+
+        @if (!collapsed()) {
+          <div class="brand-copy">
+            <strong>{{ title() }}</strong>
+            @if (subtitle()) {
+              <span>{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+
+      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-sidebar-list">
+        @for (item of normalizedItems(); track item.id) {
+          <li class="jv-sidebar-item">
+            @if (item.children.length > 0) {
+              <button
+                type="button"
+                class="jv-sidebar-link"
+                [class.is-active]="item.active"
+                [attr.aria-label]="item.label"
+                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
+                [attr.title]="item.label"
+                (click)="toggleSection(item.id)"
+              >
+                <span class="jv-sidebar-link-main">
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="18" />
+                  }
+
+                  @if (!collapsed()) {
+                    <span>{{ item.label }}</span>
+                  }
+                </span>
+
+                @if (!collapsed()) {
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
+                }
+              </button>
+            } @else {
+              @if (isHashLink(item.href)) {
+                <button
+                  type="button"
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.title]="item.label"
+                  (click)="navigateTo(item.href); mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </button>
+              } @else {
+                <a
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [routerLink]="item.href"
+                  [attr.title]="item.label"
+                  (click)="mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            }
+
+            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                @for (child of item.children; track child.id) {
+                  @if (isHashLink(child.href)) {
+                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
+                      {{ child.label }}
+                    </button>
+                  } @else {
+                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
+                      {{ child.label }}
+                    </a>
+                  }
+                }
+              </div>
+            }
+          </li>
+        }
+        </ul>
+      </nav>
+
+      <div class="jv-sidebar-footer">
+        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
+          @if (!collapsed()) {
+            <span>Collapse</span>
+          }
+        </button>
+
+        <div class="jv-sidebar-mobile-extras">
+          @if (showThemeSelector()) {
+            <div class="theme-group" aria-label="Theme selector">
+              @for (option of themeOptions(); track option.value) {
+                <button
+                  type="button"
+                  class="theme-pill"
+                  [class.is-active]="currentTheme() === option.value"
+                  (click)="themeChange.emit(option.value)"
+                >
+                  @if (option.icon) {
+                    <jv-icon [name]="option.icon" [size]="16" />
+                  }
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          }
+
+          <div class="mobile-actions">
+            @for (action of topbarActions(); track action.id) {
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+                <jv-icon [name]="action.icon" [size]="18" />
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </aside>
+  `, isInline: true, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
-    <aside class="jv-sidebar" [class.is-collapsed]="collapsed()" [class.is-mobile-open]="mobileOpen()">
-      <div class="jv-sidebar-brand">
-        <div class="brand-mark">
-          <jv-icon [name]="brandIcon()" [size]="18" />
-        </div>
-
-        @if (!collapsed()) {
-          <div class="brand-copy">
-            <strong>{{ title() }}</strong>
-            @if (subtitle()) {
-              <span>{{ subtitle() }}</span>
-            }
-          </div>
-        }
-      </div>
-
-      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
-        <ul class="jv-sidebar-list">
-        @for (item of normalizedItems(); track item.id) {
-          <li class="jv-sidebar-item">
-            @if (item.children.length > 0) {
-              <button
-                type="button"
-                class="jv-sidebar-link"
-                [class.is-active]="item.active"
-                [attr.aria-label]="item.label"
-                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
-                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
-                [attr.title]="item.label"
-                (click)="toggleSection(item.id)"
-              >
-                <span class="jv-sidebar-link-main">
-                  @if (item.icon) {
-                    <jv-icon [name]="item.icon" [size]="18" />
-                  }
-
-                  @if (!collapsed()) {
-                    <span>{{ item.label }}</span>
-                  }
-                </span>
-
-                @if (!collapsed()) {
-                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
-                }
-              </button>
-            } @else {
-              @if (isHashLink(item.href)) {
-                <button
-                  type="button"
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [attr.title]="item.label"
-                  (click)="navigateTo(item.href)"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </button>
-              } @else {
-                <a
-                  class="jv-sidebar-link"
-                  [class.is-active]="item.active"
-                  [attr.aria-label]="item.label"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  [routerLink]="item.href"
-                  [attr.title]="item.label"
-                >
-                  <span class="jv-sidebar-link-main">
-                    @if (item.icon) {
-                      <jv-icon [name]="item.icon" [size]="18" />
-                    }
-
-                    @if (!collapsed()) {
-                      <span>{{ item.label }}</span>
-                    }
-                  </span>
-                </a>
-              }
-            }
-
-            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
-              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
-                @for (child of item.children; track child.id) {
-                  @if (isHashLink(child.href)) {
-                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
-                      {{ child.label }}
-                    </button>
-                  } @else {
-                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label">
-                      {{ child.label }}
-                    </a>
-                  }
-                }
-              </div>
-            }
-          </li>
-        }
-        </ul>
-      </nav>
-
-      <div class="jv-sidebar-footer">
-        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
-          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
-          @if (!collapsed()) {
-            <span>Collapse</span>
-          }
-        </button>
-      </div>
-    </aside>
-  `, styles: [".jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar{width:100%;min-width:0;height:auto;max-height:100vh;border-right:0;border-bottom:1px solid var(--jv-color-border)}.jv-sidebar:not(.is-mobile-open){display:none}.jv-sidebar.is-collapsed{width:100%;min-width:0}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }] } });
+            args: [{ selector: 'jv-sidebar', standalone: true, imports: [JvIconComponent, RouterLink], template: `
+    @if (mobileOpen()) {
+      <div class="jv-sidebar-backdrop" (click)="mobileClose.emit()"></div>
+    }
+
+    <aside
+      class="jv-sidebar"
+      [class.is-collapsed]="collapsed()"
+      [class.is-mobile-open]="mobileOpen()"
+    >
+      <div class="jv-sidebar-brand">
+        <div class="brand-mark">
+          <jv-icon [name]="brandIcon()" [size]="18" />
+        </div>
+
+        @if (!collapsed()) {
+          <div class="brand-copy">
+            <strong>{{ title() }}</strong>
+            @if (subtitle()) {
+              <span>{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+
+      <nav class="jv-sidebar-nav" [attr.aria-label]="ariaLabel()">
+        <ul class="jv-sidebar-list">
+        @for (item of normalizedItems(); track item.id) {
+          <li class="jv-sidebar-item">
+            @if (item.children.length > 0) {
+              <button
+                type="button"
+                class="jv-sidebar-link"
+                [class.is-active]="item.active"
+                [attr.aria-label]="item.label"
+                [attr.aria-expanded]="isExpanded(item.id) ? 'true' : 'false'"
+                [attr.aria-controls]="'jv-sidebar-section-' + item.id"
+                [attr.title]="item.label"
+                (click)="toggleSection(item.id)"
+              >
+                <span class="jv-sidebar-link-main">
+                  @if (item.icon) {
+                    <jv-icon [name]="item.icon" [size]="18" />
+                  }
+
+                  @if (!collapsed()) {
+                    <span>{{ item.label }}</span>
+                  }
+                </span>
+
+                @if (!collapsed()) {
+                  <jv-icon [name]="isExpanded(item.id) ? 'chevron-up' : 'chevron-down'" [size]="16" />
+                }
+              </button>
+            } @else {
+              @if (isHashLink(item.href)) {
+                <button
+                  type="button"
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [attr.title]="item.label"
+                  (click)="navigateTo(item.href); mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </button>
+              } @else {
+                <a
+                  class="jv-sidebar-link"
+                  [class.is-active]="item.active"
+                  [attr.aria-label]="item.label"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  [routerLink]="item.href"
+                  [attr.title]="item.label"
+                  (click)="mobileClose.emit()"
+                >
+                  <span class="jv-sidebar-link-main">
+                    @if (item.icon) {
+                      <jv-icon [name]="item.icon" [size]="18" />
+                    }
+
+                    @if (!collapsed()) {
+                      <span>{{ item.label }}</span>
+                    }
+                  </span>
+                </a>
+              }
+            }
+
+            @if (!collapsed() && item.children.length > 0 && isExpanded(item.id)) {
+              <div class="jv-sidebar-children" [id]="'jv-sidebar-section-' + item.id">
+                @for (child of item.children; track child.id) {
+                  @if (isHashLink(child.href)) {
+                    <button type="button" class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [attr.title]="child.label" (click)="navigateTo(child.href)">
+                      {{ child.label }}
+                    </button>
+                  } @else {
+                    <a class="jv-sidebar-child-link" [class.is-active]="child.active" [attr.aria-label]="child.label" [attr.aria-current]="child.active ? 'page' : null" [routerLink]="child.href" [attr.title]="child.label" (click)="mobileClose.emit()">
+                      {{ child.label }}
+                    </a>
+                  }
+                }
+              </div>
+            }
+          </li>
+        }
+        </ul>
+      </nav>
+
+      <div class="jv-sidebar-footer">
+        <button type="button" class="jv-sidebar-toggle" (click)="collapseToggle.emit()">
+          <jv-icon [name]="collapsed() ? 'menu' : 'panel-left-close'" [size]="18" />
+          @if (!collapsed()) {
+            <span>Collapse</span>
+          }
+        </button>
+
+        <div class="jv-sidebar-mobile-extras">
+          @if (showThemeSelector()) {
+            <div class="theme-group" aria-label="Theme selector">
+              @for (option of themeOptions(); track option.value) {
+                <button
+                  type="button"
+                  class="theme-pill"
+                  [class.is-active]="currentTheme() === option.value"
+                  (click)="themeChange.emit(option.value)"
+                >
+                  @if (option.icon) {
+                    <jv-icon [name]="option.icon" [size]="16" />
+                  }
+                  <span>{{ option.label }}</span>
+                </button>
+              }
+            </div>
+          }
+
+          <div class="mobile-actions">
+            @for (action of topbarActions(); track action.id) {
+              <button type="button" class="icon-button" [attr.aria-label]="action.label" (click)="actionClick.emit(action.id); mobileClose.emit()">
+                <jv-icon [name]="action.icon" [size]="18" />
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </aside>
+  `, styles: [".jv-sidebar-backdrop{display:none}.jv-sidebar{display:grid;grid-template-rows:auto 1fr auto;gap:var(--jv-spacing-lg);width:280px;min-width:280px;height:100vh;padding:var(--jv-spacing-lg);overflow-y:auto;border-right:1px solid var(--jv-color-border);background:var(--jv-color-surface);scrollbar-width:none;-ms-overflow-style:none}.jv-sidebar::-webkit-scrollbar{width:0;height:0;display:none}.jv-sidebar.is-collapsed{width:96px;min-width:96px;padding-inline:var(--jv-spacing-md)}.jv-sidebar-footer{display:grid;gap:var(--jv-spacing-md)}.jv-sidebar-mobile-extras{display:none}.jv-sidebar-brand,.jv-sidebar-link,.jv-sidebar-toggle{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.brand-mark{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--jv-radius-md);background:color-mix(in srgb,var(--jv-color-primary) 16%,var(--jv-color-surface));color:var(--jv-color-primary)}.brand-copy{display:grid;gap:.1rem}.brand-copy span{color:var(--jv-color-foreground-muted);font-size:.875rem}.jv-sidebar-item{display:grid;gap:var(--jv-spacing-xs);list-style:none}.jv-sidebar-list{display:grid;gap:var(--jv-spacing-xs);margin:0;padding:0}.jv-sidebar-nav{display:grid;gap:var(--jv-spacing-xs);align-content:start}.jv-sidebar-link,.jv-sidebar-child-link,.jv-sidebar-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid transparent;border-radius:var(--jv-radius-md);background:transparent;color:var(--jv-color-foreground-muted);text-decoration:none;cursor:pointer}.jv-sidebar-link-main{display:inline-flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-sidebar-link:hover,.jv-sidebar-child-link:hover,.jv-sidebar-toggle:hover{background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.jv-sidebar-link.is-active,.jv-sidebar-child-link.is-active{border-color:color-mix(in srgb,var(--jv-color-primary) 25%,var(--jv-color-border));background:color-mix(in srgb,var(--jv-color-primary) 12%,var(--jv-color-surface));color:var(--jv-color-foreground)}.jv-sidebar-children{display:grid;gap:var(--jv-spacing-xs);margin-left:var(--jv-spacing-xl);padding-left:var(--jv-spacing-sm);border-left:1px solid var(--jv-color-border)}.jv-sidebar-child-link{display:flex;align-items:center;min-height:2.25rem;font-size:.9rem}.jv-sidebar-toggle{width:100%;background:var(--jv-color-surface-muted);cursor:pointer}@media(max-width:900px){.jv-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:99;background:#0006}.jv-sidebar{position:fixed;top:0;left:0;z-index:100;width:280px;min-width:280px;height:100vh;border-right:1px solid var(--jv-color-border);border-bottom:none;box-shadow:var(--jv-shadow-lg);transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.4,0,.2,1),visibility .24s}.jv-sidebar.is-mobile-open{transform:translate(0);visibility:visible}.jv-sidebar.is-collapsed{width:280px;min-width:280px}.jv-sidebar-mobile-extras{display:flex;flex-direction:column;gap:var(--jv-spacing-md);padding-top:var(--jv-spacing-md);border-top:1px solid var(--jv-color-border)}.jv-sidebar-mobile-extras .theme-group{display:flex;flex-wrap:wrap;gap:var(--jv-spacing-xs)}.jv-sidebar-mobile-extras .theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer;font:inherit}.jv-sidebar-mobile-extras .theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}.jv-sidebar-mobile-extras .mobile-actions{display:flex;gap:var(--jv-spacing-sm)}.jv-sidebar-mobile-extras .icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border:1px solid var(--jv-color-border);border-radius:999px;background:var(--jv-color-surface-muted);color:var(--jv-color-foreground);cursor:pointer}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], collapseToggle: [{ type: i0.Output, args: ["collapseToggle"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 class JvTopbarComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -20077,7 +20158,7 @@ class JvTopbarComponent {
         }
       </div>
     </header>
-  `, isInline: true, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:flex-start;flex-direction:column}.jv-topbar-end{width:100%;justify-content:flex-start}.theme-group{flex-wrap:wrap}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+  `, isInline: true, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTopbarComponent, decorators: [{
             type: Component,
@@ -20126,7 +20207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
       </div>
     </header>
-  `, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:flex-start;flex-direction:column}.jv-topbar-end{width:100%;justify-content:flex-start}.theme-group{flex-wrap:wrap}}\n"] }]
+  `, styles: [".jv-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md) var(--jv-spacing-lg);border-bottom:1px solid var(--jv-color-border);background:var(--jv-color-surface)}.jv-topbar-start,.jv-topbar-end,.theme-group{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-topbar-end{flex-wrap:wrap;justify-content:flex-end}.title-block{display:grid;gap:.1rem}.title-block span{color:var(--jv-color-foreground-muted);font-size:.875rem}.icon-button,.theme-pill{border:1px solid var(--jv-color-border);background:var(--jv-color-surface-muted);color:var(--jv-color-foreground)}.icon-button{display:inline-grid;place-items:center;width:var(--jv-density-control-height);height:var(--jv-density-control-height);border-radius:999px}.theme-pill{display:inline-flex;align-items:center;gap:var(--jv-spacing-xs);min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-md);border-radius:999px}.theme-pill.is-active{border-color:var(--jv-color-primary);background:color-mix(in srgb,var(--jv-color-primary) 14%,var(--jv-color-surface))}@media(max-width:900px){.jv-topbar{align-items:center;flex-direction:row;justify-content:flex-start}.jv-topbar-end{display:none}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
 class JvDashboardShellComponent {
@@ -20143,80 +20224,95 @@ class JvDashboardShellComponent {
     topbarActions = input([], ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
     showThemeSelector = input(true, ...(ngDevMode ? [{ debugName: "showThemeSelector" }] : /* istanbul ignore next */ []));
     menuClick = output();
+    mobileClose = output();
     sidebarCollapseToggle = output();
     themeChange = output();
     topbarActionClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
-          [currentTheme]="currentTheme()"
-          [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
-          [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
-          (themeChange)="themeChange.emit($event)"
-          (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
-
-        <main class="jv-dashboard-content">
-          <ng-content></ng-content>
-        </main>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel"], outputs: ["collapseToggle"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvDashboardShellComponent, isStandalone: true, selector: "jv-dashboard-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sidebarSubtitle: { classPropertyName: "sidebarSubtitle", publicName: "sidebarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarOpen: { classPropertyName: "mobileSidebarOpen", publicName: "mobileSidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, topbarTitle: { classPropertyName: "topbarTitle", publicName: "topbarTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarSubtitle: { classPropertyName: "topbarSubtitle", publicName: "topbarSubtitle", isSignal: true, isRequired: false, transformFunction: null }, currentTheme: { classPropertyName: "currentTheme", publicName: "currentTheme", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, showThemeSelector: { classPropertyName: "showThemeSelector", publicName: "showThemeSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick", mobileClose: "mobileClose", sidebarCollapseToggle: "sidebarCollapseToggle", themeChange: "themeChange", topbarActionClick: "topbarActionClick" }, ngImport: i0, template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
+      <jv-sidebar
+        [title]="title()"
+        [subtitle]="sidebarSubtitle()"
+        [brandIcon]="brandIcon()"
+        [items]="navItems()"
+        [collapsed]="sidebarCollapsed()"
+        [mobileOpen]="mobileSidebarOpen()"
+        [currentTheme]="currentTheme()"
+        [themeOptions]="themeOptions()"
+        [topbarActions]="topbarActions()"
+        [showThemeSelector]="showThemeSelector()"
+        (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
+        (themeChange)="themeChange.emit($event)"
+        (actionClick)="topbarActionClick.emit($event)"
+      />
+
+      <div class="jv-dashboard-main">
+        <jv-topbar
+          [title]="topbarTitle()"
+          [subtitle]="topbarSubtitle()"
+          [currentTheme]="currentTheme()"
+          [themeOptions]="themeOptions()"
+          [actions]="topbarActions()"
+          [showThemeSelector]="showThemeSelector()"
+          (menuClick)="menuClick.emit()"
+          (themeChange)="themeChange.emit($event)"
+          (actionClick)="topbarActionClick.emit($event)"
+        >
+          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+        </jv-topbar>
+
+        <main class="jv-dashboard-content">
+          <ng-content></ng-content>
+        </main>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"], dependencies: [{ kind: "component", type: JvSidebarComponent, selector: "jv-sidebar", inputs: ["title", "subtitle", "brandIcon", "items", "collapsed", "mobileOpen", "ariaLabel", "currentTheme", "themeOptions", "topbarActions", "showThemeSelector"], outputs: ["collapseToggle", "mobileClose", "themeChange", "actionClick"] }, { kind: "component", type: JvTopbarComponent, selector: "jv-topbar", inputs: ["title", "subtitle", "currentTheme", "themeOptions", "actions", "showThemeSelector"], outputs: ["menuClick", "themeChange", "actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvDashboardShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent], template: `
-    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
-      <jv-sidebar
-        [title]="title()"
-        [subtitle]="sidebarSubtitle()"
-        [brandIcon]="brandIcon()"
-        [items]="navItems()"
-        [collapsed]="sidebarCollapsed()"
-        [mobileOpen]="mobileSidebarOpen()"
-        (collapseToggle)="sidebarCollapseToggle.emit()"
-      />
-
-      <div class="jv-dashboard-main">
-        <jv-topbar
-          [title]="topbarTitle()"
-          [subtitle]="topbarSubtitle()"
-          [currentTheme]="currentTheme()"
-          [themeOptions]="themeOptions()"
-          [actions]="topbarActions()"
-          [showThemeSelector]="showThemeSelector()"
-          (menuClick)="menuClick.emit()"
-          (themeChange)="themeChange.emit($event)"
-          (actionClick)="topbarActionClick.emit($event)"
-        >
-          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
-        </jv-topbar>
-
-        <main class="jv-dashboard-content">
-          <ng-content></ng-content>
-        </main>
-      </div>
-    </div>
+            args: [{ selector: 'jv-dashboard-shell', standalone: true, imports: [JvSidebarComponent, JvTopbarComponent], template: `
+    <div class="jv-dashboard-shell" [class.is-sidebar-collapsed]="sidebarCollapsed()">
+      <jv-sidebar
+        [title]="title()"
+        [subtitle]="sidebarSubtitle()"
+        [brandIcon]="brandIcon()"
+        [items]="navItems()"
+        [collapsed]="sidebarCollapsed()"
+        [mobileOpen]="mobileSidebarOpen()"
+        [currentTheme]="currentTheme()"
+        [themeOptions]="themeOptions()"
+        [topbarActions]="topbarActions()"
+        [showThemeSelector]="showThemeSelector()"
+        (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
+        (themeChange)="themeChange.emit($event)"
+        (actionClick)="topbarActionClick.emit($event)"
+      />
+
+      <div class="jv-dashboard-main">
+        <jv-topbar
+          [title]="topbarTitle()"
+          [subtitle]="topbarSubtitle()"
+          [currentTheme]="currentTheme()"
+          [themeOptions]="themeOptions()"
+          [actions]="topbarActions()"
+          [showThemeSelector]="showThemeSelector()"
+          (menuClick)="menuClick.emit()"
+          (themeChange)="themeChange.emit($event)"
+          (actionClick)="topbarActionClick.emit($event)"
+        >
+          <ng-content select="[topbar-actions]" topbar-actions></ng-content>
+        </jv-topbar>
+
+        <main class="jv-dashboard-content">
+          <ng-content></ng-content>
+        </main>
+      </div>
+    </div>
   `, styles: [":host{display:block;height:100dvh;overflow:hidden}.jv-dashboard-shell{display:grid;height:100%;grid-template-columns:auto 1fr;background:var(--jv-color-background);overflow:hidden}.jv-dashboard-main{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;overflow:hidden}.jv-dashboard-content{overflow:auto;min-width:0;min-height:0;padding:var(--jv-spacing-xl);scrollbar-width:none;-ms-overflow-style:none}.jv-dashboard-content::-webkit-scrollbar{width:0;height:0;display:none}@media(max-width:900px){.jv-dashboard-shell{grid-template-columns:1fr}.jv-dashboard-content{padding:var(--jv-spacing-lg)}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sidebarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSubtitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }], mobileSidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarOpen", required: false }] }], topbarTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarTitle", required: false }] }], topbarSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarSubtitle", required: false }] }], currentTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentTheme", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], showThemeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSelector", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }], sidebarCollapseToggle: [{ type: i0.Output, args: ["sidebarCollapseToggle"] }], themeChange: [{ type: i0.Output, args: ["themeChange"] }], topbarActionClick: [{ type: i0.Output, args: ["topbarActionClick"] }] } });
 
 class JvPageComponent {
     eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));