ng-hub-ui-nav 22.2.0 → 22.4.0

package/README.md

@@ -68,6 +68,7 @@ This library is part of the **ng-hub-ui** ecosystem:
 - Router-aware active states with fragment and query param support.
 - Scroll-spy helpers for documentation pages and one-page layouts.
 - Sticky vertical navigation support.
+- **Tooltip on truncated labels** — long item labels are clipped with an ellipsis (the standard sidebar behaviour) and reveal their full text on hover, automatically and only when truncated (via `ng-hub-ui-utils`' `[hubOverflowTooltip]`). The tooltip is **agnostic** — it defaults to the hub-ui tooltip but is swappable with `provideHubTooltip(...)`. Requires `ng-hub-ui-utils >= 22.6.0` and the tooltip styles (`@use 'ng-hub-ui-utils/styles/tooltip';`). Tip: control the sidebar width with `--hub-nav-panel-width`.
 - Semantic `variant` accent system (`primary` / `success` / `danger` / `warning` / `info`, plus any custom accent) recolouring the hover/active affordances — mirrors `<hub-panels>`.
 - Full CSS variable theming via `--hub-nav-*` tokens.
 

package/fesm2022/ng-hub-ui-nav.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, Injectable, computed, inject, TemplateRef, Directive, input, ElementRef, output, NgZone, effect, ChangeDetectionStrategy, Component, ViewContainerRef, viewChildren, HostListener, contentChild } from '@angular/core';
+import { InjectionToken, signal, Injectable, computed, inject, TemplateRef, Directive, input, ElementRef, output, NgZone, PLATFORM_ID, effect, ChangeDetectionStrategy, Component, ViewContainerRef, viewChildren, HostListener, contentChild } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { RouterLink, Router, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs';
-import { NgTemplateOutlet } from '@angular/common';
-import { OverlayService } from 'ng-hub-ui-utils';
+import { HubOverflowTooltipDirective, OverlayService } from 'ng-hub-ui-utils';
 
 /**
  * Default configuration values for the `hub-nav` component.
@@ -682,6 +682,8 @@ class HubNavScrollSpyDirective {
     activeSectionChange = output();
     el = inject((ElementRef));
     zone = inject(NgZone);
+    /** Section tracking relies on browser-only APIs (rAF, IntersectionObserver); inert on the server. */
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     observer = null;
     activeId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
@@ -737,6 +739,9 @@ class HubNavScrollSpyDirective {
         return true;
     }
     scheduleInit() {
+        if (!this.isBrowser) {
+            return;
+        }
         this.zone.runOutsideAngular(() => {
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
@@ -959,11 +964,11 @@ class HubNavItemComponent {
         this.toggleDropdown.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1.25rem);height:var(--hub-nav-icon-size, 1.25rem);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:transform var(--hub-nav-item-transition, .15s ease);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: HubOverflowTooltipDirective, selector: "[hubOverflowTooltip]", inputs: ["hubOverflowTooltip", "placement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-nav-item', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'hub-nav-item', standalone: true, imports: [NgTemplateOutlet, RouterLink, HubOverflowTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'hub-nav-item',
                         '[class.hub-nav-item--active]': 'isActive()',
                         '[class.hub-nav-item--disabled]': 'item().disabled',
@@ -972,7 +977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[class.hub-nav-item--header]': 'isHeader()',
                         '[attr.data-item-id]': 'item().id',
                         role: 'none'
-                    }, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1.25rem);height:var(--hub-nav-icon-size, 1.25rem);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:transform var(--hub-nav-item-transition, .15s ease);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"] }]
+                    }, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], toggleDropdown: [{ type: i0.Output, args: ["toggleDropdown"] }] } });
 
 /**
@@ -1726,7 +1731,7 @@ class HubNavPanelComponent {
         return !!owningList && owningList === directList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavPanelComponent, isStandalone: true, selector: "hub-nav-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", backClick: "backClick", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { attributes: { "role": "navigation", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-panel--drill-down": "panel().isDrillDown", "style.width": "panelWidth()", "attr.aria-label": "ariaLabel()" }, classAttribute: "hub-nav-panel" }, ngImport: i0, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavPanelComponent, isStandalone: true, selector: "hub-nav-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", backClick: "backClick", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { attributes: { "role": "navigation", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-panel--drill-down": "panel().isDrillDown", "style.width": "panelWidth()", "attr.aria-label": "ariaLabel()" }, classAttribute: "hub-nav-panel" }, ngImport: i0, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavPanelComponent, decorators: [{
             type: Component,
@@ -1737,7 +1742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
                         tabindex: '-1'
-                    }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
+                    }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-zindex, 1000);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:var(--hub-ref-font-size-lg, 1.25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
         }], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: true }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], backClick: [{ type: i0.Output, args: ["backClick"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -1935,7 +1940,7 @@ class HubNavMobilePanelComponent {
         this.dropdownToggle.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavMobilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavMobilePanelComponent, isStandalone: true, selector: "hub-nav-mobile-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offcanvasPosition: { classPropertyName: "offcanvasPosition", publicName: "offcanvasPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { properties: { "class.hub-nav-mobile-panel--open": "isOpen()", "class.hub-nav-mobile-panel--offcanvas": "mode() === \"offcanvas\"", "class.hub-nav-mobile-panel--dropdown": "mode() === \"dropdown\"", "class.hub-nav-mobile-panel--fullscreen": "mode() === \"fullscreen\"", "class.hub-nav-mobile-panel--start": "offcanvasPosition() === \"start\"", "class.hub-nav-mobile-panel--end": "offcanvasPosition() === \"end\"", "class.hub-nav-mobile-panel--top": "offcanvasPosition() === \"top\"", "class.hub-nav-mobile-panel--bottom": "offcanvasPosition() === \"bottom\"" }, classAttribute: "hub-nav-mobile-panel" }, ngImport: i0, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:transform var(--hub-nav-mobile-transition, .3s ease);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavMobilePanelComponent, isStandalone: true, selector: "hub-nav-mobile-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offcanvasPosition: { classPropertyName: "offcanvasPosition", publicName: "offcanvasPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { properties: { "class.hub-nav-mobile-panel--open": "isOpen()", "class.hub-nav-mobile-panel--offcanvas": "mode() === \"offcanvas\"", "class.hub-nav-mobile-panel--dropdown": "mode() === \"dropdown\"", "class.hub-nav-mobile-panel--fullscreen": "mode() === \"fullscreen\"", "class.hub-nav-mobile-panel--start": "offcanvasPosition() === \"start\"", "class.hub-nav-mobile-panel--end": "offcanvasPosition() === \"end\"", "class.hub-nav-mobile-panel--top": "offcanvasPosition() === \"top\"", "class.hub-nav-mobile-panel--bottom": "offcanvasPosition() === \"bottom\"" }, classAttribute: "hub-nav-mobile-panel" }, ngImport: i0, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavMobilePanelComponent, decorators: [{
             type: Component,
@@ -1949,7 +1954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[class.hub-nav-mobile-panel--end]': 'offcanvasPosition() === "end"',
                         '[class.hub-nav-mobile-panel--top]': 'offcanvasPosition() === "top"',
                         '[class.hub-nav-mobile-panel--bottom]': 'offcanvasPosition() === "bottom"'
-                    }, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:transform var(--hub-nav-mobile-transition, .3s ease);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"] }]
+                    }, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offcanvasPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "offcanvasPosition", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }] } });
 
 let hubNavOverlayOwnerCounter = 0;
@@ -2502,7 +2507,7 @@ class HubNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "attr.data-variant": "variant() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "resolvedOrientation() === \"vertical\" ? \"100%\" : null", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 14%, var(--hub-sys-surface-page, #fff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, .15s ease);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, .3s ease);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: var(--hub-sys-transition-collapse, .35s ease);--hub-nav-icon-size: var(--hub-ref-icon-size, 1.25rem);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: transform var(--hub-sys-transition-base, .3s ease);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 14%, var(--hub-sys-surface-page, #fff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "attr.data-variant": "variant() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "resolvedOrientation() === \"vertical\" ? \"100%\" : null", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavComponent, decorators: [{
             type: Component,
@@ -2528,7 +2533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[style.--hub-nav-sticky-top]': 'resolvedConfig().stickyTop',
                         '[style.display]': 'resolvedOrientation() === "vertical" ? "flex" : null',
                         '[style.flex-direction]': 'resolvedOrientation() === "vertical" ? "column" : null'
-                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 14%, var(--hub-sys-surface-page, #fff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, .15s ease);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, .3s ease);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: var(--hub-sys-transition-collapse, .35s ease);--hub-nav-icon-size: var(--hub-ref-icon-size, 1.25rem);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: transform var(--hub-sys-transition-base, .3s ease);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 14%, var(--hub-sys-surface-page, #fff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
+                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], navClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navClass", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], startDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavStartDirective), { isSignal: true }] }], endDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavEndDirective), { isSignal: true }] }], itemTemplateDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavItemTemplateDirective), { isSignal: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownOpen: [{ type: i0.Output, args: ["dropdownOpen"] }], dropdownClose: [{ type: i0.Output, args: ["dropdownClose"] }], mobileToggle: [{ type: i0.Output, args: ["mobileToggle"] }], panelChange: [{ type: i0.Output, args: ["panelChange"] }] } });
 
 /*