ng-hub-ui-nav 22.6.0 → 22.7.2

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

@@ -1575,7 +1575,7 @@ class HubNavItemListComponent {
         return document.querySelector(`hub-nav-item[data-item-id="${escapedId}"] .hub-nav-item__dropdown-toggle, hub-nav-item[data-item-id="${escapedId}"] .hub-nav-item__link`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavItemListComponent, isStandalone: true, selector: "hub-nav-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", 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 }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-item-list--force-accordion": "forceAccordionMode()", "attr.role": "depth() === 0 ? \"menubar\" : \"menu\"" }, classAttribute: "hub-nav-item-list" }, viewQueries: [{ propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true, isSignal: true }, { propertyName: "overlayTemplates", predicate: ["overlayDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of items(); track item.id) {\n\t@if (item.type === 'separator') {\n\t\t<hub-nav-separator />\n\t} @else {\n\t\t<div\n\t\t\t#itemWrapper\n\t\t\tclass=\"hub-nav-item-wrapper\"\n\t\t\t[class.hub-nav-item-wrapper--has-dropdown]=\"hasChildren(item)\"\n\t\t\t(mouseenter)=\"onItemMouseEnter(item)\"\n\t\t\t(mouseleave)=\"onItemMouseLeave(item)\"\n\t\t>\n\t\t\t<hub-nav-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\t[depth]=\"depth()\"\n\t\t\t\t[isActive]=\"isItemActive(item)\"\n\t\t\t\t[isExpanded]=\"isExpanded(item)\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t(clicked)=\"onItemClick($event)\"\n\t\t\t\t(toggleDropdown)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\n\t\t\t<ng-template #overlayDropdownTemplate>\n\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t[items]=\"item.children ?? []\"\n\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel' && !shouldRenderDropdownInOverlay(item)) {\n\t\t\t\t@if (getItemExpandMode(item) === 'accordion') {\n\t\t\t\t\t<!-- Accordion: children expand inline with indentation -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-nav-accordion\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t[style.padding-left]=\"'var(--hub-nav-accordion-indent, 1rem)'\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);list-style:none;margin:0;padding:0}.hub-nav-item-wrapper{position:relative}.hub-nav-dropdown{position:absolute;z-index:var(--hub-nav-dropdown-zindex, 1000);min-width:var(--hub-nav-dropdown-min-width, 12rem);background-color:var(--hub-nav-dropdown-bg, #fff);color:var(--hub-nav-dropdown-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-dropdown-border-color, #dee2e6);border-radius:var(--hub-nav-dropdown-border-radius, .25rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavItemComponent, selector: "hub-nav-item", inputs: ["item", "depth", "isActive", "isExpanded", "itemTemplate", "forceAccordionMode"], outputs: ["clicked", "toggleDropdown"] }, { kind: "component", type: HubNavSeparatorComponent, selector: "hub-nav-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavItemListComponent, isStandalone: true, selector: "hub-nav-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", 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 }, dropdownRenderMode: { classPropertyName: "dropdownRenderMode", publicName: "dropdownRenderMode", isSignal: true, isRequired: false, transformFunction: null }, overlayOwnerClass: { classPropertyName: "overlayOwnerClass", publicName: "overlayOwnerClass", isSignal: true, isRequired: false, transformFunction: null }, overlayOrientationClass: { classPropertyName: "overlayOrientationClass", publicName: "overlayOrientationClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-item-list--force-accordion": "forceAccordionMode()", "attr.role": "depth() === 0 ? \"menubar\" : \"menu\"", "attr.aria-orientation": "depth() === 0 ? (state.orientation() === \"vertical\" ? \"vertical\" : \"horizontal\") : \"vertical\"" }, classAttribute: "hub-nav-item-list" }, viewQueries: [{ propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true, isSignal: true }, { propertyName: "overlayTemplates", predicate: ["overlayDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (item of items(); track item.id) {\n\t@if (item.type === 'separator') {\n\t\t<hub-nav-separator />\n\t} @else {\n\t\t<div\n\t\t\t#itemWrapper\n\t\t\tclass=\"hub-nav-item-wrapper\"\n\t\t\t[class.hub-nav-item-wrapper--has-dropdown]=\"hasChildren(item)\"\n\t\t\t(mouseenter)=\"onItemMouseEnter(item)\"\n\t\t\t(mouseleave)=\"onItemMouseLeave(item)\"\n\t\t>\n\t\t\t<hub-nav-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\t[depth]=\"depth()\"\n\t\t\t\t[isActive]=\"isItemActive(item)\"\n\t\t\t\t[isExpanded]=\"isExpanded(item)\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t(clicked)=\"onItemClick($event)\"\n\t\t\t\t(toggleDropdown)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\n\t\t\t<ng-template #overlayDropdownTemplate>\n\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\" aria-orientation=\"vertical\">\n\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t[items]=\"item.children ?? []\"\n\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel' && !shouldRenderDropdownInOverlay(item)) {\n\t\t\t\t@if (getItemExpandMode(item) === 'accordion') {\n\t\t\t\t\t<!-- Accordion: children expand inline with indentation -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-nav-accordion\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t[style.padding-left]=\"'var(--hub-nav-accordion-indent, 1rem)'\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);list-style:none;margin:0;padding:0}.hub-nav-item-wrapper{position:relative}.hub-nav-dropdown{position:absolute;z-index:var(--hub-nav-dropdown-zindex, 1000);min-width:var(--hub-nav-dropdown-min-width, 12rem);background-color:var(--hub-nav-dropdown-bg, #fff);color:var(--hub-nav-dropdown-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-dropdown-border-color, #dee2e6);border-radius:var(--hub-nav-dropdown-border-radius, .25rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavItemComponent, selector: "hub-nav-item", inputs: ["item", "depth", "isActive", "isExpanded", "itemTemplate", "forceAccordionMode"], outputs: ["clicked", "toggleDropdown"] }, { kind: "component", type: HubNavSeparatorComponent, selector: "hub-nav-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavItemListComponent, decorators: [{
             type: Component,
@@ -1583,8 +1583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         class: 'hub-nav-item-list',
                         '[class.hub-nav-item-list--force-accordion]': 'forceAccordionMode()',
                         '[attr.role]': 'depth() === 0 ? "menubar" : "menu"',
+                        // menubar defaults to horizontal per WAI-ARIA; a vertical sidebar must say so.
+                        // Submenus (depth > 0) always stack vertically.
+                        '[attr.aria-orientation]': 'depth() === 0 ? (state.orientation() === "vertical" ? "vertical" : "horizontal") : "vertical"',
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "@for (item of items(); track item.id) {\n\t@if (item.type === 'separator') {\n\t\t<hub-nav-separator />\n\t} @else {\n\t\t<div\n\t\t\t#itemWrapper\n\t\t\tclass=\"hub-nav-item-wrapper\"\n\t\t\t[class.hub-nav-item-wrapper--has-dropdown]=\"hasChildren(item)\"\n\t\t\t(mouseenter)=\"onItemMouseEnter(item)\"\n\t\t\t(mouseleave)=\"onItemMouseLeave(item)\"\n\t\t>\n\t\t\t<hub-nav-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\t[depth]=\"depth()\"\n\t\t\t\t[isActive]=\"isItemActive(item)\"\n\t\t\t\t[isExpanded]=\"isExpanded(item)\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t(clicked)=\"onItemClick($event)\"\n\t\t\t\t(toggleDropdown)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\n\t\t\t<ng-template #overlayDropdownTemplate>\n\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t[items]=\"item.children ?? []\"\n\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel' && !shouldRenderDropdownInOverlay(item)) {\n\t\t\t\t@if (getItemExpandMode(item) === 'accordion') {\n\t\t\t\t\t<!-- Accordion: children expand inline with indentation -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-nav-accordion\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t[style.padding-left]=\"'var(--hub-nav-accordion-indent, 1rem)'\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);list-style:none;margin:0;padding:0}.hub-nav-item-wrapper{position:relative}.hub-nav-dropdown{position:absolute;z-index:var(--hub-nav-dropdown-zindex, 1000);min-width:var(--hub-nav-dropdown-min-width, 12rem);background-color:var(--hub-nav-dropdown-bg, #fff);color:var(--hub-nav-dropdown-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-dropdown-border-color, #dee2e6);border-radius:var(--hub-nav-dropdown-border-radius, .25rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"] }]
+                    }, template: "@for (item of items(); track item.id) {\n\t@if (item.type === 'separator') {\n\t\t<hub-nav-separator />\n\t} @else {\n\t\t<div\n\t\t\t#itemWrapper\n\t\t\tclass=\"hub-nav-item-wrapper\"\n\t\t\t[class.hub-nav-item-wrapper--has-dropdown]=\"hasChildren(item)\"\n\t\t\t(mouseenter)=\"onItemMouseEnter(item)\"\n\t\t\t(mouseleave)=\"onItemMouseLeave(item)\"\n\t\t>\n\t\t\t<hub-nav-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\t[depth]=\"depth()\"\n\t\t\t\t[isActive]=\"isItemActive(item)\"\n\t\t\t\t[isExpanded]=\"isExpanded(item)\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t(clicked)=\"onItemClick($event)\"\n\t\t\t\t(toggleDropdown)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\n\t\t\t<ng-template #overlayDropdownTemplate>\n\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\" aria-orientation=\"vertical\">\n\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t[items]=\"item.children ?? []\"\n\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel' && !shouldRenderDropdownInOverlay(item)) {\n\t\t\t\t@if (getItemExpandMode(item) === 'accordion') {\n\t\t\t\t\t<!-- Accordion: children expand inline with indentation -->\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-nav-accordion\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t[style.padding-left]=\"'var(--hub-nav-accordion-indent, 1rem)'\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass()\"\n\t\t\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);list-style:none;margin:0;padding:0}.hub-nav-item-wrapper{position:relative}.hub-nav-dropdown{position:absolute;z-index:var(--hub-nav-dropdown-zindex, 1000);min-width:var(--hub-nav-dropdown-min-width, 12rem);background-color:var(--hub-nav-dropdown-bg, #fff);color:var(--hub-nav-dropdown-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-dropdown-border-color, #dee2e6);border-radius:var(--hub-nav-dropdown-border-radius, .25rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], dropdownRenderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownRenderMode", required: false }] }], overlayOwnerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOwnerClass", required: false }] }], overlayOrientationClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOrientationClass", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], itemWrappers: [{ type: i0.ViewChildren, args: ['itemWrapper', { isSignal: true }] }], overlayTemplates: [{ type: i0.ViewChildren, args: ['overlayDropdownTemplate', { isSignal: true }] }] } });
 
 /**
@@ -1896,6 +1899,33 @@ class HubNavMobilePanelComponent {
     /** Offcanvas slide-in direction. */
     offcanvasPosition = input('start', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "offcanvasPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional custom template for rendering item content, forwarded from the
+     * host `HubNavComponent` so the mobile panel renders items identically to
+     * the desktop nav (icons, badges, custom markup via `hubNavItemTemplate`).
+     */
+    itemTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional start-slot template (`hubNavStart`), forwarded from the host so
+     * the drawer shows the same brand/header block as the desktop nav.
+     */
+    startTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional end-slot template (`hubNavEnd`), forwarded from the host so the
+     * drawer shows the same footer block as the desktop nav.
+     */
+    endTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Slot context for the start/end templates rendered inside the drawer. The
+     * drawer is always the collapsed presentation, but `inDrawer` lets consumers
+     * tell the offcanvas drawer apart from the slim collapsed top bar (which also
+     * receives `collapsed: true`) — e.g. to show a full header/footer in the
+     * drawer while the top bar keeps just a brand + toggler.
+     */
+    slotContext = { collapsed: true, inDrawer: true };
     /** Emitted when the close button or backdrop is clicked. */
     closePanel = output();
     /** Emitted when an item is clicked. */
@@ -1936,11 +1966,11 @@ class HubNavMobilePanelComponent {
         this.dropdownToggle.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavMobilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavMobilePanelComponent, isStandalone: true, selector: "hub-nav-mobile-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offcanvasPosition: { classPropertyName: "offcanvasPosition", publicName: "offcanvasPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { properties: { "class.hub-nav-mobile-panel--open": "isOpen()", "class.hub-nav-mobile-panel--offcanvas": "mode() === \"offcanvas\"", "class.hub-nav-mobile-panel--dropdown": "mode() === \"dropdown\"", "class.hub-nav-mobile-panel--fullscreen": "mode() === \"fullscreen\"", "class.hub-nav-mobile-panel--start": "offcanvasPosition() === \"start\"", "class.hub-nav-mobile-panel--end": "offcanvasPosition() === \"end\"", "class.hub-nav-mobile-panel--top": "offcanvasPosition() === \"top\"", "class.hub-nav-mobile-panel--bottom": "offcanvasPosition() === \"bottom\"" }, classAttribute: "hub-nav-mobile-panel" }, ngImport: i0, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavMobilePanelComponent, isStandalone: true, selector: "hub-nav-mobile-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offcanvasPosition: { classPropertyName: "offcanvasPosition", publicName: "offcanvasPosition", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, startTemplate: { classPropertyName: "startTemplate", publicName: "startTemplate", isSignal: true, isRequired: false, transformFunction: null }, endTemplate: { classPropertyName: "endTemplate", publicName: "endTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { properties: { "class.hub-nav-mobile-panel--open": "isOpen()", "class.hub-nav-mobile-panel--offcanvas": "mode() === \"offcanvas\"", "class.hub-nav-mobile-panel--dropdown": "mode() === \"dropdown\"", "class.hub-nav-mobile-panel--fullscreen": "mode() === \"fullscreen\"", "class.hub-nav-mobile-panel--start": "offcanvasPosition() === \"start\"", "class.hub-nav-mobile-panel--end": "offcanvasPosition() === \"end\"", "class.hub-nav-mobile-panel--top": "offcanvasPosition() === \"top\"", "class.hub-nav-mobile-panel--bottom": "offcanvasPosition() === \"bottom\"" }, classAttribute: "hub-nav-mobile-panel" }, ngImport: i0, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Start slot (brand / header) \u2014 mirrors the desktop nav -->\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start hub-nav-mobile-panel__start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"slotContext\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<!-- End slot (footer) \u2014 anchored to the bottom, mirrors the desktop nav -->\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end hub-nav-mobile-panel__end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"slotContext\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"], dependencies: [{ kind: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavMobilePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-nav-mobile-panel', standalone: true, imports: [HubNavItemListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'hub-nav-mobile-panel', standalone: true, imports: [NgTemplateOutlet, HubNavItemListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'hub-nav-mobile-panel',
                         '[class.hub-nav-mobile-panel--open]': 'isOpen()',
                         '[class.hub-nav-mobile-panel--offcanvas]': 'mode() === "offcanvas"',
@@ -1950,8 +1980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[class.hub-nav-mobile-panel--end]': 'offcanvasPosition() === "end"',
                         '[class.hub-nav-mobile-panel--top]': 'offcanvasPosition() === "top"',
                         '[class.hub-nav-mobile-panel--bottom]': 'offcanvasPosition() === "bottom"'
-                    }, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offcanvasPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "offcanvasPosition", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }] } });
+                    }, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Start slot (brand / header) \u2014 mirrors the desktop nav -->\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start hub-nav-mobile-panel__start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"slotContext\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<!-- End slot (footer) \u2014 anchored to the bottom, mirrors the desktop nav -->\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end hub-nav-mobile-panel__end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"slotContext\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-zindex, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-zindex, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #f8f9fa));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:var(--hub-nav-mobile-transition, all .2s ease-in-out);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offcanvasPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "offcanvasPosition", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], startTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTemplate", required: false }] }], endTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTemplate", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }] } });
 
 let hubNavOverlayOwnerCounter = 0;
 /**
@@ -1991,24 +2021,26 @@ class HubNavComponent {
     autoOpenFromRoute = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoOpenFromRoute" }] : /* istanbul ignore next */ []));
     /**
-     * Accent applied to the hover/active affordances of the nav items. Accepts
+     * Semantic accent applied to the hover/active affordances of the nav items.
+     * Named `color` for consistency with the rest of the hub-ui family
+     * (`<hub-button>`, `<hub-badge>`, `<hub-metrics>`, `<hub-milestone>`). Accepts
      * ANY colour: a semantic/built-in name (`primary` / `success` / `danger` /
      * `warning` / `info`), a custom registered accent name, a CSS named colour,
      * or a literal `#hex` / `rgb()` / `oklch()` / `var()`. Bareword names resolve
-     * to the design-system `--hub-sys-color-<variant>` token (falling back to the
+     * to the design-system `--hub-sys-color-<name>` token (falling back to the
      * word itself as a raw colour); literals are passed through unchanged.
      * Defaults to `primary` when omitted.
      */
