@devjuliovilla/jv-ui 1.6.0 → 1.6.2

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -19735,6 +19735,7 @@ class JvSidebarComponent {
     mobileOpen = input(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     collapseToggle = output();
+    mobileClose = output();
     activeChildParentIds = computed(() => {
         const url = this.router.url;
         const ids = new Set();
@@ -19777,248 +19778,266 @@ 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 } }, outputs: { collapseToggle: "collapseToggle", mobileClose: "mobileClose" }, 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>
+    </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-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}}\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>
+    </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-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}}\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"] }], mobileClose: [{ type: i0.Output, args: ["mobileClose"] }] } });
 
 class JvTopbarComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -20143,11 +20162,12 @@ 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: `
+    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()"
@@ -20157,6 +20177,7 @@ class JvDashboardShellComponent {
         [collapsed]="sidebarCollapsed()"
         [mobileOpen]="mobileSidebarOpen()"
         (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
       />
 
       <div class="jv-dashboard-main">
@@ -20179,7 +20200,7 @@ class JvDashboardShellComponent {
         </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"] }] });
+  `, 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", "mobileClose"] }, { 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,
@@ -20193,6 +20214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [collapsed]="sidebarCollapsed()"
         [mobileOpen]="mobileSidebarOpen()"
         (collapseToggle)="sidebarCollapseToggle.emit()"
+        (mobileClose)="mobileClose.emit()"
       />
 
       <div class="jv-dashboard-main">
@@ -20216,7 +20238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </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 */ []));
@@ -20292,29 +20314,29 @@ class JvListComponent {
         return v ? `jv-list--${v}` : '';
     }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="role() === 'navigation' ? 'list' : null"
-      [attr.aria-label]="ariaLabel()"
-    >
-      <ng-content />
-    </ul>
-  `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-list--bordered>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="role() === 'navigation' ? 'list' : null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-list', standalone: true, template: `
-    <ul
-      class="jv-list"
-      [class]="variantClass()"
-      [attr.role]="role() === 'navigation' ? 'list' : null"
-      [attr.aria-label]="ariaLabel()"
-    >
-      <ng-content />
-    </ul>
-  `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-list--bordered>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}\n"] }]
+            args: [{ selector: 'jv-list', standalone: true, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="role() === 'navigation' ? 'list' : null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] }]
         }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class JvListItemComponent {
@@ -20330,58 +20352,58 @@ class JvListItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvListItemComponent, isStandalone: true, selector: "jv-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: `
-    <li
-      class="jv-list-item"
-      [class.jv-list-item--disabled]="disabled()"
-      [class.jv-list-item--active]="active()"
-      tabindex="0"
-      role="listitem"
-      (click)="onActivate()"
-      (keydown.enter)="onActivate()"
-      (keydown.space)="onActivate(); $event.preventDefault()"
-    >
-      @if (leadingIcon()) {
-        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
-      }
-      <div class="jv-list-item-text">
-        <span class="jv-list-item-title">{{ title() }}</span>
-        @if (description()) {
-          <span class="jv-list-item-description">{{ description() }}</span>
-        }
-      </div>
-      <div class="jv-list-item-meta">
-        <ng-content select="[meta]" />
-      </div>
-    </li>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvListItemComponent, isStandalone: true, selector: "jv-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: `
+    <li
+      class="jv-list-item"
+      [class.jv-list-item--disabled]="disabled()"
+      [class.jv-list-item--active]="active()"
+      tabindex="0"
+      role="listitem"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate(); $event.preventDefault()"
+    >
+      @if (leadingIcon()) {
+        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
+      }
+      <div class="jv-list-item-text">
+        <span class="jv-list-item-title">{{ title() }}</span>
+        @if (description()) {
+          <span class="jv-list-item-description">{{ description() }}</span>
+        }
+      </div>
+      <div class="jv-list-item-meta">
+        <ng-content select="[meta]" />
+      </div>
+    </li>
   `, isInline: true, styles: [":host{display:block}.jv-list-item{display:flex;align-items:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:default;outline:none;transition:background-color .16s ease}.jv-list-item:hover{background:var(--jv-color-surface-muted)}.jv-list-item:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.jv-list-item--active{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));border-left:3px solid var(--jv-color-primary);padding-left:calc(var(--jv-spacing-md) - 3px)}.jv-list-item-text{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.jv-list-item-title{font-weight:600;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-description{font-size:.85rem;color:var(--jv-color-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-meta{display:flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-list-item-leading{flex-shrink:0;color:var(--jv-color-foreground-muted)}\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: JvListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-list-item', standalone: true, imports: [JvIconComponent], template: `
-    <li
-      class="jv-list-item"
-      [class.jv-list-item--disabled]="disabled()"
-      [class.jv-list-item--active]="active()"
-      tabindex="0"
-      role="listitem"
-      (click)="onActivate()"
-      (keydown.enter)="onActivate()"
-      (keydown.space)="onActivate(); $event.preventDefault()"
-    >
-      @if (leadingIcon()) {
-        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
-      }
-      <div class="jv-list-item-text">
-        <span class="jv-list-item-title">{{ title() }}</span>
-        @if (description()) {
-          <span class="jv-list-item-description">{{ description() }}</span>
-        }
-      </div>
-      <div class="jv-list-item-meta">
-        <ng-content select="[meta]" />
-      </div>
-    </li>
+            args: [{ selector: 'jv-list-item', standalone: true, imports: [JvIconComponent], template: `
+    <li
+      class="jv-list-item"
+      [class.jv-list-item--disabled]="disabled()"
+      [class.jv-list-item--active]="active()"
+      tabindex="0"
+      role="listitem"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate(); $event.preventDefault()"
+    >
+      @if (leadingIcon()) {
+        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
+      }
+      <div class="jv-list-item-text">
+        <span class="jv-list-item-title">{{ title() }}</span>
+        @if (description()) {
+          <span class="jv-list-item-description">{{ description() }}</span>
+        }
+      </div>
+      <div class="jv-list-item-meta">
+        <ng-content select="[meta]" />
+      </div>
+    </li>
   `, styles: [":host{display:block}.jv-list-item{display:flex;align-items:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:default;outline:none;transition:background-color .16s ease}.jv-list-item:hover{background:var(--jv-color-surface-muted)}.jv-list-item:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.jv-list-item--active{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));border-left:3px solid var(--jv-color-primary);padding-left:calc(var(--jv-spacing-md) - 3px)}.jv-list-item-text{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.jv-list-item-title{font-weight:600;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-description{font-size:.85rem;color:var(--jv-color-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-meta{display:flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-list-item-leading{flex-shrink:0;color:var(--jv-color-foreground-muted)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });