ng-hub-ui-nav 22.9.0 → 22.10.0

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

@@ -3,7 +3,7 @@ import { InjectionToken, signal, Injectable, inject, computed, TemplateRef, Dire
 import { toSignal } from '@angular/core/rxjs-interop';
 import { HubTranslationService, HubOverflowTooltipDirective, TooltipDirective, OverlayService, resolveHubAccent } from 'ng-hub-ui-utils';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import { RouterLink, Router, NavigationEnd } from '@angular/router';
+import { RouterLink, Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs';
 
 /** English fallbacks applied when neither config nor dictionary provide a label. */
@@ -44,7 +44,9 @@ const DEFAULT_NAV_CONFIG = {
     sidebarSide: 'left',
     panelWidth: '16rem',
     dropdownRenderMode: 'inline',
-    railToggle: true
+    railToggle: true,
+    activeIndicator: false,
+    followReplacedUrls: true
 };
 /**
  * Injection token for providing global nav configuration at application startup.
@@ -237,6 +239,18 @@ class HubNavStateService {
     /** Computed orientation shortcut. */
     orientation = computed(() => this._config().orientation, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Whether the active mark is a single travelling element rather than one per item. */
+    activeIndicator = computed(() => this._config().activeIndicator ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndicator" }] : /* istanbul ignore next */ []));
+    /** How a replaced URL — what a scroll spy writes — reaches the active mark. */
+    followReplacedUrls = computed(() => this._config().followReplacedUrls ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "followReplacedUrls" }] : /* istanbul ignore next */ []));
+    /** Quiet period a stream of position reports must clear, or 0 to follow each one. */
+    replacedUrlSettleMs = computed(() => {
+        const follow = this.followReplacedUrls();
+        return typeof follow === 'number' ? Math.max(0, follow) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "replacedUrlSettleMs" }] : /* istanbul ignore next */ []));
     /** Computed vertical expand mode shortcut. */
     verticalExpandMode = computed(() => this._config().verticalExpandMode, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "verticalExpandMode" }] : /* istanbul ignore next */ []));
