ng-hub-ui-nav 22.12.0 → 22.13.0

package/README.md

@@ -8,7 +8,7 @@
 A flexible, accessible, and highly customizable navigation component for Angular 21+. It supports horizontal menus, vertical sidebars, mobile collapse modes, stacked drill-down panels, projected start/end slots, and scroll-spy integration.
 
 > [!IMPORTANT]
-> Version `22.12.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
+> Version `22.13.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
 
 ## Documentation and Live Examples
 
@@ -306,6 +306,21 @@ The hover/active affordances and the nav surface all derive from one accent hook
 }
 ```
 
+### Paint the bar with a gradient
+
+The fill is a colour and an image on two separate properties, so a gradient goes on
+`--hub-nav-bg-image` and never on `--hub-nav-bg`. That is not a style preference: a gradient is an
+`<image>`, so a `var()` holding one substituted into `background-color` computes to an invalid
+value and the whole declaration is dropped — the bar would come out with no fill at all rather than
+falling back to the colour. Kept apart, `--hub-nav-bg` stays underneath as the fallback.
+
+```css
+.my-sidebar {
+	--hub-nav-bg: #4c1d95;
+	--hub-nav-bg-image: linear-gradient(180deg, #6d28d9, #4c1d95);
+}
+```
+
 ### Restore the legacy solid-fill look
 
 The default active item is now a soft accent tint + accent text. To restore the previous solid accent fill + white text (the pre-`22.1.0` look), override these tokens explicitly:

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, signal, Injectable, inject, computed, TemplateRef, Directive, input, ElementRef, output, NgZone, PLATFORM_ID, effect, ChangeDetectionStrategy, Component, ViewContainerRef, viewChildren, model, contentChild, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { HubTranslationService, HubOverflowTooltipDirective, TooltipDirective, OverlayService, resolveHubAccent } from 'ng-hub-ui-utils';
+import { HubTranslationService, HubOverflowTooltipDirective, HubTooltipDirective, OverlayService, resolveHubAccent } from 'ng-hub-ui-utils';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { RouterLink, Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs';
@@ -1349,11 +1349,11 @@ class HubNavItemComponent {
         this.toggleDropdown.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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]=\"caretAriaLabel()\"\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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.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%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\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", "hubOverflowTooltipMeasure"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "placement", "delay", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[hubTooltip]=\"railTooltip()\"\n\t\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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]=\"caretAriaLabel()\"\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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.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%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\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", "hubOverflowTooltipMeasure"] }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-nav-item', standalone: true, imports: [NgTemplateOutlet, RouterLink, HubOverflowTooltipDirective, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'hub-nav-item', standalone: true, imports: [NgTemplateOutlet, RouterLink, HubOverflowTooltipDirective, HubTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'hub-nav-item',
                         '[class.hub-nav-item--active]': 'isActive()',
                         '[class.hub-nav-item--disabled]': 'item().disabled',
@@ -1362,7 +1362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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]=\"caretAriaLabel()\"\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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.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%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[hubTooltip]=\"railTooltip()\"\n\t\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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]=\"caretAriaLabel()\"\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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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[hubTooltip]=\"railTooltip()\"\n\t\t[hubTooltipPlacement]=\"railTooltipPlacement()\"\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} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</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)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.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%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\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"] }] } });
 
 /**
@@ -3367,7 +3367,7 @@ class HubNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, rail: { classPropertyName: "rail", publicName: "rail", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rail: "railChange", 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--rail": "isRailActive()", "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\"", "class.hub-nav--has-panels": "hasPanels()", "attr.data-variant": "color() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "hostWidth()", "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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler [isOpen]=\"isMobileOpen()\" (toggle)=\"onMobileToggle()\" />\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t[startTemplate]=\"startTemplate()\"\n\t\t\t[endTemplate]=\"endTemplate()\"\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: ["@charset \"UTF-8\";: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-border-radius: 0;--hub-nav-box-shadow: none;--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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--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);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);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;justify-content:var(--hub-nav-collapsed-justify, space-between);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;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}: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:1 1 auto;width:100%;min-width:0}: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--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-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--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--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}: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", "itemTemplate", "startTemplate", "endTemplate"], 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"] }, { kind: "component", type: HubNavRailToggleComponent, selector: "hub-nav-rail-toggle", outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, rail: { classPropertyName: "rail", publicName: "rail", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rail: "railChange", 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--rail": "isRailActive()", "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\"", "class.hub-nav--has-panels": "hasPanels()", "attr.data-variant": "color() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "hostWidth()", "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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler [isOpen]=\"isMobileOpen()\" (toggle)=\"onMobileToggle()\" />\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t[startTemplate]=\"startTemplate()\"\n\t\t\t[endTemplate]=\"endTemplate()\"\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: ["@charset \"UTF-8\";: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-border-radius: 0;--hub-nav-box-shadow: none;--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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--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);background-image:var(--hub-nav-bg-image, none);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);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);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;justify-content:var(--hub-nav-collapsed-justify, space-between);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;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}: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:1 1 auto;width:100%;min-width:0}: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--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-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--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--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}: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", "itemTemplate", "startTemplate", "endTemplate"], 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"] }, { kind: "component", type: HubNavRailToggleComponent, selector: "hub-nav-rail-toggle", outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavComponent, decorators: [{
             type: Component,
@@ -3396,7 +3396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler [isOpen]=\"isMobileOpen()\" (toggle)=\"onMobileToggle()\" />\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t[startTemplate]=\"startTemplate()\"\n\t\t\t[endTemplate]=\"endTemplate()\"\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: ["@charset \"UTF-8\";: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-border-radius: 0;--hub-nav-box-shadow: none;--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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--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);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);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;justify-content:var(--hub-nav-collapsed-justify, space-between);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;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}: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:1 1 auto;width:100%;min-width:0}: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--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-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--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--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}: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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler [isOpen]=\"isMobileOpen()\" (toggle)=\"onMobileToggle()\" />\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\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 [ngTemplateOutlet]=\"startTemplate()!\" [ngTemplateOutletContext]=\"startContext()\" />\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\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 [ngTemplateOutlet]=\"endTemplate()!\" [ngTemplateOutletContext]=\"endContext()\" />\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[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t[startTemplate]=\"startTemplate()\"\n\t\t\t[endTemplate]=\"endTemplate()\"\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: ["@charset \"UTF-8\";: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-border-radius: 0;--hub-nav-box-shadow: none;--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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--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);background-image:var(--hub-nav-bg-image, none);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);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);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;justify-content:var(--hub-nav-collapsed-justify, space-between);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;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}: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:1 1 auto;width:100%;min-width:0}: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--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-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--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--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}: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 }] }], rail: [{ type: i0.Input, args: [{ isSignal: true, alias: "rail", required: false }] }, { type: i0.Output, args: ["railChange"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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"] }] } });
 
 /*