-    variant = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /**
      * Inline accent fed to the nav styles. A bareword (semantic name / registered
-     * accent / CSS named colour) resolves to `var(--hub-sys-color-<variant>, <variant>)`
+     * accent / CSS named colour) resolves to `var(--hub-sys-color-<name>, <name>)`
      * — the ds token with the word itself as a raw fallback — while a literal
      * `#hex` / `rgb()` / `oklch()` / `var()` is passed through untouched. Returns
-     * `null` when no variant is set, keeping the `primary` default.
+     * `null` when no colour is set, keeping the `primary` default.
      */
-    groupAccent = computed(() => resolveHubAccent(this.variant()), /* @ts-ignore */
+    groupAccent = computed(() => resolveHubAccent(this.color()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupAccent" }] : /* istanbul ignore next */ []));
     /** Start slot template projected via `hubNavStart` directive. */
     startDirective = contentChild(HubNavStartDirective, /* @ts-ignore */
@@ -2503,7 +2535,7 @@ class HubNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "attr.data-variant": "variant() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "resolvedOrientation() === \"vertical\" ? \"100%\" : null", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "class.hub-nav--has-panels": "hasPanels()", "attr.data-variant": "color() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "resolvedOrientation() === \"vertical\" ? \"100%\" : null", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t[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-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);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}: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--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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubNavComponent, decorators: [{
             type: Component,
@@ -2522,15 +2554,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[class.hub-nav--fixed]': 'resolvedConfig().position === "fixed"',
                         '[class.hub-nav--sidebar-left]': 'resolvedConfig().sidebarSide === "left"',
                         '[class.hub-nav--sidebar-right]': 'resolvedConfig().sidebarSide === "right"',
-                        '[attr.data-variant]': 'variant() ?? null',
+                        '[class.hub-nav--has-panels]': 'hasPanels()',
+                        '[attr.data-variant]': 'color() ?? null',
                         '[style.--hub-nav-accent]': 'groupAccent()',
                         '[style.width]': 'resolvedOrientation() === "vertical" ? "100%" : null',
                         '[style.align-self]': 'resolvedOrientation() === "vertical" ? "stretch" : null',
                         '[style.--hub-nav-sticky-top]': 'resolvedConfig().stickyTop',
                         '[style.display]': 'resolvedOrientation() === "vertical" ? "flex" : null',
                         '[style.flex-direction]': 'resolvedOrientation() === "vertical" ? "column" : null'
-                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-accent: var(--hub-sys-color-primary, #0d6efd);--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-base, 400);--hub-nav-item-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-color: var(--hub-nav-accent);--hub-nav-item-active-bg: var(--hub-nav-accent-subtle);--hub-nav-item-active-color: var(--hub-nav-accent);--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-item-active-indicator-color: var(--hub-nav-accent);--hub-nav-item-active-indicator-size: 3px;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], navClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navClass", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], startDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavStartDirective), { isSignal: true }] }], endDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavEndDirective), { isSignal: true }] }], itemTemplateDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavItemTemplateDirective), { isSignal: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownOpen: [{ type: i0.Output, args: ["dropdownOpen"] }], dropdownClose: [{ type: i0.Output, args: ["dropdownClose"] }], mobileToggle: [{ type: i0.Output, args: ["mobileToggle"] }], panelChange: [{ type: i0.Output, args: ["panelChange"] }] } });
+                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t@if (endTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (hasPanels()) {\n\t\t\t<div class=\"hub-nav__horizontal-panel-row\">\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t@if (hasPanels()) {\n\t\t\t\t<hub-nav-panel-container\n\t\t\t\t\t[panels]=\"state.panelStack()\"\n\t\t\t\t\t[sidebarSide]=\"sidebarSide()\"\n\t\t\t\t\t[panelWidth]=\"panelWidth()\"\n\t\t\t\t\t[hideFirstPanelHeader]=\"true\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t[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-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);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}: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--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], navClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navClass", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], 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"] }] } });
 
 /*
  * Public API Surface of nav