@@ -678,7 +692,7 @@ class HubNavStateService {
         if (!route) {
             return true;
         }
-        const activePath = activeRoute.split('#')[0].split('?')[0];
+        const activePath = this.normalizePath(activeRoute.split('#')[0].split('?')[0]);
         if (route === activePath) {
             return true;
         }
@@ -697,7 +711,22 @@ class HubNavStateService {
         if (!item.route) {
             return null;
         }
-        return Array.isArray(item.route) ? item.route.join('/') : item.route;
+        return this.normalizePath(Array.isArray(item.route) ? item.route.join('/') : item.route);
+    }
+    /**
+     * A path in the one form these comparisons can trust: no trailing slash, except for the root.
+     *
+     * `/products` and `/products/` are the same place, and an application is free to decide which
+     * one it puts in the address bar — a canonical trailing-slash `UrlSerializer` is a common SEO
+     * choice. Comparing the two as raw strings makes the nav's marking depend on that choice:
+     * every item whose route was declared without the slash silently stopped matching, and only
+     * the ancestors stayed lit, because their prefix test happens to tolerate it.
+     *
+     * @param path - A route path, in either form.
+     * @returns The path without its trailing slash.
+     */
+    normalizePath(path) {
+        return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path;
     }
     /**
      * Recursively checks whether the given item or any of its descendants
@@ -719,9 +748,9 @@ class HubNavStateService {
      */
     isItemOrDescendantActive(item, activeRoute) {
         if (item.route) {
-            const route = Array.isArray(item.route) ? item.route.join('/') : item.route;
+            const route = this.routeOf(item);
             const [pathAndQuery, activeFragment] = activeRoute.split('#');
-            const activePath = pathAndQuery.split('?')[0];
+            const activePath = this.normalizePath(pathAndQuery.split('?')[0]);
             if (route === activePath) {
                 // When an item defines a fragment, require exact fragment match.
                 if (item.fragment) {
@@ -862,6 +891,30 @@ class HubNavScrollSpyDirective {
     /** Section tracking relies on browser-only APIs (rAF, IntersectionObserver); inert on the server. */
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     observer = null;
+    /** Sections currently inside the observation band. */
+    intersecting = new Set();
+    /** Detaches the scroll listener that catches the end of the container. */
+    detachScroll;
+    /**
+     * Section the reader asked for, which outranks anything the geometry infers.
+     *
+     * A spy exists to answer "where am I" while nobody is steering. The moment somebody
+     * clicks an entry they have answered it themselves, and the scroll that follows is a
+     * consequence of their choice rather than new information — so inferring from it
+     * argues with them. Worse, near the end of a page it argues and wins: several
+     * sections share the last screen, and no threshold can tell which of them was meant.
+     *
+     * Held until the reader scrolls under their own steam, which is the point at which
+     * the question becomes theirs again.
+     */
+    pinnedId = null;
+    /** Detaches the listeners that tell us the reader has taken over. */
+    detachIntent;
+    /**
+     * Slack for "the container has nothing left to scroll". Fractional layouts and zoom
+     * leave the last pixel or two unreachable, and an exact comparison never fires.
+     */
+    static END_SLACK_PX = 2;
     activeId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
     initialized = signal(false, /* @ts-ignore */
@@ -908,6 +961,12 @@ class HubNavScrollSpyDirective {
         if (!target) {
             return false;
         }
+        // Their answer, not ours, until they move the page themselves.
+        this.pinnedId = sectionId;
+        if (sectionId !== this.activeId()) {
+            this.activeId.set(sectionId);
+            this.activeSectionChange.emit(sectionId);
+        }
         target.scrollIntoView({
             behavior,
             block: 'start',
@@ -940,10 +999,54 @@ class HubNavScrollSpyDirective {
             threshold: [0.05, 0.2, 0.4, 0.6, 0.8]
         });
         sections.forEach((section) => this.observer?.observe(section));
+        this.observeScrollEnd();
     }
     destroyObserver() {
         this.observer?.disconnect();
         this.observer = null;
+        this.intersecting.clear();
+        this.detachScroll?.();
+        this.detachScroll = undefined;
+        this.detachIntent?.();
+        this.detachIntent = undefined;
+        this.pinnedId = null;
+    }
+    /**
+     * Watches for the container reaching its end, which no intersection ever announces:
+     * the sections below the band stop moving, so nothing changes and nothing fires.
+     */
+    observeScrollEnd() {
+        const scroller = this.scrollParent();
+        const target = scroller === document.scrollingElement ? window : (scroller ?? window);
+        let queued = false;
+        const onScroll = () => {
+            if (queued) {
+                return;
+            }
+            queued = true;
+            requestAnimationFrame(() => {
+                queued = false;
+                this.zone.run(() => this.syncActiveSection());
+            });
+        };
+        this.zone.runOutsideAngular(() => target.addEventListener('scroll', onScroll, { passive: true }));
+        this.detachScroll = () => target.removeEventListener('scroll', onScroll);
+        this.observeReaderIntent();
+    }
+    /**
+     * Watches for the reader taking the page over, which releases {@link pinnedId}.
+     *
+     * Deliberately not the `scroll` event: the smooth scroll a click starts fires that
+     * too, and releasing on it would hand control straight back to the geometry we were
+     * trying to overrule. A wheel, a drag or a key is the reader; a scroll is anybody.
+     */
+    observeReaderIntent() {
+        const release = () => {
+            this.pinnedId = null;
+        };
+        const events = ['wheel', 'touchmove', 'keydown'];
+        this.zone.runOutsideAngular(() => events.forEach((name) => window.addEventListener(name, release, { passive: true })));
+        this.detachIntent = () => events.forEach((name) => window.removeEventListener(name, release));
     }
     getSectionElements() {
         return Array.from(this.el.nativeElement.querySelectorAll(this.sectionSelector())).filter((node) => node instanceof HTMLElement);
@@ -952,20 +1055,78 @@ class HubNavScrollSpyDirective {
         return element.getAttribute('data-hub-nav-scroll-spy-section') ?? element.id ?? null;
     }
     handleObserverEntries(entries) {
-        const visible = entries
-            .filter((entry) => entry.isIntersecting)
-            .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
-        if (visible.length === 0) {
+        for (const entry of entries) {
+            const section = entry.target;
+            if (entry.isIntersecting) {
+                this.intersecting.add(section);
+            }
+            else {
+                this.intersecting.delete(section);
+            }
+        }
+        this.syncActiveSection();
+    }
+    /**
+     * Decides which section the reader is on, out of the ones currently in the band.
+     *
+     * Two rules, each of which the ratio-only version got wrong:
+     *
+     * 1. **The topmost wins, not the largest slice.** Ranking by `intersectionRatio` ranks
+     *    by how much of a section fits the band, so a short one sitting entirely inside it
+     *    outranks the tall one the reader is actually in the middle of — and the mark
+     *    jumps back and forth between them as the tall one scrolls through.
+     * 2. **At the end of the scroll, the last section wins outright.** The band stops
+     *    partway down the viewport, so once the container cannot scroll any further,
+     *    everything below that line is unreachable: the final sections could never be
+     *    reported at all, however long the reader stared at them. Measured on a
+     *    seven-example page, clicking the last entry settled the mark four items above it.
+     */
+    syncActiveSection() {
+        if (this.pinnedId) {
+            return;
+        }
+        const sections = this.getSectionElements();
+        if (sections.length === 0) {
             return;
         }
-        const top = visible[0];
-        const id = this.getSectionId(top.target);
+        const chosen = this.isScrolledToEnd()
+            ? sections[sections.length - 1]
+            : [...this.intersecting].sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)[0];
+        if (!chosen) {
+            return;
+        }
+        const id = this.getSectionId(chosen);
         if (!id || id === this.activeId()) {
             return;
         }
         this.activeId.set(id);
         this.activeSectionChange.emit(id);
     }
+    /** Whether the surface these sections scroll in has nothing left to give. */
+    isScrolledToEnd() {
+        const scroller = this.scrollParent();
+        if (!scroller) {
+            return false;
+        }
+        return scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - HubNavScrollSpyDirective.END_SLACK_PX;
+    }
+    /**
+     * The scrollable ancestor these sections actually move inside — often not the window,
+     * since an application shell usually scrolls its own main column.
+     *
+     * @returns The nearest scrolling ancestor, or the document's scroller.
+     */
+    scrollParent() {
+        let node = this.el.nativeElement.parentElement;
+        while (node) {
+            const overflowY = getComputedStyle(node).overflowY;
+            if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return document.scrollingElement ?? null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: HubNavScrollSpyDirective, isStandalone: true, selector: "[hubNavScrollSpy]", inputs: { enabled: { classPropertyName: "enabled", publicName: "hubNavScrollSpy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, sectionSelector: { classPropertyName: "sectionSelector", publicName: "sectionSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSectionChange: "activeSectionChange" }, exportAs: ["hubNavScrollSpy"], ngImport: i0 });
 }
@@ -1169,7 +1330,7 @@ class HubNavItemComponent {
         this.toggleDropdown.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: HubOverflowTooltipDirective, selector: "[hubOverflowTooltip]", inputs: ["hubOverflowTooltip", "placement"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "placement", "delay", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: HubOverflowTooltipDirective, selector: "[hubOverflowTooltip]", inputs: ["hubOverflowTooltip", "placement"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "placement", "delay", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, decorators: [{
             type: Component,
@@ -1182,7 +1343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.hub-nav-item--header]': 'isHeader()',
                         '[attr.data-item-id]': 'item().id',
                         role: 'none'
-                    }, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"] }]
+                    }, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], toggleDropdown: [{ type: i0.Output, args: ["toggleDropdown"] }] } });
 
 /**
@@ -1328,17 +1489,214 @@ class HubNavItemListComponent {
     isItemActive(item) {
         return this.state.isItemActiveAmongSiblings(item, this.items(), this.currentUrl());
     }
+    // ── Travelling active indicator ─────────────────────────────────────────────
+    //
+    // One element per list, parked over whichever sibling is active. Travel is only
+    // meaningful along a shared edge, so each list owns its own: entering a submenu, a
+    // drill-down panel or a collapsed rail swaps one list for another, and the mark
+    // fades in there rather than flying across a gap that is not on screen.
+    //
+    // The geometry is measured rather than derived. Items size themselves from their
+    // content, and the rail, the accordion and the viewport all resize them without
+    // the item list ever hearing about it — so the box is read from the DOM and
+    // re-read whenever it can have moved.
+    /** Box of the active item, in the host's coordinates. Null when nothing is active. */
+    indicatorBox = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorBox" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a first measurement has landed.
+     *
+     * The transition is withheld until then. Without it the indicator animates in from
+     * the list's origin on the very first paint — a diagonal slide nobody asked for,
+     * and one that a server-rendered page performs on every hydration.
+     */
+    indicatorMeasured = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorMeasured" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this move should arrive rather than travel.
+     *
+     * Travelling says "you chose to go here", and not every move is that. A scroll spy
+     * reports where the reader already is by REPLACING the URL, where a nav link PUSHES
+     * one; a relayout — the rail collapsing, an accordion opening above — moves the item
+     * under a selection that never changed. Neither is a decision, so neither is narrated.
+     *
+     * An application that does not want its menu tracking a scroll at all turns off
+     * `config.followReplacedUrls`, and then these moves never reach the mark to begin with.
+     */
+    indicatorSnap = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorSnap" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the next move is a report rather than a choice. Set by whatever triggers
+     * it — a replaced navigation, or a relayout — and read once.
+     */
+    nextMoveIsReported = false;
+    /** Pending follow of a quiet-period-gated stream of position reports. */
+    reportedTimer;
+    /** Whether this list paints a travelling mark at all. */
+    showIndicator = computed(() => this.state.activeIndicator() && !!this.indicatorBox(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIndicator" }] : /* istanbul ignore next */ []));
+    /** Inline geometry of the indicator. Transform only, so the move stays off the layout path. */
+    indicatorStyle = computed(() => {
+        const box = this.indicatorBox();
+        if (!box) {
+            return null;
+        }
+        return {
+            transform: `translate(${box.x}px, ${box.y}px)`,
+            width: `${box.width}px`,
+            height: `${box.height}px`
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : /* istanbul ignore next */ []));
+    /** Re-measures on anything that can move the active item, including its own resize. */
+    resizeObserver;
+    /**
+     * Reads the active item's box out of the DOM and parks the indicator on it.
+     *
+     * Uses offset geometry rather than `getBoundingClientRect`, so the numbers are
+     * already relative to the positioned host and survive the list being scrolled.
+     */
+    measureIndicator() {
+        if (!this.state.activeIndicator()) {
+            return;
+        }
+        const items = this.items();
+        const wrappers = this.itemWrappers();
+        const index = items.findIndex((item) => item.type !== 'separator' && this.isItemActive(item));
+        if (index < 0) {
+            this.indicatorBox.set(null);
+            return;
+        }
+        // Separators are not wrapped, so the wrapper list is shorter than the item list
+        // and their indices only coincide until the first one.
+        const wrapperIndex = items.slice(0, index).filter((item) => item.type !== 'separator').length;
+        const element = wrappers[wrapperIndex]?.nativeElement;
+        if (!element) {
+            return;
+        }
+        const next = {
+            x: element.offsetLeft,
+            y: element.offsetTop,
+            width: element.offsetWidth,
+            height: element.offsetHeight
+        };
+        const current = this.indicatorBox();
+        const moved = !current ||
+            current.x !== next.x ||
+            current.y !== next.y ||
+            current.width !== next.width ||
+            current.height !== next.height;
+        // A re-measure that lands on the same box is not a move: it is the observer
+        // reporting a resize that did not touch us. Timing it as one would make an idle
+        // list look like a burst.
+        if (moved) {
+            this.rateIndicatorMove();
+        }
+        this.indicatorBox.set(next);
+    }
+    /**
+     * Records why this move happened, which decides whether the mark stays on duty.
+     *
+     * @see {@link indicatorLive} for why a reported change gives it up.
+     */
+    rateIndicatorMove() {
+        this.indicatorSnap.set(this.indicatorMeasured() && this.nextMoveIsReported);
+        this.nextMoveIsReported = false;
+    }
+    /**
+     * Re-measures on every input that can change WHICH item is active or WHERE it sits.
+     *
+     * Declared as a named field rather than buried in a constructor so its dependencies
+     * are readable at the point they are registered — the list is the whole contract,
+     * and anything missing from it is a mark left parked over the wrong item.
+     */
+    indicatorSync = effect(() => {
+        this.items();
+        this.currentUrl();
+        this.state.orientation();
+        this.state.railActive();
+        this.state.collapsed();
+        this.scheduleIndicatorMeasure();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorSync" }] : /* istanbul ignore next */ []));
+    /** Measures after the browser has laid the list out, never during the same frame. */
+    scheduleIndicatorMeasure() {
+        if (!this.state.activeIndicator() || typeof requestAnimationFrame !== 'function') {
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.measureIndicator();
+            // A second frame before the transition is armed: the first one carries the
+            // jump into position, and arming in the same frame animates that jump.
+            requestAnimationFrame(() => this.indicatorMeasured.set(true));
+        });
+    }
+    /**
+     * Takes a navigation's URL into the active state, at the eagerness the application
+     * asked for.
+     *
+     * A report — a replaced URL, which is how a scroll spy names the section under the
+     * reader — can be followed as it arrives, followed once its stream goes quiet, or
+     * ignored. The middle case is the useful one on a long menu: the mark still says
+     * where the reader is, it just stops walking there one item at a time while they
+     * scroll past.
+     *
+     * @param url - The URL the router has just settled on.
+     */
+    applyUrl(url) {
+        const reported = this.nextMoveIsReported;
+        this.nextMoveIsReported = false;
+        if (!reported) {
+            clearTimeout(this.reportedTimer);
+            this.currentUrl.set(url);
+            return;
+        }
+        if (this.state.followReplacedUrls() === false) {
+            return;
+        }
+        const settle = this.state.replacedUrlSettleMs();
+        if (settle === 0) {
+            this.nextMoveIsReported = true;
+            this.currentUrl.set(url);
+            return;
+        }
+        clearTimeout(this.reportedTimer);
+        this.reportedTimer = setTimeout(() => {
+            this.nextMoveIsReported = true;
+            this.currentUrl.set(url);
+        }, settle);
+    }
     /** @inheritDoc */
     ngOnInit() {
-        this.routerSub = this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd))
-            .subscribe(() => {
-            this.currentUrl.set(this.router.url);
+        // `replaceUrl` is what separates a scroll spy from a click: the spy rewrites the
+        // URL to describe where the reader already is, while a nav link pushes one
+        // because they chose to go there. Captured on start — by `NavigationEnd` the
+        // navigation object is gone.
+        this.routerSub = this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.nextMoveIsReported = this.router.getCurrentNavigation()?.extras.replaceUrl === true;
+                return;
+            }
+            if (event instanceof NavigationEnd) {
+                this.applyUrl(this.router.url);
+            }
         });
+        // The rail collapses, an accordion opens above us, the viewport reflows: all of
+        // them move the active item without changing a single signal this list reads.
+        if (this.state.activeIndicator() && typeof ResizeObserver === 'function') {
+            this.resizeObserver = new ResizeObserver(() => {
+                // The geometry moved, the selection did not: nothing to narrate.
+                this.nextMoveIsReported = true;
+                this.measureIndicator();
+            });
+            this.resizeObserver.observe(this.el.nativeElement);
+        }
     }
     /** @inheritDoc */
     ngOnDestroy() {
         this.routerSub?.unsubscribe();
+        clearTimeout(this.reportedTimer);
+        this.resizeObserver?.disconnect();
         this.disposeAllOverlays();
         this.removeOverlayViewportListeners();
     }
@@ -1780,19 +2138,22 @@ 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.8", ngImport: i0, type: HubNavItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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()", "class.hub-nav-item-list--animated-indicator": "state.activeIndicator()", "class.hub-nav-item-list--indicator-snap": "indicatorSnap()", "class.hub-nav-item-list--indicator-ready": "indicatorMeasured()", "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: "<!--\n\tThe travelling active mark. One per list, parked over whichever sibling is active\n\tand moved with a transform, so the animation never touches the layout.\n\n\t`aria-hidden`: it carries no information the item does not already announce through\n\t`aria-current` and its own label \u2014 a screen reader gains nothing from a moving box.\n-->\n@if (showIndicator()) {\n\t<span class=\"hub-nav-item-list__indicator\" aria-hidden=\"true\" [style]=\"indicatorStyle()\"></span>\n}\n\n@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}:host(.hub-nav-item-list--animated-indicator){position:relative}:host(.hub-nav-item-list--animated-indicator) .hub-nav-item-list__indicator{position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:var(--hub-nav-item-border-radius, .375rem);background-color:var(--hub-nav-item-active-bg)}:host(.hub-nav-item-list--animated-indicator)>.hub-nav-item-wrapper{position:relative;z-index:1}:host(.hub-nav-item-list--animated-indicator).hub-nav-item-list--indicator-snap .hub-nav-item-list__indicator{transition:none}:host(.hub-nav-item-list--animated-indicator).hub-nav-item-list--indicator-ready .hub-nav-item-list__indicator{transition:var(--hub-nav-item-active-indicator-transition, transform .25s ease, width .25s ease, height .25s ease)}:host-context(.hub-nav--horizontal) .hub-nav-item-list__indicator{border-radius:0;background-color:transparent;box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.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}.hub-nav-item-list__indicator{transition:none!important}}\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.8", ngImport: i0, type: HubNavItemListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-nav-item-list', standalone: true, imports: [HubNavItemComponent, HubNavSeparatorComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'hub-nav-item-list',
                         '[class.hub-nav-item-list--force-accordion]': 'forceAccordionMode()',
+                        '[class.hub-nav-item-list--animated-indicator]': 'state.activeIndicator()',
+                        '[class.hub-nav-item-list--indicator-snap]': 'indicatorSnap()',
+                        '[class.hub-nav-item-list--indicator-ready]': 'indicatorMeasured()',
                         '[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\" 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"] }]
+                    }, template: "<!--\n\tThe travelling active mark. One per list, parked over whichever sibling is active\n\tand moved with a transform, so the animation never touches the layout.\n\n\t`aria-hidden`: it carries no information the item does not already announce through\n\t`aria-current` and its own label \u2014 a screen reader gains nothing from a moving box.\n-->\n@if (showIndicator()) {\n\t<span class=\"hub-nav-item-list__indicator\" aria-hidden=\"true\" [style]=\"indicatorStyle()\"></span>\n}\n\n@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}:host(.hub-nav-item-list--animated-indicator){position:relative}:host(.hub-nav-item-list--animated-indicator) .hub-nav-item-list__indicator{position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:var(--hub-nav-item-border-radius, .375rem);background-color:var(--hub-nav-item-active-bg)}:host(.hub-nav-item-list--animated-indicator)>.hub-nav-item-wrapper{position:relative;z-index:1}:host(.hub-nav-item-list--animated-indicator).hub-nav-item-list--indicator-snap .hub-nav-item-list__indicator{transition:none}:host(.hub-nav-item-list--animated-indicator).hub-nav-item-list--indicator-ready .hub-nav-item-list__indicator{transition:var(--hub-nav-item-active-indicator-transition, transform .25s ease, width .25s ease, height .25s ease)}:host-context(.hub-nav--horizontal) .hub-nav-item-list__indicator{border-radius:0;background-color:transparent;box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}.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}.hub-nav-item-list__indicator{transition:none!important}}\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 }] }] } });
 
 /**
@@ -2938,7 +3299,7 @@ class HubNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, rail: { classPropertyName: "rail", publicName: "rail", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rail: "railChange", itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--rail": "isRailActive()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "class.hub-nav--has-panels": "hasPanels()", "attr.data-variant": "color() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "hostWidth()", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;justify-content:var(--hub-nav-collapsed-justify, space-between);flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition", "itemTemplate", "startTemplate", "endTemplate"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavRailToggleComponent, selector: "hub-nav-rail-toggle", outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, rail: { classPropertyName: "rail", publicName: "rail", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rail: "railChange", itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--rail": "isRailActive()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "class.hub-nav--has-panels": "hasPanels()", "attr.data-variant": "color() ?? null", "style.--hub-nav-accent": "groupAccent()", "style.width": "hostWidth()", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;justify-content:var(--hub-nav-collapsed-justify, space-between);flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition", "itemTemplate", "startTemplate", "endTemplate"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "dropdownRenderMode", "overlayOwnerClass", "overlayOrientationClass", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavRailToggleComponent, selector: "hub-nav-rail-toggle", outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavComponent, decorators: [{
             type: Component,
@@ -2967,7 +3328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[style.--hub-nav-sticky-top]': 'resolvedConfig().stickyTop',
                         '[style.display]': 'resolvedOrientation() === "vertical" ? "flex" : null',
                         '[style.flex-direction]': 'resolvedOrientation() === "vertical" ? "column" : null'
-                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\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-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;justify-content:var(--hub-nav-collapsed-justify, space-between);flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
+                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\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@if (showRailToggle()) {\n\t\t\t\t\t<hub-nav-rail-toggle (toggle)=\"onRailToggle()\" />\n\t\t\t\t}\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\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[class.hub-nav-item-list--rail]=\"isRailActive()\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t[dropdownRenderMode]=\"dropdownRenderMode()\"\n\t\t\t\t\t[overlayOwnerClass]=\"overlayOwnerClass\"\n\t\t\t\t\t[overlayOrientationClass]=\"overlayOrientationClass()\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\n\t\t\t\t<!-- End slot in vertical desktop mode: anchored to the bottom of the primary column -->\n\t\t\t\t@if (endTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t\t\t<ng-container\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-active-indicator-transition: transform .25s ease, width .25s ease, height .25s ease;--hub-nav-item-disabled-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-item-disabled-opacity: var(--hub-sys-opacity-disabled, .65);--hub-nav-dropdown-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-dropdown-color: var(--hub-sys-text-primary, #212529);--hub-nav-dropdown-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-dropdown-border-radius: var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));--hub-nav-dropdown-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-dropdown-min-width: 12rem;--hub-nav-dropdown-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-caret-size: .3rem;--hub-nav-caret-color: currentColor;--hub-nav-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-header-color: var(--hub-sys-text-muted, #6c757d);--hub-nav-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-header-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-header-margin-top: var(--hub-ref-space-3, 1rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, 1rem);--hub-nav-header-horizontal-padding-inline-start: 2rem;--hub-nav-separator-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-separator-margin-y: var(--hub-ref-space-2, .5rem);--hub-nav-badge-font-size: var(--hub-ref-font-size-xs, .75rem);--hub-nav-badge-padding-x: .5em;--hub-nav-badge-padding-y: .25em;--hub-nav-badge-bg: var(--hub-sys-color-danger, #dc3545);--hub-nav-badge-color: var(--hub-ref-color-white, #fff);--hub-nav-badge-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-toggler-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-toggler-padding-y: var(--hub-ref-space-1, .25rem);--hub-nav-toggler-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-toggler-color: var(--hub-sys-text-primary, #212529);--hub-nav-toggler-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-toggler-border-radius: var(--hub-ref-radius-sm, .25rem);--hub-nav-mobile-bg: var(--hub-sys-surface-page, #fff);--hub-nav-mobile-color: var(--hub-sys-text-primary, #212529);--hub-nav-mobile-width: 18rem;--hub-nav-mobile-zindex: var(--hub-sys-zindex-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: .35s ease;--hub-nav-icon-size: var(--hub-ref-icon-size, 1em);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-rail-width: 4rem;--hub-nav-rail-transition: width .2s ease-in-out;--hub-nav-rail-toggle-size: 1.75rem;--hub-nav-rail-toggle-padding: .25rem;--hub-nav-rail-toggle-color: var(--hub-nav-item-color, #212529);--hub-nav-rail-toggle-bg: var(--hub-sys-surface-elevated, #fff);--hub-nav-rail-toggle-hover-color: var(--hub-nav-item-hover-color, #0d6efd);--hub-nav-rail-toggle-hover-bg: var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));--hub-nav-rail-toggle-border-width: 1px;--hub-nav-rail-toggle-border-color: var(--hub-nav-border-color, #dee2e6);--hub-nav-rail-toggle-border-radius: var(--hub-ref-radius-pill, 50rem);--hub-nav-rail-toggle-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-rail-toggle-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E\");--hub-nav-rail-toggle-icon-size: .875em;--hub-nav-rail-toggle-inset-block: 50%;--hub-nav-rail-toggle-inset-inline: calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2);--hub-nav-rail-toggle-zindex: calc(var(--hub-nav-panel-zindex, 1000) + 1);--hub-nav-rail-toggle-transition: var(--hub-sys-transition-fast, all .15s ease-in-out);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #f8f9fa);--hub-nav-panel-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-border-width: 1px;--hub-nav-panel-shadow: var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));--hub-nav-panel-zindex: var(--hub-sys-zindex-dropdown, 1000);--hub-nav-panel-transition: var(--hub-sys-transition-base, all .2s ease-in-out);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-bg, rgba(0, 0, 0, .075));--hub-nav-panel-back-size: 2rem}:host([data-variant]),.hub-nav[data-variant]{--hub-nav-accent-subtle: color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff));--hub-nav-accent-emphasis: color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529));--hub-nav-accent-on: oklch(from var(--hub-nav-accent) clamp(0, (.62 - l) * 1000, 1) 0 h);--hub-nav-bg: color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff));--hub-nav-item-hover-bg: color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff))}:host([data-variant=primary]),.hub-nav[data-variant=primary]{--hub-nav-accent: var(--hub-sys-color-primary)}:host([data-variant=secondary]),.hub-nav[data-variant=secondary]{--hub-nav-accent: var(--hub-sys-color-secondary)}:host([data-variant=success]),.hub-nav[data-variant=success]{--hub-nav-accent: var(--hub-sys-color-success)}:host([data-variant=danger]),.hub-nav[data-variant=danger]{--hub-nav-accent: var(--hub-sys-color-danger)}:host([data-variant=warning]),.hub-nav[data-variant=warning]{--hub-nav-accent: var(--hub-sys-color-warning)}:host([data-variant=info]),.hub-nav[data-variant=info]{--hub-nav-accent: var(--hub-sys-color-info)}:host([data-variant=neutral]),.hub-nav[data-variant=neutral]{--hub-nav-accent: var(--hub-sys-color-neutral)}:host([data-variant=light]),.hub-nav[data-variant=light]{--hub-nav-accent: var(--hub-sys-color-light)}:host([data-variant=dark]),.hub-nav[data-variant=dark]{--hub-nav-accent: var(--hub-sys-color-dark)}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);border-radius:var(--hub-nav-border-radius, 0);box-shadow:var(--hub-nav-box-shadow, none);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;justify-content:var(--hub-nav-collapsed-justify, space-between);flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0;position:relative}.hub-nav__primary-column>hub-nav-rail-toggle{position:absolute;inset-block-start:var(--hub-nav-rail-toggle-inset-block, 50%);inset-inline-end:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2));transform:translateY(-50%);z-index:var(--hub-nav-rail-toggle-zindex, calc(var(--hub-nav-panel-zindex, 1000) + 1))}:host(.hub-nav--sidebar-right) .hub-nav__primary-column>hub-nav-rail-toggle{inset-inline-end:auto;inset-inline-start:var(--hub-nav-rail-toggle-inset-inline, calc(var(--hub-nav-rail-toggle-size, 1.75rem) / -2))}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--vertical.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 50rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--rail){width:var(--hub-nav-rail-width, 4rem);transition:var(--hub-nav-rail-transition, width .2s ease-in-out)}:host(.hub-nav--rail.hub-nav--has-panels){width:auto}:host(.hub-nav--rail.hub-nav--has-panels) .hub-nav__main-and-panels>.hub-nav__primary-column{flex:0 0 var(--hub-nav-rail-width, 4rem);width:var(--hub-nav-rail-width, 4rem);min-width:var(--hub-nav-rail-width, 4rem)}:host(.hub-nav--rail) .hub-nav-slot--start,:host(.hub-nav--rail) .hub-nav-slot--end{justify-content:center;padding-inline:0}@media(prefers-reduced-motion:reduce){:host(.hub-nav--rail){transition:none}}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-zindex-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-zindex-fixed, 1030)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], navClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navClass", required: false }] }], rail: [{ type: i0.Input, args: [{ isSignal: true, alias: "rail", required: false }] }, { type: i0.Output, args: ["railChange"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], startDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavStartDirective), { isSignal: true }] }], endDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavEndDirective), { isSignal: true }] }], itemTemplateDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavItemTemplateDirective), { isSignal: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownOpen: [{ type: i0.Output, args: ["dropdownOpen"] }], dropdownClose: [{ type: i0.Output, args: ["dropdownClose"] }], mobileToggle: [{ type: i0.Output, args: ["mobileToggle"] }], panelChange: [{ type: i0.Output, args: ["panelChange"] }] } });
 
 /*