ng-hub-ui-nav 21.1.0

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

@@ -0,0 +1,2214 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, Injectable, computed, inject, TemplateRef, Directive, input, output, ElementRef, NgZone, effect, ChangeDetectionStrategy, Component, HostListener, contentChild } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink, Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs';
+
+/**
+ * Default configuration values for the `hub-nav` component.
+ */
+const DEFAULT_NAV_CONFIG = {
+    orientation: 'horizontal',
+    verticalExpandMode: 'accordion',
+    dropdownTrigger: 'click',
+    position: 'static',
+    stickyTop: '0px',
+    collapseMode: 'offcanvas',
+    collapseBreakpoint: 992,
+    offcanvasPosition: 'start',
+    ariaLabel: 'Navigation',
+    panelMaxVisible: 3,
+    sidebarSide: 'left',
+    panelWidth: '16rem'
+};
+/**
+ * Injection token for providing global nav configuration at application startup.
+ *
+ * @example
+ * ```typescript
+ * import { HUB_NAV_CONFIG } from 'ng-hub-ui-nav';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     {
+ *       provide: HUB_NAV_CONFIG,
+ *       useValue: {
+ *         orientation: 'vertical',
+ *         dropdownTrigger: 'hover',
+ *         collapseBreakpoint: 768
+ *       }
+ *     }
+ *   ]
+ * };
+ * ```
+ */
+const HUB_NAV_CONFIG = new InjectionToken('HUB_NAV_CONFIG');
+/**
+ * Global configuration service for `hub-nav` components.
+ * Provides centralized configuration management with signal-based reactivity.
+ *
+ * @example
+ * ```typescript
+ * const configService = inject(HubNavConfigService);
+ * configService.updateConfig({ orientation: 'vertical' });
+ * const config = configService.getConfig();
+ * ```
+ */
+class HubNavConfigService {
+    /** Signal containing the current global configuration. */
+    config = signal({ ...DEFAULT_NAV_CONFIG }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /**
+     * Returns the current configuration as a readonly signal.
+     *
+     * @returns Readonly signal with the current `HubNavConfig`.
+     */
+    getConfig() {
+        return this.config.asReadonly();
+    }
+    /**
+     * Returns the default configuration values.
+     *
+     * @returns A copy of the default `HubNavConfig`.
+     */
+    getDefaults() {
+        return { ...DEFAULT_NAV_CONFIG };
+    }
+    /**
+     * Merges the given partial configuration into the current config.
+     *
+     * @param partial - Partial configuration to merge.
+     */
+    updateConfig(partial) {
+        this.config.update((current) => ({
+            ...current,
+            ...partial
+        }));
+    }
+    /**
+     * Resets the configuration to factory defaults.
+     */
+    resetToDefaults() {
+        this.config.set({ ...DEFAULT_NAV_CONFIG });
+    }
+    /**
+     * Resolves a complete config by merging defaults with the given partial overrides.
+     * Used internally by `hub-nav` to merge component-level inputs with global defaults.
+     *
+     * @param overrides - Partial configuration from the component input.
+     * @returns A complete `HubNavConfig`.
+     */
+    resolve(overrides) {
+        return {
+            ...this.config(),
+            ...overrides
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Internal state management service for a single `hub-nav` instance.
+ * Scoped per component — provided at the component level, not root.
+ *
+ * Manages:
+ * - Resolved configuration.
+ * - Open dropdown tracking.
+ * - Mobile menu state.
+ * - Active route propagation.
+ * - Panel stack for drill-down navigation.
+ */
+class HubNavStateService {
+    /** Currently resolved configuration. */
+    _config = signal({
+        orientation: 'horizontal',
+        verticalExpandMode: 'accordion',
+        dropdownTrigger: 'click',
+        position: 'static',
+        stickyTop: '0px',
+        collapseMode: 'offcanvas',
+        collapseBreakpoint: 992,
+        offcanvasPosition: 'start',
+        ariaLabel: 'Navigation',
+        panelMaxVisible: 3,
+        sidebarSide: 'left',
+        panelWidth: '16rem'
+    }, ...(ngDevMode ? [{ debugName: "_config" }] : []));
+    /** Set of dropdown item IDs that are currently open. */
+    _openDropdowns = signal(new Set(), ...(ngDevMode ? [{ debugName: "_openDropdowns" }] : []));
+    /** Whether the mobile panel is open. */
+    _mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "_mobileOpen" }] : []));
+    /** Whether the viewport is below the collapse breakpoint. */
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    /** Stack of open panels for panel expand mode. */
+    _panelStack = signal([], ...(ngDevMode ? [{ debugName: "_panelStack" }] : []));
+    /** Auto-incrementing counter for unique panel IDs. */
+    _panelIdCounter = 0;
+    /** Readonly config signal. */
+    config = this._config.asReadonly();
+    /** Readonly mobile-open signal. */
+    mobileOpen = this._mobileOpen.asReadonly();
+    /** Readonly collapsed signal. */
+    collapsed = this._collapsed.asReadonly();
+    /** Readonly panel stack signal. */
+    panelStack = this._panelStack.asReadonly();
+    /** Number of currently open panels. */
+    panelCount = computed(() => this._panelStack().length, ...(ngDevMode ? [{ debugName: "panelCount" }] : []));
+    /** Computed orientation shortcut. */
+    orientation = computed(() => this._config().orientation, ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /** Computed vertical expand mode shortcut. */
+    verticalExpandMode = computed(() => this._config().verticalExpandMode, ...(ngDevMode ? [{ debugName: "verticalExpandMode" }] : []));
+    /** Computed dropdown trigger shortcut. */
+    dropdownTrigger = computed(() => this._config().dropdownTrigger, ...(ngDevMode ? [{ debugName: "dropdownTrigger" }] : []));
+    /**
+     * Updates the resolved configuration.
+     *
+     * @param config - Full resolved configuration.
+     */
+    setConfig(config) {
+        this._config.set(config);
+        this.reconcilePanelStackWithConfig(config);
+    }
+    /**
+     * Normalizes the panel stack after config changes.
+     *
+     * This is required when `panelMaxVisible` changes after panels were already
+     * opened (for example during initial input binding in the host app shell).
+     * Without this reconciliation, the UI can temporarily render more panels
+     * than allowed or keep a last panel without header while its parent panel
+     * is no longer visible.
+     *
+     * @param config - The latest resolved configuration.
+     */
+    reconcilePanelStackWithConfig(config) {
+        const effectiveMaxVisible = Math.max(1, config.panelMaxVisible - 1);
+        const current = this._panelStack();
+        if (current.length <= effectiveMaxVisible) {
+            return;
+        }
+        const hiddenPanelsCount = current.length - effectiveMaxVisible;
+        const trimmed = current.slice(-effectiveMaxVisible).map((panel, index) => {
+            // If some parent panels were trimmed, the first visible panel must
+            // render a header because its parent context is now hidden.
+            if (hiddenPanelsCount > 0 && index === 0 && !panel.isDrillDown) {
+                return {
+                    ...panel,
+                    isDrillDown: true
+                };
+            }
+            return panel;
+        });
+        this._panelStack.set(trimmed);
+    }
+    // ──────────────────────────────────────────────
+    // Dropdown management
+    // ──────────────────────────────────────────────
+    /**
+     * Checks whether a dropdown with the given item ID is open.
+     *
+     * @param id - Item ID to check.
+     * @returns `true` if the dropdown is open.
+     */
+    isDropdownOpen(id) {
+        return this._openDropdowns().has(id);
+    }
+    /**
+     * Opens a dropdown by item ID.
+     * In accordion mode, closes sibling dropdowns at the same level.
+     *
+     * @param id - Item ID to open.
+     * @param siblings - Optional array of sibling item IDs to close when opening this one.
+     */
+    openDropdown(id, siblings) {
+        this._openDropdowns.update((set) => {
+            const next = new Set(set);
+            // In accordion mode, close sibling dropdowns
+            if (siblings && this._config().verticalExpandMode === 'accordion') {
+                siblings.forEach((siblingId) => {
+                    if (siblingId !== id) {
+                        next.delete(siblingId);
+                    }
+                });
+            }
+            next.add(id);
+            return next;
+        });
+    }
+    /**
+     * Closes a dropdown by item ID.
+     *
+     * @param id - Item ID to close.
+     */
+    closeDropdown(id) {
+        this._openDropdowns.update((set) => {
+            const next = new Set(set);
+            next.delete(id);
+            return next;
+        });
+    }
+    /**
+     * Toggles a dropdown open/closed by item ID.
+     *
+     * @param id - Item ID to toggle.
+     * @returns `true` if the dropdown is now open.
+     */
+    toggleDropdown(id) {
+        if (this.isDropdownOpen(id)) {
+            this.closeDropdown(id);
+            return false;
+        }
+        this.openDropdown(id);
+        return true;
+    }
+    /** Closes all open dropdowns. */
+    closeAllDropdowns() {
+        this._openDropdowns.set(new Set());
+    }
+    /**
+     * Synchronizes the open dropdown set with the current active route.
+     * Only ancestor items in the active trail remain open.
+     *
+     * @param items - Root navigation items to inspect.
+     * @param activeRoute - Current router URL including optional fragment.
+     */
+    syncDropdownsWithRoute(items, activeRoute) {
+        const nextOpenIds = new Set(this.findActiveDropdownTrail(items, activeRoute));
+        this._openDropdowns.set(nextOpenIds);
+    }
+    // ──────────────────────────────────────────────
+    // Mobile state
+    // ──────────────────────────────────────────────
+    /**
+     * Sets the mobile panel open state.
+     *
+     * @param open - Whether the mobile panel should be open.
+     */
+    setMobileOpen(open) {
+        this._mobileOpen.set(open);
+    }
+    /** Toggles the mobile panel. */
+    toggleMobile() {
+        this._mobileOpen.update((v) => !v);
+    }
+    /**
+     * Sets the collapsed state (below breakpoint).
+     *
+     * @param collapsed - Whether the viewport is below the collapse breakpoint.
+     */
+    setCollapsed(collapsed) {
+        if (this._collapsed() === collapsed) {
+            return;
+        }
+        this._collapsed.set(collapsed);
+        if (!collapsed) {
+            this._mobileOpen.set(false);
+        }
+    }
+    // ──────────────────────────────────────────────
+    // Panel stack management
+    // ──────────────────────────────────────────────
+    /**
+     * Opens a new panel for the given parent item's children.
+     * If the panel count has reached `panelMaxVisible`, drills down within the last panel instead.
+     *
+     * @param parentItem - The item whose children should be displayed in the panel.
+     * @param rootItems - The root-level navigation items (to determine if parentItem is at root level).
+     */
+    openPanel(parentItem, rootItems) {
+        if (!parentItem.children || parentItem.children.length === 0) {
+            return;
+        }
+        const maxVisible = this._config().panelMaxVisible;
+        const currentStack = this._panelStack();
+        // Check if this exact item already has a panel open
+        const existingIndex = currentStack.findIndex((p) => p.parentItem.id === parentItem.id);
+        if (existingIndex >= 0) {
+            // Panel for this item already exists — close it and all after it
+            this.closePanelsFromIndex(existingIndex);
+            return;
+        }
+        // If parentItem is a root-level item and there are already panels open,
+        // close all existing panels before opening the new one (same-level replacement)
+        const isRootLevel = rootItems?.some((item) => item.id === parentItem.id);
+        if (isRootLevel && currentStack.length > 0) {
+            this.closeAllPanels();
+        }
+        // Determine the depth of the new panel
+        const newPanelDepth = this.findPanelDepth(parentItem, currentStack);
+        // Close panels at the same depth or deeper (sibling replacement)
+        if (newPanelDepth >= 0) {
+            // Close all panels from this depth onward
+            this.closePanelsFromIndex(newPanelDepth);
+        }
+        const updatedStack = this._panelStack();
+        // `panelMaxVisible` represents the total visible columns in panel mode,
+        // including the root column. The panel stack stores only subpanels, so
+        // subtract one to get the visible subpanel limit.
+        const effectiveMaxVisible = Math.max(1, maxVisible - 1);
+        if (updatedStack.length >= effectiveMaxVisible) {
+            // Max panels reached — drill-down within the last panel
+            const lastPanel = updatedStack[updatedStack.length - 1];
+            this.drillDownInPanel(lastPanel.id, parentItem, parentItem.children);
+        }
+        else {
+            // Add a new panel
+            const panel = {
+                id: `panel-${++this._panelIdCounter}`,
+                parentItem,
+                items: parentItem.children,
+                history: [],
+                isDrillDown: false
+            };
+            this._panelStack.update((stack) => [...stack, panel]);
+        }
+    }
+    /**
+     * Finds the depth (index) where a panel for the given item should be placed.
+     * Returns the index of the first panel whose items contain parentItem,
+     * or -1 if parentItem is not found in any panel.
+     *
+     * @param parentItem - The item to search for.
+     * @param stack - The current panel stack.
+     * @returns The panel index, or -1 if not found.
+     */
+    findPanelDepth(parentItem, stack) {
+        for (let i = 0; i < stack.length; i++) {
+            const panel = stack[i];
+            if (panel.items.some((item) => item.id === parentItem.id)) {
+                return i + 1; // New panel should go after this one
+            }
+        }
+        return -1;
+    }
+    /**
+     * Finds the ordered list of dropdown ancestor IDs for the active route.
+     *
+     * @param items - Items to search recursively.
+     * @param activeRoute - Current router URL.
+     * @param trail - Accumulated ancestor trail.
+     * @returns Ancestor IDs that must remain expanded.
+     */
+    findActiveDropdownTrail(items, activeRoute, trail = []) {
+        for (const item of items) {
+            if (!this.isItemOrDescendantActive(item, activeRoute)) {
+                continue;
+            }
+            const nextTrail = item.children?.length ? [...trail, item.id] : trail;
+            if (!item.children?.length) {
+                return nextTrail;
+            }
+            const childTrail = this.findActiveDropdownTrail(item.children, activeRoute, nextTrail);
+            return childTrail.length > 0 ? childTrail : nextTrail;
+        }
+        return [];
+    }
+    /**
+     * Closes a panel by its ID and all panels opened after it.
+     *
+     * @param panelId - ID of the panel to close.
+     */
+    closePanel(panelId) {
+        const index = this._panelStack().findIndex((p) => p.id === panelId);
+        if (index >= 0) {
+            this.closePanelsFromIndex(index);
+        }
+    }
+    /**
+     * Closes all panels from the given index onward.
+     *
+     * @param index - Zero-based index from which to start closing.
+     */
+    closePanelsFromIndex(index) {
+        this._panelStack.update((stack) => stack.slice(0, index));
+    }
+    /** Closes all open panels. */
+    closeAllPanels() {
+        this._panelStack.set([]);
+    }
+    /**
+     * Performs a drill-down within an existing panel: pushes current items to history
+     * and replaces them with the new item's children.
+     *
+     * @param panelId - ID of the panel to drill down in.
+     * @param parentItem - The item whose children will replace the panel content.
+     * @param items - The new items to display.
+     */
+    drillDownInPanel(panelId, parentItem, items) {
+        this._panelStack.update((stack) => stack.map((panel) => {
+            if (panel.id !== panelId) {
+                return panel;
+            }
+            return {
+                ...panel,
+                history: [
+                    ...panel.history,
+                    { items: panel.items, parentItem: panel.parentItem }
+                ],
+                parentItem,
+                items,
+                isDrillDown: true
+            };
+        }));
+    }
+    /**
+     * Navigates back one level in a panel's drill-down history.
+     * If there is no history, the panel is closed.
+     *
+     * @param panelId - ID of the panel to navigate back in.
+     */
+    navigateBackInPanel(panelId) {
+        const panel = this._panelStack().find((p) => p.id === panelId);
+        if (!panel) {
+            return;
+        }
+        if (panel.history.length === 0) {
+            this.closePanel(panelId);
+            return;
+        }
+        this._panelStack.update((stack) => stack.map((p) => {
+            if (p.id !== panelId) {
+                return p;
+            }
+            const newHistory = [...p.history];
+            const previous = newHistory.pop();
+            return {
+                ...p,
+                items: previous.items,
+                parentItem: previous.parentItem,
+                history: newHistory,
+                isDrillDown: newHistory.length > 0
+            };
+        }));
+    }
+    /**
+     * Retrieves a panel by its ID.
+     *
+     * @param panelId - ID of the panel to find.
+     * @returns The panel state, or `undefined` if not found.
+     */
+    getPanelById(panelId) {
+        return this._panelStack().find((p) => p.id === panelId);
+    }
+    /**
+     * Checks whether there is an open panel whose parent item matches the given ID.
+     *
+     * @param itemId - Parent item ID to match against the panel stack.
+     * @returns `true` when a panel for the given item is currently open.
+     */
+    isPanelOpenForItem(itemId) {
+        return this._panelStack().some((panel) => panel.parentItem.id === itemId);
+    }
+    /**
+     * Resolves the effective expand mode for an item, considering:
+     * 1. Per-item `expandMode` override.
+     * 2. Global `verticalExpandMode` from config.
+     * 3. Fallback to `'accordion'` when collapsed (mobile).
+     *
+     * @param item - The item to resolve the expand mode for.
+     * @returns The effective expand mode.
+     */
+    getEffectiveExpandMode(item) {
+        // In horizontal mode, allow panel mode when explicitly configured.
+        // Otherwise, keep flyout/dropdown behavior.
+        if (this._config().orientation === 'horizontal') {
+            return this._config().verticalExpandMode === 'panel' ? 'panel' : 'flyout';
+        }
+        const mode = item.expandMode ?? this._config().verticalExpandMode;
+        // On mobile (collapsed), panel mode falls back to accordion
+        if (mode === 'panel' && this._collapsed()) {
+            return 'accordion';
+        }
+        return mode;
+    }
+    // ──────────────────────────────────────────────
+    // Active route detection
+    // ──────────────────────────────────────────────
+    /**
+     * Recursively checks whether the given item or any of its descendants
+     * match the provided active route.
+     *
+     * @param item - Item to check.
+     * @param activeRoute - Currently active route path.
+     * @returns `true` if the item or a descendant is active.
+     */
+    isItemOrDescendantActive(item, activeRoute) {
+        if (item.route) {
+            const route = Array.isArray(item.route) ? item.route.join('/') : item.route;
+            const [activePath, activeFragment] = activeRoute.split('#');
+            if (route === activePath) {
+                // When an item defines a fragment, require exact fragment match.
+                if (item.fragment) {
+                    if (item.fragment === activeFragment) {
+                        return true;
+                    }
+                }
+                else {
+                    return true;
+                }
+            }
+            // Also handle activeRoute values without fragment split side effects.
+            if (!item.fragment && route === activeRoute) {
+                return true;
+            }
+        }
+        if (item.children) {
+            return item.children.some((child) => this.isItemOrDescendantActive(child, activeRoute));
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavStateService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Structural directive that projects content into the navigation start slot.
+ *
+ * Slot behavior:
+ * - Horizontal nav: appears at the visual start (left in LTR, right in RTL).
+ * - Vertical nav: appears at the top of the primary column.
+ *
+ * The template receives a {@link HubNavStartTemplateContext}.
+ */
+class HubNavStartDirective {
+    /** Reference to the projected template. */
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HubNavStartDirective, isStandalone: true, selector: "[hubNavStart]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubNavStart]',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Structural directive that projects content into the navigation end slot.
+ *
+ * Slot behavior:
+ * - Horizontal nav: appears at the visual end (right in LTR, left in RTL).
+ * - Vertical nav: appears at the bottom of the primary column.
+ *
+ * The template receives a {@link HubNavEndTemplateContext}.
+ */
+class HubNavEndDirective {
+    /** Reference to the projected template. */
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HubNavEndDirective, isStandalone: true, selector: "[hubNavEnd]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubNavEnd]',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Structural directive that provides a custom template for rendering individual nav items.
+ * When present, each nav item is rendered using this template instead of the default markup.
+ *
+ * The template receives a {@link HubNavItemTemplateContext} with `$implicit` (the item),
+ * `active`, `expanded`, and `depth`.
+ *
+ * @example
+ * ```html
+ * <hub-nav [items]="menuItems">
+ *   <ng-template hubNavItemTemplate let-item let-active="active" let-depth="depth">
+ *     <div class="custom-item" [class.active]="active">
+ *       <i [class]="item.icon"></i>
+ *       {{ item.label }}
+ *     </div>
+ *   </ng-template>
+ * </hub-nav>
+ * ```
+ */
+class HubNavItemTemplateDirective {
+    /** Reference to the template provided by the consumer. */
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: HubNavItemTemplateDirective, isStandalone: true, selector: "[hubNavItemTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubNavItemTemplate]',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Scroll spy container directive that tracks the currently visible section and
+ * emits section changes using `IntersectionObserver`.
+ */
+class HubNavScrollSpyDirective {
+    /** Enables or disables section tracking. */
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : {}), alias: 'hubNavScrollSpy' });
+    /** Top offset in pixels to compensate sticky headers. */
+    offset = input(120, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    /** CSS selector used to locate section elements inside the host container. */
+    sectionSelector = input('[data-hub-nav-scroll-spy-section]', ...(ngDevMode ? [{ debugName: "sectionSelector" }] : []));
+    /** Emits the active section id whenever it changes. */
+    activeSectionChange = output();
+    el = inject((ElementRef));
+    zone = inject(NgZone);
+    observer = null;
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
+    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+    /** Current active section id (readonly signal). */
+    activeSectionId = computed(() => this.activeId(), ...(ngDevMode ? [{ debugName: "activeSectionId" }] : []));
+    configEffect = effect(() => {
+        if (!this.initialized()) {
+            return;
+        }
+        const isEnabled = this.enabled();
+        const topOffset = this.offset();
+        const selector = this.sectionSelector();
+        void topOffset;
+        void selector;
+        if (!isEnabled) {
+            this.destroyObserver();
+            return;
+        }
+        this.scheduleInit();
+    }, ...(ngDevMode ? [{ debugName: "configEffect" }] : []));
+    /** @inheritDoc */
+    ngAfterViewInit() {
+        this.initialized.set(true);
+        if (this.enabled()) {
+            this.scheduleInit();
+        }
+    }
+    /** @inheritDoc */
+    ngOnDestroy() {
+        this.destroyObserver();
+    }
+    /**
+     * Scrolls to a tracked section by id.
+     *
+     * @param sectionId - Target section id.
+     * @param behavior - Native scroll behavior.
+     * @returns `true` when the target exists and scroll was requested.
+     */
+    scrollTo(sectionId, behavior = 'smooth') {
+        const target = this.getSectionElements().find((element) => this.getSectionId(element) === sectionId);
+        if (!target) {
+            return false;
+        }
+        target.scrollIntoView({
+            behavior,
+            block: 'start',
+            inline: 'nearest'
+        });
+        return true;
+    }
+    scheduleInit() {
+        this.zone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.zone.run(() => this.initializeObserver());
+                });
+            });
+        });
+    }
+    initializeObserver() {
+        this.destroyObserver();
+        const sections = this.getSectionElements();
+        if (sections.length === 0) {
+            return;
+        }
+        const topOffset = this.offset();
+        this.observer = new IntersectionObserver((entries) => this.handleObserverEntries(entries), {
+            root: null,
+            rootMargin: `-${topOffset}px 0px -55% 0px`,
+            threshold: [0.05, 0.2, 0.4, 0.6, 0.8]
+        });
+        sections.forEach((section) => this.observer?.observe(section));
+    }
+    destroyObserver() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    getSectionElements() {
+        return Array.from(this.el.nativeElement.querySelectorAll(this.sectionSelector())).filter((node) => node instanceof HTMLElement);
+    }
+    getSectionId(element) {
+        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) {
+            return;
+        }
+        const top = visible[0];
+        const id = this.getSectionId(top.target);
+        if (!id || id === this.activeId()) {
+            return;
+        }
+        this.activeId.set(id);
+        this.activeSectionChange.emit(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavScrollSpyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubNavScrollSpy]',
+                    standalone: true,
+                    exportAs: 'hubNavScrollSpy'
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubNavScrollSpy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], sectionSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionSelector", required: false }] }], activeSectionChange: [{ type: i0.Output, args: ["activeSectionChange"] }] } });
+
+/**
+ * Marks an element as a trackable section for `HubNavScrollSpyDirective`.
+ *
+ * If no explicit section id is provided, the directive falls back to the host
+ * element `id` attribute.
+ */
+class HubNavScrollSpySectionDirective {
+    /** Optional section id. When omitted, host `id` is used. */
+    sectionId = input(null, { ...(ngDevMode ? { debugName: "sectionId" } : {}), alias: 'hubNavScrollSpySection' });
+    el = inject((ElementRef));
+    /** Effective section id exposed to the container directive. */
+    resolvedSectionId = computed(() => this.sectionId() ?? this.el.nativeElement.id ?? null, ...(ngDevMode ? [{ debugName: "resolvedSectionId" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavScrollSpySectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: HubNavScrollSpySectionDirective, isStandalone: true, selector: "[hubNavScrollSpySection]", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "hubNavScrollSpySection", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-hub-nav-scroll-spy-section": "resolvedSectionId() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavScrollSpySectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubNavScrollSpySection]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-hub-nav-scroll-spy-section]': 'resolvedSectionId() || null'
+                    }
+                }]
+        }], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubNavScrollSpySection", required: false }] }] } });
+
+/**
+ * Renders a single navigation item (link, dropdown trigger, header, or custom content).
+ * Handles routing integration, active state, badges, icons, and disabled state.
+ *
+ * @internal Used internally by `HubNavItemListComponent`.
+ */
+class HubNavItemComponent {
+    /** The navigation item data to render. */
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    /** Nesting depth (0 = root). */
+    depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : []));
+    /** Whether this item is currently active (set by parent list). */
+    isActive = input(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    /** Whether the dropdown is currently expanded (only for dropdown items). */
+    isExpanded = input(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    /** Optional custom template for rendering the item content. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    /**
+     * Forces the item to behave as part of a mobile accordion list.
+     * This keeps indicators and layout aligned with the collapsed nav panel.
+     */
+    forceAccordionMode = input(false, ...(ngDevMode ? [{ debugName: "forceAccordionMode" }] : []));
+    /** Emitted when the item is clicked. */
+    clicked = output();
+    /** Emitted when the dropdown toggle is activated. */
+    toggleDropdown = output();
+    /** Reference to the nav state service. */
+    state = inject(HubNavStateService);
+    /** Whether this item has child items. */
+    hasChildren = computed(() => {
+        const children = this.item().children;
+        return !!children && children.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    /** Whether this item is a header type. */
+    isHeader = computed(() => this.item().type === 'header', ...(ngDevMode ? [{ debugName: "isHeader" }] : []));
+    /** Whether this item is a link type. */
+    isLink = computed(() => this.item().type === 'link', ...(ngDevMode ? [{ debugName: "isLink" }] : []));
+    /** Whether this item is a dropdown type. */
+    isDropdown = computed(() => this.item().type === 'dropdown', ...(ngDevMode ? [{ debugName: "isDropdown" }] : []));
+    /** Whether this item is a custom type. */
+    isCustom = computed(() => this.item().type === 'custom', ...(ngDevMode ? [{ debugName: "isCustom" }] : []));
+    /** Resolved route for routerLink binding. */
+    resolvedRoute = computed(() => {
+        const item = this.item();
+        if (!item.route) {
+            return null;
+        }
+        return Array.isArray(item.route) ? item.route : [item.route];
+    }, ...(ngDevMode ? [{ debugName: "resolvedRoute" }] : []));
+    /** Template context for custom item templates. */
+    templateContext = computed(() => ({
+        $implicit: this.item(),
+        active: this.isActive(),
+        expanded: this.isExpanded(),
+        depth: this.depth()
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    /**
+     * Whether the dropdown caret should be visible for this item.
+     * In panel mode, caret is hidden because expansion happens in side panels.
+     */
+    showCaret = computed(() => {
+        if (!(this.isDropdown() || this.hasChildren())) {
+            return false;
+        }
+        if (this.forceAccordionMode()) {
+            return true;
+        }
+        return this.state.getEffectiveExpandMode(this.item()) !== 'panel';
+    }, ...(ngDevMode ? [{ debugName: "showCaret" }] : []));
+    /**
+     * Handles click events on the item.
+     * Delegates to dropdown toggle or emits a click event depending on item type.
+     *
+     * @param event - The original DOM event.
+     */
+    onItemClick(event) {
+        const item = this.item();
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (item.type === 'header' || item.type === 'separator') {
+            event.preventDefault();
+            return;
+        }
+        if (this.hasChildren()) {
+            this.toggleDropdown.emit(item);
+        }
+        this.clicked.emit({ item, event });
+    }
+    /**
+     * Handles clicks on the label/link area of a routable dropdown item.
+     * In this case the click only performs navigation and does not toggle
+     * the submenu; submenu expansion is delegated to the dedicated caret.
+     *
+     * @param event - The original DOM event.
+     */
+    onRouteItemClick(event) {
+        const item = this.item();
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.clicked.emit({ item, event });
+    }
+    /**
+     * Handles clicks on the dedicated caret button for routable dropdown items.
+     * The caret only toggles submenu visibility and must never trigger routing.
+     *
+     * @param event - The original DOM event.
+     */
+    onCaretClick(event) {
+        const item = this.item();
+        event.preventDefault();
+        event.stopPropagation();
+        if (item.disabled || !this.hasChildren()) {
+            return;
+        }
+        this.toggleDropdown.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease);white-space:nowrap;font-family:inherit;line-height: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, #0d6efd);color:var(--hub-nav-item-active-color, #fff);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}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1.25rem);height:var(--hub-nav-icon-size, 1.25rem);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:600;line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:transform var(--hub-nav-item-transition, .15s ease);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-item', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-item',
+                        '[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',
+                        role: 'none'
+                    }, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"'Toggle ' + item().label\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease);white-space:nowrap;font-family:inherit;line-height: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, #0d6efd);color:var(--hub-nav-item-active-color, #fff);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}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease),color var(--hub-nav-item-transition, .15s ease)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1.25rem);height:var(--hub-nav-icon-size, 1.25rem);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:600;line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:transform var(--hub-nav-item-transition, .15s ease);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}\n"] }]
+        }], 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"] }] } });
+
+/**
+ * Visual separator between navigation item groups.
+ * Renders as a horizontal rule in vertical list contexts.
+ * Root horizontal nav bars hide separators because structural grouping
+ * should not consume inline menu space there.
+ *
+ * @internal This component is used internally by `HubNavItemListComponent`.
+ */
+class HubNavSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HubNavSeparatorComponent, isStandalone: true, selector: "hub-nav-separator", host: { attributes: { "role": "separator" }, classAttribute: "hub-nav-separator" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;border:0;opacity:1}:host-context(.hub-nav--horizontal){display:none}:host-context(.hub-nav--vertical){height:0;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-separator-color, var(--hub-sys-border-color-default, #dee2e6));margin:var(--hub-nav-separator-margin-y, .5rem) 0}:host-context(.hub-nav-dropdown),:host-context(.hub-nav-accordion),:host-context(.hub-nav-panel__body),:host-context(.hub-nav-mobile-panel__body){display:block;width:100%;height:0;align-self:stretch;border-left:0;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-separator-color, var(--hub-sys-border-color-default, #dee2e6));margin:var(--hub-nav-separator-margin-y, .5rem) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-separator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-separator',
+                        role: 'separator'
+                    }, template: '', styles: [":host{display:block;border:0;opacity:1}:host-context(.hub-nav--horizontal){display:none}:host-context(.hub-nav--vertical){height:0;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-separator-color, var(--hub-sys-border-color-default, #dee2e6));margin:var(--hub-nav-separator-margin-y, .5rem) 0}:host-context(.hub-nav-dropdown),:host-context(.hub-nav-accordion),:host-context(.hub-nav-panel__body),:host-context(.hub-nav-mobile-panel__body){display:block;width:100%;height:0;align-self:stretch;border-left:0;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-separator-color, var(--hub-sys-border-color-default, #dee2e6));margin:var(--hub-nav-separator-margin-y, .5rem) 0}\n"] }]
+        }] });
+
+/**
+ * Renders a list of navigation items at a given depth level.
+ * Self-recursive: when an item has children and its dropdown is open,
+ * this component renders another `hub-nav-item-list` for the children.
+ *
+ * Includes keyboard navigation following WAI-ARIA menubar/menu patterns.
+ *
+ * @internal Used internally by `HubNavComponent`.
+ */
+class HubNavItemListComponent {
+    /** The list of items to render. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Nesting depth (0 = root level). */
+    depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : []));
+    /** Optional custom template for rendering item content. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    /**
+     * Forces all nested items in this list to use accordion expansion.
+     * Primarily used by the collapsed/mobile panel to avoid flyout/panel
+     * behaviors that are not suitable for small viewports.
+     */
+    forceAccordionMode = input(false, ...(ngDevMode ? [{ debugName: "forceAccordionMode" }] : []));
+    /** Emitted when any item in the list is clicked. */
+    itemClick = output();
+    /** Emitted when a dropdown toggle is requested. */
+    dropdownToggle = output();
+    /** Emitted when an item with panel expand mode is clicked and needs a new panel. */
+    panelOpen = output();
+    /** Reference to the nav state service. */
+    state = inject(HubNavStateService);
+    /** Reference to the Angular router for active state detection. */
+    router = inject(Router);
+    /** Reactive URL value used to recompute active states on navigation changes. */
+    currentUrl = signal(this.router.url, ...(ngDevMode ? [{ debugName: "currentUrl" }] : []));
+    /** Router events subscription lifecycle handle. */
+    routerSub;
+    /** Host element reference. */
+    el = inject((ElementRef));
+    /**
+     * Whether children should render in accordion mode (inline with indentation).
+     * True when orientation is vertical and expand mode is 'accordion'.
+     */
+    isAccordionMode = computed(() => this.forceAccordionMode() ||
+        (this.state.orientation() === 'vertical' && this.state.verticalExpandMode() === 'accordion'), ...(ngDevMode ? [{ debugName: "isAccordionMode" }] : []));
+    /** Whether this is a horizontal root-level nav (affects arrow key mapping). */
+    get isHorizontalRoot() {
+        if (this.forceAccordionMode()) {
+            return false;
+        }
+        return this.state.orientation() === 'horizontal' && this.depth() === 0;
+    }
+    // ──────────────────────────────────────────────
+    // Data methods
+    // ──────────────────────────────────────────────
+    /**
+     * Checks if the given item or any of its descendants is currently active.
+     *
+     * @param item - The item to check.
+     * @returns `true` if the item or a descendant matches the current route.
+     */
+    isItemActive(item) {
+        return this.state.isItemOrDescendantActive(item, this.currentUrl());
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        this.routerSub = this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe(() => {
+            this.currentUrl.set(this.router.url);
+        });
+    }
+    /** @inheritDoc */
+    ngOnDestroy() {
+        this.routerSub?.unsubscribe();
+    }
+    /**
+     * Checks if a dropdown is currently expanded.
+     *
+     * @param item - The dropdown item to check.
+     * @returns `true` if the dropdown is open.
+     */
+    isExpanded(item) {
+        // In panel mode, "expanded" means "there is an open panel for this item".
+        if (this.getItemExpandMode(item) === 'panel') {
+            return this.state.isPanelOpenForItem(item.id);
+        }
+        return this.state.isDropdownOpen(item.id);
+    }
+    /**
+     * Whether the given item has child items.
+     *
+     * @param item - The item to check.
+     * @returns `true` if the item has children.
+     */
+    hasChildren(item) {
+        return !!item.children && item.children.length > 0;
+    }
+    /**
+     * Resolves the effective expand mode for an item.
+     * Considers per-item override, global config, and mobile fallback.
+     *
+     * @param item - The item to resolve the expand mode for.
+     * @returns The effective expand mode.
+     */
+    getItemExpandMode(item) {
+        if (this.forceAccordionMode()) {
+            return 'accordion';
+        }
+        return this.state.getEffectiveExpandMode(item);
+    }
+    // ──────────────────────────────────────────────
+    // Event handlers
+    // ──────────────────────────────────────────────
+    /**
+     * Handles click events from a child item component.
+     *
+     * @param payload - The item and original event.
+     */
+    onItemClick(payload) {
+        this.itemClick.emit(payload);
+    }
+    /**
+     * Handles dropdown toggle events from a child item component.
+     * In panel mode, emits `panelOpen` instead of toggling the dropdown.
+     *
+     * @param item - The dropdown item to toggle.
+     */
+    onDropdownToggle(item) {
+        const mode = this.getItemExpandMode(item);
+        if (mode === 'panel') {
+            this.panelOpen.emit(item);
+            return;
+        }
+        // Get sibling IDs for accordion auto-close behavior
+        const siblingIds = this.items()
+            .filter((i) => i.type === 'dropdown' || this.hasChildren(i))
+            .map((i) => i.id);
+        if (this.state.isDropdownOpen(item.id)) {
+            this.state.closeDropdown(item.id);
+        }
+        else {
+            this.state.openDropdown(item.id, siblingIds);
+        }
+        this.dropdownToggle.emit(item);
+    }
+    /**
+     * Handles hover enter events on items with children.
+     * Opens the dropdown if the trigger mode includes hover.
+     *
+     * @param item - The hovered item.
+     */
+    onItemMouseEnter(item) {
+        if (this.forceAccordionMode()) {
+            return;
+        }
+        const trigger = this.state.dropdownTrigger();
+        if ((trigger === 'hover' || trigger === 'both') && this.hasChildren(item)) {
+            // Get sibling IDs for accordion auto-close behavior
+            const siblingIds = this.items()
+                .filter((i) => i.type === 'dropdown' || this.hasChildren(i))
+                .map((i) => i.id);
+            this.state.openDropdown(item.id, siblingIds);
+        }
+    }
+    /**
+     * Handles hover leave events on items with children.
+     * Closes the dropdown if the trigger mode includes hover.
+     *
+     * @param item - The item that lost hover.
+     */
+    onItemMouseLeave(item) {
+        if (this.forceAccordionMode()) {
+            return;
+        }
+        const trigger = this.state.dropdownTrigger();
+        if ((trigger === 'hover' || trigger === 'both') && this.hasChildren(item)) {
+            this.state.closeDropdown(item.id);
+        }
+    }
+    // ──────────────────────────────────────────────
+    // Keyboard navigation (WAI-ARIA menubar/menu)
+    // ──────────────────────────────────────────────
+    /**
+     * Handles keyboard events for accessible navigation.
+     *
+     * @param event - The keyboard event.
+     */
+    onKeyDown(event) {
+        const items = this.getFocusableItems();
+        const currentIndex = this.getCurrentFocusIndex(items);
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.isHorizontalRoot) {
+                    this.focusItem(items, currentIndex + 1);
+                }
+                else {
+                    this.openFocusedDropdown(items, currentIndex);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.isHorizontalRoot) {
+                    this.focusItem(items, currentIndex - 1);
+                }
+                else {
+                    this.closeFocusedDropdown(items, currentIndex);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.isHorizontalRoot) {
+                    this.openFocusedDropdown(items, currentIndex);
+                }
+                else {
+                    this.focusItem(items, currentIndex + 1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.isHorizontalRoot) {
+                    this.closeFocusedDropdown(items, currentIndex);
+                }
+                else {
+                    this.focusItem(items, currentIndex - 1);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(items, 0);
+                break;
+            case 'End':
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusItem(items, items.length - 1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.state.closeAllDropdowns();
+                // Return focus to parent trigger if in a submenu
+                if (this.depth() > 0) {
+                    const parentWrapper = this.el.nativeElement.closest('.hub-nav-item-wrapper');
+                    const trigger = parentWrapper?.querySelector(':scope > hub-nav-item .hub-nav-item__dropdown-toggle');
+                    trigger?.focus();
+                }
+                break;
+            default:
+                return;
+        }
+    }
+    /** Returns all focusable item elements (direct children only). */
+    getFocusableItems() {
+        const host = this.el.nativeElement;
+        const selectors = ':scope > .hub-nav-item-wrapper > hub-nav-item .hub-nav-item__link,' +
+            ':scope > .hub-nav-item-wrapper > hub-nav-item .hub-nav-item__dropdown-toggle';
+        const elements = host.querySelectorAll(selectors);
+        return Array.from(elements).filter((el) => el.getAttribute('aria-disabled') !== 'true' && el.tabIndex !== -1);
+    }
+    /** Returns the index of the currently focused item. */
+    getCurrentFocusIndex(items) {
+        return items.indexOf(document.activeElement);
+    }
+    /** Moves focus to the item at the given index (wraps around). */
+    focusItem(items, index) {
+        if (items.length === 0) {
+            return;
+        }
+        const wrapped = ((index % items.length) + items.length) % items.length;
+        items[wrapped]?.focus();
+    }
+    /** Opens the dropdown of the focused item and focuses its first child. */
+    openFocusedDropdown(items, currentIndex) {
+        if (currentIndex < 0) {
+            return;
+        }
+        const wrapper = items[currentIndex].closest('.hub-nav-item-wrapper');
+        const itemId = wrapper?.querySelector('hub-nav-item')?.getAttribute('data-item-id');
+        if (itemId) {
+            // Get sibling IDs for accordion auto-close behavior
+            const siblingIds = this.items()
+                .filter((i) => i.type === 'dropdown' || this.hasChildren(i))
+                .map((i) => i.id);
+            this.state.openDropdown(itemId, siblingIds);
+            requestAnimationFrame(() => {
+                const submenu = wrapper?.querySelector('.hub-nav-dropdown, .hub-nav-accordion');
+                const firstChild = submenu?.querySelector('.hub-nav-item__link, .hub-nav-item__dropdown-toggle');
+                firstChild?.focus();
+            });
+        }
+    }
+    /** Closes the dropdown of the focused item. */
+    closeFocusedDropdown(items, currentIndex) {
+        if (currentIndex < 0) {
+            return;
+        }
+        const wrapper = items[currentIndex].closest('.hub-nav-item-wrapper');
+        const itemId = wrapper?.querySelector('hub-nav-item')?.getAttribute('data-item-id');
+        if (itemId && this.state.isDropdownOpen(itemId)) {
+            this.state.closeDropdown(itemId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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 } }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-item-list--force-accordion": "forceAccordionMode()", "attr.role": "depth() === 0 ? \"menubar\" : \"menu\"" }, classAttribute: "hub-nav-item-list" }, 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\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<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel') {\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(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t(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-z-index, 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, .375rem);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"], 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: "21.1.2", 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()',
+                        '[attr.role]': 'depth() === 0 ? "menubar" : "menu"'
+                    }, 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\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<!-- Children: accordion (inline), flyout/dropdown (positioned), or panel (external) -->\n\t\t\t@if (hasChildren(item) && isExpanded(item) && getItemExpandMode(item) !== 'panel') {\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(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t\t\t\t\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Flyout / Dropdown: positioned panel -->\n\t\t\t\t\t<div class=\"hub-nav-dropdown\" role=\"menu\">\n\t\t\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t\t\t[items]=\"item.children!\"\n\t\t\t\t\t\t\t[depth]=\"depth() + 1\"\n\t\t\t\t\t\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t\t\t\t\t\t[forceAccordionMode]=\"forceAccordionMode()\"\n\t\t\t\t\t\t\t(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-z-index, 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, .375rem);box-shadow:var(--hub-nav-dropdown-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));padding:var(--hub-nav-dropdown-padding-y, .5rem) 0}.hub-nav-accordion{overflow:hidden;animation:hubNavAccordionExpand var(--hub-nav-accordion-transition, .35s ease) forwards}@keyframes hubNavAccordionExpand{0%{max-height:0;opacity:0}to{max-height:100vh;opacity:1}}:host-context(.hub-nav--horizontal){flex-direction:row;align-items:center}:host-context(.hub-nav--horizontal)>.hub-nav-item-wrapper{flex:0 0 auto}:host-context(.hub-nav--horizontal) .hub-nav-item-wrapper>.hub-nav-dropdown{top:100%;left:0;margin-top:4px}:host-context(.hub-nav--horizontal) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-top:0;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px}:host-context(.hub-nav--vertical) .hub-nav-dropdown .hub-nav-item-wrapper>.hub-nav-dropdown{top:0;left:100%;margin-left:4px;margin-top:0}:host-context(.hub-nav-dropdown){flex-direction:column;align-items:stretch}:host-context(.hub-nav-accordion){flex-direction:column;align-items:stretch}:host(.hub-nav-item-list--force-accordion){width:100%;flex-direction:column;align-items:stretch;gap:var(--hub-nav-mobile-accordion-gap, .25rem)}:host(.hub-nav-item-list--force-accordion)>.hub-nav-item-wrapper{display:block;width:100%;flex:1 1 auto}:host(.hub-nav-item-list--force-accordion) .hub-nav-item-wrapper>.hub-nav-dropdown{position:static;top:auto;left:auto;margin:0;min-width:0;width:100%;box-shadow:none}:host(.hub-nav-item-list--force-accordion) .hub-nav-accordion{margin-block-start:var(--hub-nav-mobile-accordion-nested-spacing, .25rem)}@media(prefers-reduced-motion:reduce){.hub-nav-accordion{animation:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], forceAccordionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceAccordionMode", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Hamburger toggle button that shows/hides the mobile navigation panel.
+ * Renders an animated three-line icon that transforms into an X when open.
+ *
+ * @internal Used internally by `HubNavComponent` when the viewport is below the collapse breakpoint.
+ */
+class HubNavTogglerComponent {
+    /** Whether the mobile panel is currently open. */
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Emitted when the toggler is clicked. */
+    toggle = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: HubNavTogglerComponent, isStandalone: true, selector: "hub-nav-toggler", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, host: { classAttribute: "hub-nav-toggler" }, ngImport: i0, template: `
+		<button
+			type="button"
+			class="hub-nav-toggler__button"
+			[class.hub-nav-toggler__button--open]="isOpen()"
+			[attr.aria-expanded]="isOpen()"
+			aria-label="Toggle navigation"
+			(click)="toggle.emit()"
+		>
+			<span class="hub-nav-toggler__icon">
+				<span class="hub-nav-toggler__bar"></span>
+				<span class="hub-nav-toggler__bar"></span>
+				<span class="hub-nav-toggler__bar"></span>
+			</span>
+		</button>
+	`, isInline: true, styles: [":host{display:inline-flex;flex-shrink:0}.hub-nav-toggler__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-toggler-padding-y, .25rem) var(--hub-nav-toggler-padding-x, .5rem);font-size:var(--hub-nav-toggler-font-size, 1.25rem);color:var(--hub-nav-toggler-color, #212529);background:none;border:1px solid var(--hub-nav-toggler-border-color, #dee2e6);border-radius:var(--hub-nav-toggler-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease)}.hub-nav-toggler__button:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-toggler__button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-toggler__icon{display:flex;flex-direction:column;gap:4px;width:1.5em;height:1.5em;justify-content:center}.hub-nav-toggler__bar{display:block;width:100%;height:2px;background-color:currentColor;border-radius:1px;transition:transform .3s ease,opacity .3s ease;transform-origin:center}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(2){opacity:0}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.hub-nav-toggler__bar{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavTogglerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-toggler', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-toggler'
+                    }, template: `
+		<button
+			type="button"
+			class="hub-nav-toggler__button"
+			[class.hub-nav-toggler__button--open]="isOpen()"
+			[attr.aria-expanded]="isOpen()"
+			aria-label="Toggle navigation"
+			(click)="toggle.emit()"
+		>
+			<span class="hub-nav-toggler__icon">
+				<span class="hub-nav-toggler__bar"></span>
+				<span class="hub-nav-toggler__bar"></span>
+				<span class="hub-nav-toggler__bar"></span>
+			</span>
+		</button>
+	`, styles: [":host{display:inline-flex;flex-shrink:0}.hub-nav-toggler__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-toggler-padding-y, .25rem) var(--hub-nav-toggler-padding-x, .5rem);font-size:var(--hub-nav-toggler-font-size, 1.25rem);color:var(--hub-nav-toggler-color, #212529);background:none;border:1px solid var(--hub-nav-toggler-border-color, #dee2e6);border-radius:var(--hub-nav-toggler-border-radius, .25rem);cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease)}.hub-nav-toggler__button:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-toggler__button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-toggler__icon{display:flex;flex-direction:column;gap:4px;width:1.5em;height:1.5em;justify-content:center}.hub-nav-toggler__bar{display:block;width:100%;height:2px;background-color:currentColor;border-radius:1px;transition:transform .3s ease,opacity .3s ease;transform-origin:center}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(2){opacity:0}.hub-nav-toggler__button--open .hub-nav-toggler__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.hub-nav-toggler__bar{transition:none}}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
+
+/**
+ * Mobile navigation panel that renders when the viewport is below the collapse breakpoint.
+ * Supports three display modes: offcanvas (slide-in drawer), dropdown (panel below toggler),
+ * and fullscreen (overlay).
+ *
+ * @internal Used internally by `HubNavComponent`.
+ */
+class HubNavMobilePanelComponent {
+    /** Navigation items to render in the panel. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Whether the panel is currently open. */
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Collapse display mode. */
+    mode = input('offcanvas', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Offcanvas slide-in direction. */
+    offcanvasPosition = input('start', ...(ngDevMode ? [{ debugName: "offcanvasPosition" }] : []));
+    /** Emitted when the close button or backdrop is clicked. */
+    closePanel = output();
+    /** Emitted when an item is clicked. */
+    itemClick = output();
+    /** Emitted when a dropdown toggle is requested. */
+    dropdownToggle = output();
+    /**
+     * Handles backdrop click to close the panel.
+     */
+    onBackdropClick() {
+        this.closePanel.emit();
+    }
+    /**
+     * Handles close button click.
+     */
+    onCloseClick() {
+        this.closePanel.emit();
+    }
+    /**
+     * Handles item click events from the inner list.
+     *
+     * @param payload - The clicked item and original event.
+     */
+    onItemClick(payload) {
+        this.itemClick.emit(payload);
+        // Close panel whenever the click performed a route navigation.
+        // Dropdown caret toggles do not reach this handler.
+        if (payload.item.route) {
+            this.closePanel.emit();
+        }
+    }
+    /**
+     * Handles dropdown toggle events from the inner list.
+     *
+     * @param item - The dropdown item.
+     */
+    onDropdownToggle(item) {
+        this.dropdownToggle.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavMobilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubNavMobilePanelComponent, isStandalone: true, selector: "hub-nav-mobile-panel", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offcanvasPosition: { classPropertyName: "offcanvasPosition", publicName: "offcanvasPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { properties: { "class.hub-nav-mobile-panel--open": "isOpen()", "class.hub-nav-mobile-panel--offcanvas": "mode() === \"offcanvas\"", "class.hub-nav-mobile-panel--dropdown": "mode() === \"dropdown\"", "class.hub-nav-mobile-panel--fullscreen": "mode() === \"fullscreen\"", "class.hub-nav-mobile-panel--start": "offcanvasPosition() === \"start\"", "class.hub-nav-mobile-panel--end": "offcanvasPosition() === \"end\"", "class.hub-nav-mobile-panel--top": "offcanvasPosition() === \"top\"", "class.hub-nav-mobile-panel--bottom": "offcanvasPosition() === \"bottom\"" }, classAttribute: "hub-nav-mobile-panel" }, ngImport: i0, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-z-index, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-z-index, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #fff));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:transform var(--hub-nav-mobile-transition, .3s ease);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavMobilePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-mobile-panel', standalone: true, imports: [HubNavItemListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-mobile-panel',
+                        '[class.hub-nav-mobile-panel--open]': 'isOpen()',
+                        '[class.hub-nav-mobile-panel--offcanvas]': 'mode() === "offcanvas"',
+                        '[class.hub-nav-mobile-panel--dropdown]': 'mode() === "dropdown"',
+                        '[class.hub-nav-mobile-panel--fullscreen]': 'mode() === "fullscreen"',
+                        '[class.hub-nav-mobile-panel--start]': 'offcanvasPosition() === "start"',
+                        '[class.hub-nav-mobile-panel--end]': 'offcanvasPosition() === "end"',
+                        '[class.hub-nav-mobile-panel--top]': 'offcanvasPosition() === "top"',
+                        '[class.hub-nav-mobile-panel--bottom]': 'offcanvasPosition() === "bottom"'
+                    }, template: "@if (isOpen()) {\n\t<!-- Backdrop (offcanvas and fullscreen modes) -->\n\t@if (mode() !== 'dropdown') {\n\t\t<div class=\"hub-nav-mobile-panel__backdrop\" (click)=\"onBackdropClick()\"></div>\n\t}\n\n\t<!-- Panel content -->\n\t<div class=\"hub-nav-mobile-panel__content\">\n\t\t<!-- Close button -->\n\t\t<div class=\"hub-nav-mobile-panel__header\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-mobile-panel__close\"\n\t\t\t\taria-label=\"Close navigation\"\n\t\t\t\t(click)=\"onCloseClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- Navigation items in vertical accordion mode -->\n\t\t<div class=\"hub-nav-mobile-panel__body\">\n\t\t\t<hub-nav-item-list\n\t\t\t\t[items]=\"items()\"\n\t\t\t\t[depth]=\"0\"\n\t\t\t\t[forceAccordionMode]=\"true\"\n\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n}\n", styles: [".hub-nav-mobile-panel__backdrop{position:var(--hub-nav-mobile-overlay-position, fixed);inset:0;z-index:calc(var(--hub-nav-mobile-z-index, 1030) - 1);background-color:var(--hub-nav-mobile-backdrop-bg, rgba(0, 0, 0, .5))}.hub-nav-mobile-panel__content{position:var(--hub-nav-mobile-overlay-position, fixed);z-index:var(--hub-nav-mobile-z-index, 1030);display:flex;flex-direction:column;background-color:var(--hub-nav-mobile-bg, var(--hub-sys-surface-elevated, #fff));color:var(--hub-nav-mobile-color, var(--hub-sys-text-primary, #212529));transition:transform var(--hub-nav-mobile-transition, .3s ease);overflow-y:auto}.hub-nav-mobile-panel__header{display:flex;justify-content:flex-end;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem)}.hub-nav-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;line-height:1;color:var(--hub-nav-color, #212529);background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer}.hub-nav-mobile-panel__close:hover{background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04))}.hub-nav-mobile-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-mobile-panel__body{flex:1;padding:0 var(--hub-nav-mobile-body-padding-inline, var(--hub-nav-padding-x, 1rem)) var(--hub-nav-mobile-body-padding-block-end, var(--hub-nav-padding-y, .5rem));--hub-nav-item-padding-x: var(--hub-nav-mobile-item-padding-inline, .75rem)}.hub-nav-mobile-panel__body>hub-nav-item-list{display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--hub-nav-mobile-root-padding-inline, .5rem);box-sizing:border-box}:host(.hub-nav-mobile-panel--offcanvas) .hub-nav-mobile-panel__content{width:var(--hub-nav-mobile-width, 18rem);height:100%;box-shadow:var(--hub-nav-mobile-shadow, 0 .5rem 1rem rgba(0, 0, 0, .18));border-inline-end:1px solid var(--hub-nav-mobile-border-color, rgba(0, 0, 0, .08))}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--start .hub-nav-mobile-panel__content{top:0;left:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--end .hub-nav-mobile-panel__content{top:0;right:0}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--top .hub-nav-mobile-panel__content{top:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--offcanvas).hub-nav-mobile-panel--bottom .hub-nav-mobile-panel__content{bottom:0;left:0;width:100%;height:auto;max-height:80vh}:host(.hub-nav-mobile-panel--dropdown) .hub-nav-mobile-panel__content{position:relative;width:100%;border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__content{inset:0;width:100%;height:100%}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}:host(.hub-nav-mobile-panel--fullscreen) .hub-nav-mobile-panel__body hub-nav-item-list{width:100%;max-width:20rem}:host:not(.hub-nav-mobile-panel--open){display:none}@media(prefers-reduced-motion:reduce){.hub-nav-mobile-panel__content{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offcanvasPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "offcanvasPosition", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }] } });
+
+/**
+ * Renders a single side panel in the stacked panel navigation.
+ * Contains a header with the parent item's label (plus back/close buttons)
+ * and a body with a `hub-nav-item-list` for the panel's items.
+ *
+ * Includes keyboard navigation:
+ * - **Escape**: closes the panel and returns focus to the parent trigger.
+ * - **ArrowLeft**: navigates back (if drill-down) or closes the panel.
+ *
+ * @internal Used internally by `HubNavPanelContainerComponent`.
+ */
+class HubNavPanelComponent {
+    /** The panel state to render. */
+    panel = input.required(...(ngDevMode ? [{ debugName: "panel" }] : []));
+    /** Width of this panel (CSS value). */
+    panelWidth = input('16rem', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** Optional custom template for rendering item content. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    /**
+     * Controls whether the panel header is rendered.
+     * Used by horizontal layouts to avoid duplicating the selected root item
+     * title when that item is already visible in the top row.
+     */
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    /** Emitted when the panel close button is clicked. Carries the panel ID. */
+    closePanel = output();
+    /** Emitted when the back button is clicked. Carries the panel ID. */
+    backClick = output();
+    /** Emitted when an item in the panel is clicked. */
+    itemClick = output();
+    /** Emitted when a dropdown toggle is requested within the panel. */
+    dropdownToggle = output();
+    /** Emitted when an item with panel expand mode is clicked (needs a new panel). */
+    panelOpen = output();
+    /** Host element reference. */
+    el = inject((ElementRef));
+    /** The label displayed in the panel header. */
+    currentLabel = computed(() => this.panel().parentItem.label, ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
+    /** Accessible label for the panel navigation landmark. */
+    ariaLabel = computed(() => `${this.panel().parentItem.label} navigation`, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Handles keyboard events for panel navigation.
+     *
+     * @param event - The keyboard event.
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.closePanel.emit(this.panel().id);
+                break;
+            case 'ArrowLeft':
+                // Only handle ArrowLeft at the panel level (not inside item-list submenus)
+                if (this.isDirectPanelFocus(event.target)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this.panel().isDrillDown) {
+                        this.backClick.emit(this.panel().id);
+                    }
+                    else {
+                        this.closePanel.emit(this.panel().id);
+                    }
+                }
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Handles close button click.
+     */
+    onCloseClick() {
+        this.closePanel.emit(this.panel().id);
+    }
+    /**
+     * Handles back button click for drill-down navigation.
+     */
+    onBackClick() {
+        this.backClick.emit(this.panel().id);
+    }
+    /**
+     * Forwards item click events from the inner item list.
+     *
+     * @param payload - The clicked item and DOM event.
+     */
+    onItemClick(payload) {
+        this.itemClick.emit(payload);
+    }
+    /**
+     * Forwards dropdown toggle events from the inner item list.
+     *
+     * @param item - The dropdown item that was toggled.
+     */
+    onDropdownToggle(item) {
+        this.dropdownToggle.emit(item);
+    }
+    /**
+     * Forwards panel open events from the inner item list.
+     *
+     * @param item - The item requesting a new panel.
+     */
+    onPanelOpen(item) {
+        this.panelOpen.emit(item);
+    }
+    /**
+     * Focuses the first focusable item inside this panel.
+     */
+    focusFirstItem() {
+        requestAnimationFrame(() => {
+            const firstItem = this.el.nativeElement.querySelector('.hub-nav-item__link, .hub-nav-item__caret-button, .hub-nav-item__dropdown-toggle');
+            firstItem?.focus();
+        });
+    }
+    /**
+     * Checks whether the event target is a direct child of this panel's item-list
+     * (not inside a nested flyout/accordion submenu rendered by descendants).
+     *
+     * @param target - The DOM element that received the event.
+     * @returns `true` if the target belongs directly to this panel's navigation items.
+     */
+    isDirectPanelFocus(target) {
+        const owningList = target.closest('hub-nav-item-list');
+        const directList = this.el.nativeElement.querySelector(':scope > .hub-nav-panel__body > hub-nav-item-list');
+        return !!owningList && owningList === directList;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubNavPanelComponent, isStandalone: true, selector: "hub-nav-panel", inputs: { panel: { classPropertyName: "panel", publicName: "panel", isSignal: true, isRequired: true, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", backClick: "backClick", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { attributes: { "role": "navigation", "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.hub-nav-panel--drill-down": "panel().isDrillDown", "style.width": "panelWidth()", "attr.aria-label": "ariaLabel()" }, classAttribute: "hub-nav-panel" }, ngImport: i0, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-z-index, 100);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:1.25rem;cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 999px)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"], dependencies: [{ kind: "component", type: HubNavItemListComponent, selector: "hub-nav-item-list", inputs: ["items", "depth", "itemTemplate", "forceAccordionMode"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-panel', standalone: true, imports: [HubNavItemListComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-panel',
+                        '[class.hub-nav-panel--drill-down]': 'panel().isDrillDown',
+                        '[style.width]': 'panelWidth()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        tabindex: '-1'
+                    }, template: "@if (showHeader()) {\n\t<div class=\"hub-nav-panel__header\">\n\t\t@if (panel().isDrillDown) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-panel__back\"\n\t\t\t\taria-label=\"Go back\"\n\t\t\t\t(click)=\"onBackClick()\"\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\">&#8592;</span>\n\t\t\t</button>\n\t\t}\n\t\t<span class=\"hub-nav-panel__title\">{{ currentLabel() }}</span>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-nav-panel__close\"\n\t\t\taria-label=\"Close panel\"\n\t\t\t(click)=\"onCloseClick()\"\n\t\t>\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n}\n\n<div class=\"hub-nav-panel__body\">\n\t<hub-nav-item-list\n\t\t[items]=\"panel().items\"\n\t\t[depth]=\"0\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t(itemClick)=\"onItemClick($event)\"\n\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t/>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-width:0;flex-shrink:0;position:relative;z-index:var(--hub-nav-panel-z-index, 100);background:var(--hub-nav-panel-bg);color:var(--hub-nav-panel-color);border-inline-start:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:var(--hub-nav-panel-shadow);overflow:hidden}:host-context(.hub-nav--horizontal){width:100%!important;height:auto;min-height:0;flex-direction:row;border-inline-start:none;border-inline-end:none;border-top:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);box-shadow:none;animation:none}.hub-nav-panel__header{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);height:var(--hub-nav-panel-header-height);min-height:var(--hub-nav-panel-header-height);padding:0 var(--hub-nav-panel-header-padding-x);background:var(--hub-nav-panel-header-bg);border-bottom:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color);font-size:var(--hub-nav-panel-header-font-size);font-weight:var(--hub-nav-panel-header-font-weight)}:host-context(.hub-nav--horizontal) .hub-nav-panel__header{flex:0 0 var(--hub-nav-panel-width, 16rem);height:auto;min-height:0;max-height:none;border-bottom:none;border-inline-end:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}:host-context(.hub-nav--horizontal):host-context([dir=rtl]) .hub-nav-panel__header{order:2;border-inline-end:none;border-inline-start:var(--hub-nav-panel-border-width, 1px) solid var(--hub-nav-panel-header-border-color)}.hub-nav-panel__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-nav-panel__back,.hub-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-panel-back-size);height:var(--hub-nav-panel-back-size);padding:0;border:none;border-radius:var(--hub-nav-item-border-radius, .25rem);background:none;color:var(--hub-nav-panel-back-color);font-size:1.25rem;cursor:pointer;transition:background-color var(--hub-nav-item-transition, .15s ease);flex-shrink:0}.hub-nav-panel__back:hover,.hub-nav-panel__close:hover{background:var(--hub-nav-panel-back-hover-bg)}.hub-nav-panel__back:focus-visible,.hub-nav-panel__close:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-panel__close{margin-inline-start:auto}.hub-nav-panel__body{flex:1;overflow-y:auto;overflow-x:hidden;padding-block:var(--hub-nav-vertical-panel-padding-block, 0);padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}.hub-nav-panel__body::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}.hub-nav-panel__body::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 999px)}.hub-nav-panel__body::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body{display:flex;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;overflow-y:hidden;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0)}:host-context(.hub-nav--horizontal) .hub-nav-panel__body>hub-nav-item-list{flex:0 0 auto;width:max-content;min-width:max-content;margin-inline:auto}:host{animation:hubNavPanelEnter .3s ease forwards}@keyframes hubNavPanelEnter{0%{opacity:0;transform:translate(-1rem)}to{opacity:1;transform:translate(0)}}:host-context(.hub-nav-panel-container--right){border-inline-start:none;border-inline-end:var(--hub-nav-panel-border-width) solid var(--hub-nav-panel-border-color);animation-name:hubNavPanelEnterRight}@keyframes hubNavPanelEnterRight{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:hubNavPanelDrillDown .2s ease forwards}@keyframes hubNavPanelDrillDown{0%{opacity:0;transform:translate(.5rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host(.hub-nav-panel--drill-down) .hub-nav-panel__body{animation:none}}\n"] }]
+        }], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panel", required: true }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], backClick: [{ type: i0.Output, args: ["backClick"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Container that renders the stack of side panels in a horizontal flex layout.
+ * Panels are stacked left-to-right or right-to-left depending on `sidebarSide`.
+ *
+ * @internal Used internally by `HubNavComponent`.
+ */
+class HubNavPanelContainerComponent {
+    /** Array of panel states to render. */
+    panels = input.required(...(ngDevMode ? [{ debugName: "panels" }] : []));
+    /** Physical side where the sidebar is placed. */
+    sidebarSide = input('left', ...(ngDevMode ? [{ debugName: "sidebarSide" }] : []));
+    /** Width for each panel. */
+    panelWidth = input('16rem', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** Optional custom template for rendering item content. */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    /**
+     * When true, the first panel hides its header while it is not in drill-down
+     * mode. This is primarily used by horizontal nav where the selected root
+     * item is already visible in the top row.
+     */
+    hideFirstPanelHeader = input(false, ...(ngDevMode ? [{ debugName: "hideFirstPanelHeader" }] : []));
+    /** Emitted when a panel close button is clicked. Carries the panel ID. */
+    panelClose = output();
+    /** Emitted when a panel back button is clicked. Carries the panel ID. */
+    panelBack = output();
+    /** Emitted when an item inside a panel is clicked. */
+    itemClick = output();
+    /** Emitted when a dropdown toggle is requested inside a panel. */
+    dropdownToggle = output();
+    /** Emitted when an item inside a panel requests a new panel. */
+    panelOpen = output();
+    /**
+     * Resolves whether a panel header should be rendered for a given index.
+     *
+     * When `hideFirstPanelHeader` is true (used in layouts where parent context
+     * is always visible as a sibling column), headers are suppressed on all panels
+     * that are not in drill-down mode. A header is only shown when the panel is in
+     * drill-down mode — meaning its parent level has been replaced and is no longer
+     * visible.
+     *
+     * @param index - Zero-based panel index in the rendered stack.
+     * @param panel - Panel state at the given index.
+     * @returns `true` when the header should be visible.
+     */
+    shouldShowHeader(index, panel) {
+        if (!this.hideFirstPanelHeader()) {
+            return true;
+        }
+        // Only show header when the parent context is no longer visible as a
+        // sibling column (drill-down replaced it). When all parent levels are
+        // visible, no header is needed — the panel is closed by re-clicking
+        // the parent item in the sidebar.
+        return panel.isDrillDown;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavPanelContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubNavPanelContainerComponent, isStandalone: true, selector: "hub-nav-panel-container", inputs: { panels: { classPropertyName: "panels", publicName: "panels", isSignal: true, isRequired: true, transformFunction: null }, sidebarSide: { classPropertyName: "sidebarSide", publicName: "sidebarSide", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, hideFirstPanelHeader: { classPropertyName: "hideFirstPanelHeader", publicName: "hideFirstPanelHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose", panelBack: "panelBack", itemClick: "itemClick", dropdownToggle: "dropdownToggle", panelOpen: "panelOpen" }, host: { properties: { "class.hub-nav-panel-container--left": "sidebarSide() === \"left\"", "class.hub-nav-panel-container--right": "sidebarSide() === \"right\"" }, classAttribute: "hub-nav-panel-container" }, ngImport: i0, template: "@for (panel of panels(); track panel.id; let index = $index) {\n\t<hub-nav-panel\n\t\t[panel]=\"panel\"\n\t\t[panelWidth]=\"panelWidth()\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[showHeader]=\"shouldShowHeader(index, panel)\"\n\t\t(closePanel)=\"panelClose.emit($event)\"\n\t\t(backClick)=\"panelBack.emit($event)\"\n\t\t(itemClick)=\"itemClick.emit($event)\"\n\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t/>\n}\n", styles: [":host{display:flex;height:100%;align-items:stretch}:host>hub-nav-panel{height:100%}:host(.hub-nav-panel-container--left){flex-direction:row}:host(.hub-nav-panel-container--right){flex-direction:row-reverse}:host-context(.hub-nav--horizontal){display:block;width:100%;height:auto;min-width:0}:host-context(.hub-nav--horizontal)>hub-nav-panel{height:auto;min-width:0}\n"], dependencies: [{ kind: "component", type: HubNavPanelComponent, selector: "hub-nav-panel", inputs: ["panel", "panelWidth", "itemTemplate", "showHeader"], outputs: ["closePanel", "backClick", "itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavPanelContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav-panel-container', standalone: true, imports: [HubNavPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav-panel-container',
+                        '[class.hub-nav-panel-container--left]': 'sidebarSide() === "left"',
+                        '[class.hub-nav-panel-container--right]': 'sidebarSide() === "right"'
+                    }, template: "@for (panel of panels(); track panel.id; let index = $index) {\n\t<hub-nav-panel\n\t\t[panel]=\"panel\"\n\t\t[panelWidth]=\"panelWidth()\"\n\t\t[itemTemplate]=\"itemTemplate()\"\n\t\t[showHeader]=\"shouldShowHeader(index, panel)\"\n\t\t(closePanel)=\"panelClose.emit($event)\"\n\t\t(backClick)=\"panelBack.emit($event)\"\n\t\t(itemClick)=\"itemClick.emit($event)\"\n\t\t(dropdownToggle)=\"dropdownToggle.emit($event)\"\n\t\t(panelOpen)=\"panelOpen.emit($event)\"\n\t/>\n}\n", styles: [":host{display:flex;height:100%;align-items:stretch}:host>hub-nav-panel{height:100%}:host(.hub-nav-panel-container--left){flex-direction:row}:host(.hub-nav-panel-container--right){flex-direction:row-reverse}:host-context(.hub-nav--horizontal){display:block;width:100%;height:auto;min-width:0}:host-context(.hub-nav--horizontal)>hub-nav-panel{height:auto;min-width:0}\n"] }]
+        }], propDecorators: { panels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panels", required: true }] }], sidebarSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarSide", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], hideFirstPanelHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFirstPanelHeader", required: false }] }], panelClose: [{ type: i0.Output, args: ["panelClose"] }], panelBack: [{ type: i0.Output, args: ["panelBack"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownToggle: [{ type: i0.Output, args: ["dropdownToggle"] }], panelOpen: [{ type: i0.Output, args: ["panelOpen"] }] } });
+
+/**
+ * Root navigation component. Renders a horizontal or vertical navigation bar
+ * with support for nested dropdowns, responsive collapsing, brand slot, panel
+ * drill-down navigation, and custom item templates.
+ *
+ * @example
+ * ```html
+ * <hub-nav [items]="menuItems" [config]="{ orientation: 'horizontal' }" />
+ * ```
+ */
+class HubNavComponent {
+    /**
+     * Last route path (without query/fragment) used to synchronize panel state.
+     * Prevents unnecessary panel rebuilds on fragment-only navigations, e.g.
+     * scroll-spy updates in documentation pages.
+     */
+    _lastSyncedPath = '';
+    /** Navigation items to render. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Partial configuration overrides (merged with global defaults). */
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Additional CSS class for the nav container. */
+    navClass = input('', ...(ngDevMode ? [{ debugName: "navClass" }] : []));
+    /** Optional custom template for rendering nav items (via input binding). */
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    /**
+     * When `true`, the component automatically opens the panels matching the
+     * active router URL on initialization and on every subsequent navigation.
+     * Useful for sidebar navigations where the URL should drive the open state.
+     */
+    autoOpenFromRoute = input(false, ...(ngDevMode ? [{ debugName: "autoOpenFromRoute" }] : []));
+    /** Start slot template projected via `hubNavStart` directive. */
+    startDirective = contentChild(HubNavStartDirective, ...(ngDevMode ? [{ debugName: "startDirective" }] : []));
+    /** End slot template projected via `hubNavEnd` directive. */
+    endDirective = contentChild(HubNavEndDirective, ...(ngDevMode ? [{ debugName: "endDirective" }] : []));
+    /** Item template projected via `hubNavItemTemplate` directive. */
+    itemTemplateDirective = contentChild(HubNavItemTemplateDirective, ...(ngDevMode ? [{ debugName: "itemTemplateDirective" }] : []));
+    /** Resolved start slot template (from directive content projection). */
+    startTemplate = computed(() => this.startDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "startTemplate" }] : []));
+    /** Resolved end slot template (from directive content projection). */
+    endTemplate = computed(() => this.endDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "endTemplate" }] : []));
+    /** Resolved item template: directive takes priority over input. */
+    resolvedItemTemplate = computed(() => this.itemTemplateDirective()?.template ?? this.itemTemplate(), ...(ngDevMode ? [{ debugName: "resolvedItemTemplate" }] : []));
+    /** Start slot context. */
+    startContext = computed(() => ({
+        collapsed: this.state.collapsed()
+    }), ...(ngDevMode ? [{ debugName: "startContext" }] : []));
+    /** End slot context. */
+    endContext = computed(() => ({
+        collapsed: this.state.collapsed()
+    }), ...(ngDevMode ? [{ debugName: "endContext" }] : []));
+    /** Emitted when a link item is clicked. */
+    itemClick = output();
+    /** Emitted when a dropdown opens. */
+    dropdownOpen = output();
+    /** Emitted when a dropdown closes. */
+    dropdownClose = output();
+    /** Emitted when the mobile panel toggles. */
+    mobileToggle = output();
+    /** Emitted when a panel is opened, drilled-down, or navigated back. */
+    panelChange = output();
+    /** Global config service. */
+    configService = inject(HubNavConfigService);
+    /** Scoped state service (provided per component). */
+    state = inject(HubNavStateService);
+    /** Host element reference for click-outside detection. */
+    elementRef = inject(ElementRef);
+    /** NgZone for running outside-click handler inside Angular. */
+    zone = inject(NgZone);
+    /** Angular router for URL-based panel initialization. */
+    router = inject(Router);
+    /** Whether component lifecycle initialization has completed. */
+    initialized = false;
+    /** Last applied config signature used to prevent reactive no-op loops. */
+    lastAppliedConfigSignature = '';
+    /** Last breakpoint-related signature used to avoid redundant listener rebinds. */
+    lastBreakpointSignature = '';
+    /** Subscription for router NavigationEnd events. */
+    routerSub;
+    /** Media query list for responsive breakpoint detection. */
+    mediaQuery = null;
+    /** Bound handler for media query changes. */
+    mediaQueryHandler = () => this.refreshCollapsedState();
+    /** Bound handler for window resize fallback. */
+    resizeHandler = () => this.refreshCollapsedState();
+    /** Bound handler for document click events (click-outside). */
+    documentClickHandler = null;
+    /** Resolved config = global defaults + component overrides. */
+    resolvedConfig = computed(() => this.configService.resolve(this.config()), ...(ngDevMode ? [{ debugName: "resolvedConfig" }] : []));
+    /** Shortcut to resolved orientation. */
+    resolvedOrientation = computed(() => this.resolvedConfig().orientation, ...(ngDevMode ? [{ debugName: "resolvedOrientation" }] : []));
+    /** Whether panels are currently active (panel stack is non-empty). */
+    hasPanels = computed(() => this.state.panelCount() > 0, ...(ngDevMode ? [{ debugName: "hasPanels" }] : []));
+    /** The sidebar side from resolved config. */
+    sidebarSide = computed(() => this.resolvedConfig().sidebarSide, ...(ngDevMode ? [{ debugName: "sidebarSide" }] : []));
+    /** The panel width from resolved config. */
+    panelWidth = computed(() => this.resolvedConfig().panelWidth, ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    /** Sync config to state service whenever it changes. */
+    configEffect = effect(() => {
+        const resolvedConfig = this.resolvedConfig();
+        const nextConfigSignature = this.buildConfigSignature(resolvedConfig);
+        const nextBreakpointSignature = this.buildBreakpointSignature(resolvedConfig);
+        if (nextConfigSignature !== this.lastAppliedConfigSignature) {
+            this.lastAppliedConfigSignature = nextConfigSignature;
+            this.state.setConfig(resolvedConfig);
+        }
+        if (this.initialized && nextBreakpointSignature !== this.lastBreakpointSignature) {
+            this.lastBreakpointSignature = nextBreakpointSignature;
+            this.teardownBreakpointListener();
+            this.setupBreakpointListener();
+        }
+    }, ...(ngDevMode ? [{ debugName: "configEffect" }] : []));
+    /** ARIA label for the nav element. */
+    ariaLabel = computed(() => this.resolvedConfig().ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Whether the viewport is below the collapse breakpoint. */
+    isCollapsed = computed(() => this.state.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    /** Whether the mobile panel is open. */
+    isMobileOpen = computed(() => this.state.mobileOpen(), ...(ngDevMode ? [{ debugName: "isMobileOpen" }] : []));
+    /** Collapse mode from resolved config. */
+    collapseMode = computed(() => this.resolvedConfig().collapseMode, ...(ngDevMode ? [{ debugName: "collapseMode" }] : []));
+    /** Offcanvas position from resolved config. */
+    offcanvasPosition = computed(() => this.resolvedConfig().offcanvasPosition, ...(ngDevMode ? [{ debugName: "offcanvasPosition" }] : []));
+    /**
+     * Whether sticky positioning should be activated for the current layout.
+     * Sticky mode is restricted to vertical navigation and also applies while
+     * the nav is collapsed on mobile so the toggler row stays pinned.
+     */
+    isStickyActive = computed(() => this.resolvedConfig().position === 'sticky' && this.resolvedOrientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isStickyActive" }] : []));
+    /** @inheritDoc */
+    ngOnInit() {
+        this.initialized = true;
+        // Ensure state receives the final resolved input config before any
+        // route-driven panel preloading runs.
+        const resolvedConfig = this.resolvedConfig();
+        this.lastAppliedConfigSignature = this.buildConfigSignature(resolvedConfig);
+        this.lastBreakpointSignature = this.buildBreakpointSignature(resolvedConfig);
+        this.state.setConfig(resolvedConfig);
+        this.setupBreakpointListener();
+        this.setupClickOutsideListener();
+        if (this.autoOpenFromRoute()) {
+            if (this.isCollapsed()) {
+                this.state.syncDropdownsWithRoute(this.items(), this.router.url);
+            }
+            else {
+                this.openPanelsFromRoute(this.router.url);
+            }
+            this.routerSub = this.router.events
+                .pipe(filter((e) => e instanceof NavigationEnd))
+                .subscribe((e) => {
+                const nextUrl = e.urlAfterRedirects;
+                const nextPath = this.extractPath(nextUrl);
+                if (this.isCollapsed()) {
+                    this.state.syncDropdownsWithRoute(this.items(), nextUrl);
+                    this._lastSyncedPath = nextPath;
+                    return;
+                }
+                // Fragment-only transitions should not rebuild panel stacks.
+                if (nextPath === this._lastSyncedPath) {
+                    return;
+                }
+                this.openPanelsFromRoute(nextUrl);
+            });
+        }
+    }
+    /** @inheritDoc */
+    ngOnDestroy() {
+        this.initialized = false;
+        this.teardownBreakpointListener();
+        this.teardownClickOutsideListener();
+        this.routerSub?.unsubscribe();
+    }
+    /**
+     * Handles item click events bubbled up from the item list.
+     *
+     * @param payload - The clicked item and original DOM event.
+     */
+    onItemClick(payload) {
+        if (payload.item.route) {
+            this.itemClick.emit(payload.item);
+            // Keep parent sections open when the clicked item also owns children.
+            // This is required for responsive/mobile accordion behavior and for
+            // route-aware items that intentionally perform both actions.
+            if (!payload.item.children?.length) {
+                this.state.closeAllDropdowns();
+            }
+        }
+    }
+    /**
+     * Toggles the mobile panel and emits the state change.
+     */
+    onMobileToggle() {
+        this.state.toggleMobile();
+        if (this.state.mobileOpen() && this.autoOpenFromRoute()) {
+            this.state.syncDropdownsWithRoute(this.items(), this.router.url);
+        }
+        this.mobileToggle.emit(this.state.mobileOpen());
+    }
+    /**
+     * Closes the mobile panel.
+     */
+    onMobilePanelClose() {
+        this.state.setMobileOpen(false);
+        this.mobileToggle.emit(false);
+    }
+    /**
+     * Handles dropdown toggle events bubbled up from the item list.
+     * The toggle has already been performed in the item-list; this just
+     * emits the appropriate output event.
+     *
+     * @param item - The dropdown item that was toggled.
+     */
+    onDropdownToggle(item) {
+        if (this.state.isDropdownOpen(item.id)) {
+            this.dropdownOpen.emit(item);
+        }
+        else {
+            this.dropdownClose.emit(item);
+        }
+    }
+    // ──────────────────────────────────────────────
+    // Panel event handlers
+    // ──────────────────────────────────────────────
+    /**
+     * Opens a new panel for the given item's children, or drills down if max panels reached.
+     * Focuses the first item in the newly opened/drilled panel.
+     *
+     * @param item - The item whose children should be displayed in a panel.
+     */
+    onPanelOpen(item) {
+        const stackBefore = this.state.panelStack().length;
+        this.state.openPanel(item, this.items());
+        const stackAfter = this.state.panelStack().length;
+        const panelIndex = stackAfter - 1;
+        const action = stackAfter > stackBefore ? 'open' : 'drill-down';
+        this.panelChange.emit({ item, panelIndex, action });
+        // Focus the first item in the new/updated panel
+        this.focusPanelFirstItem(panelIndex);
+    }
+    /**
+     * Closes a panel and all panels opened after it.
+     * Returns focus to the previous panel or the main nav trigger.
+     *
+     * @param panelId - ID of the panel to close.
+     */
+    onPanelClose(panelId) {
+        const panel = this.state.getPanelById(panelId);
+        if (panel) {
+            const panelIndex = this.state.panelStack().indexOf(panel);
+            this.state.closePanel(panelId);
+            this.panelChange.emit({ item: panel.parentItem, panelIndex, action: 'close' });
+            // Return focus to previous panel or the main nav
+            this.returnFocusAfterPanelClose(panelIndex, panel.parentItem.id);
+        }
+    }
+    /**
+     * Navigates back within a panel's drill-down history.
+     * Focuses the first item after navigating back.
+     *
+     * @param panelId - ID of the panel to navigate back in.
+     */
+    onPanelBack(panelId) {
+        const panel = this.state.getPanelById(panelId);
+        if (panel) {
+            const panelIndex = this.state.panelStack().indexOf(panel);
+            this.state.navigateBackInPanel(panelId);
+            this.panelChange.emit({ item: panel.parentItem, panelIndex, action: 'drill-back' });
+            // Focus the first item in the panel after navigating back
+            this.focusPanelFirstItem(panelIndex);
+        }
+    }
+    /**
+     * Focuses the first focusable item inside a panel at the given index.
+     *
+     * @param panelIndex - Zero-based index of the panel in the DOM.
+     */
+    focusPanelFirstItem(panelIndex) {
+        requestAnimationFrame(() => {
+            const panels = this.elementRef.nativeElement.querySelectorAll('hub-nav-panel');
+            const targetPanel = panels[panelIndex];
+            if (targetPanel) {
+                const firstItem = targetPanel.querySelector('.hub-nav-item__link, .hub-nav-item__dropdown-toggle');
+                firstItem?.focus();
+            }
+        });
+    }
+    /**
+     * Returns focus to the appropriate element after a panel is closed.
+     * If a previous panel exists, focuses its trigger for the closed item.
+     * Otherwise, returns focus to the main nav item-list.
+     *
+     * @param closedIndex - The index of the panel that was closed.
+     * @param parentItemId - The ID of the parent item that triggered the closed panel.
+     */
+    returnFocusAfterPanelClose(closedIndex, parentItemId) {
+        requestAnimationFrame(() => {
+            if (closedIndex > 0) {
+                // Focus the trigger in the previous panel
+                const panels = this.elementRef.nativeElement.querySelectorAll('hub-nav-panel');
+                const prevPanel = panels[closedIndex - 1];
+                if (prevPanel) {
+                    const trigger = prevPanel.querySelector(`hub-nav-item[data-item-id="${parentItemId}"] .hub-nav-item__link,` +
+                        `hub-nav-item[data-item-id="${parentItemId}"] .hub-nav-item__dropdown-toggle`);
+                    trigger?.focus();
+                    return;
+                }
+            }
+            // Fallback: focus the trigger in the main nav
+            const mainTrigger = this.elementRef.nativeElement.querySelector(`hub-nav-item[data-item-id="${parentItemId}"] .hub-nav-item__link,` +
+                `hub-nav-item[data-item-id="${parentItemId}"] .hub-nav-item__dropdown-toggle`);
+            mainTrigger?.focus();
+        });
+    }
+    /**
+     * Sets up a `matchMedia` listener for the configured collapse breakpoint.
+     */
+    setupBreakpointListener() {
+        const bp = this.resolvedConfig().collapseBreakpoint;
+        if (bp <= 0 || typeof window === 'undefined') {
+            this.state.setCollapsed(false);
+            return;
+        }
+        this.mediaQuery = window.matchMedia(`(max-width: ${bp - 1}px)`);
+        this.refreshCollapsedState();
+        this.mediaQuery.addEventListener('change', this.mediaQueryHandler);
+        window.addEventListener('resize', this.resizeHandler, { passive: true });
+    }
+    /** Tears down the `matchMedia` listener. */
+    teardownBreakpointListener() {
+        if (this.mediaQuery) {
+            this.mediaQuery.removeEventListener('change', this.mediaQueryHandler);
+            this.mediaQuery = null;
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.resizeHandler);
+        }
+    }
+    /**
+     * Registers a document click listener that closes dropdowns on outside clicks.
+     * Panel drill-down mode panels are NOT closed by outside clicks.
+     */
+    setupClickOutsideListener() {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        this.documentClickHandler = (event) => {
+            const target = event.target;
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this.zone.run(() => {
+                    // Close dropdowns/flyouts on outside click
+                    this.state.closeAllDropdowns();
+                    // DO NOT close panels — they should only close via explicit user action (back/close buttons)
+                });
+            }
+        };
+        document.addEventListener('click', this.documentClickHandler);
+    }
+    /** Removes the document click listener. */
+    teardownClickOutsideListener() {
+        if (this.documentClickHandler) {
+            document.removeEventListener('click', this.documentClickHandler);
+            this.documentClickHandler = null;
+        }
+    }
+    /**
+     * Callback invoked when the viewport crosses the collapse breakpoint.
+     *
+     * @param belowBreakpoint - `true` if the viewport is now below the breakpoint.
+     */
+    onBreakpointChange(belowBreakpoint) {
+        if (belowBreakpoint === this.isCollapsed()) {
+            return;
+        }
+        this.state.setCollapsed(belowBreakpoint);
+        if (!belowBreakpoint) {
+            this.state.closeAllDropdowns();
+            this.state.closeAllPanels();
+            this.mobileToggle.emit(false);
+        }
+    }
+    /**
+     * Recomputes the collapsed state from the current viewport width.
+     * This complements `matchMedia` events, which can become unreliable in
+     * some browser/devtools combinations when the viewport is resized or
+     * docked without emitting the expected media-query change sequence.
+     */
+    refreshCollapsedState() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const bp = this.resolvedConfig().collapseBreakpoint;
+        if (bp <= 0) {
+            this.onBreakpointChange(false);
+            return;
+        }
+        this.onBreakpointChange(window.innerWidth < bp);
+    }
+    /**
+     * Parses the given URL and opens the panels that correspond to the active route.
+     *
+     * The algorithm:
+     * 1. Extract the path without fragment/query: `/calendar/examples` → `['calendar', 'examples']`
+     * 2. Find the root item whose id matches the first segment.
+     * 3. Open a panel for that root item (closes any existing panels first).
+     * 4. If a second segment exists and matches a child item that has its own
+     *    children (e.g. the "Examples" dropdown), open a second panel for it.
+     *
+     * @param url - The full URL including optional fragment, e.g. `/calendar/examples#cal-basic`.
+     */
+    openPanelsFromRoute(url) {
+        // Strip query string and fragment
+        const path = url.split('?')[0].split('#')[0];
+        this._lastSyncedPath = path;
+        const segments = path.split('/').filter(Boolean);
+        if (segments.length === 0) {
+            this.state.closeAllPanels();
+            return;
+        }
+        const rootItems = this.items();
+        const libraryId = segments[0];
+        // Find the matching root nav item
+        const rootItem = rootItems.find((item) => item.id === libraryId);
+        if (!rootItem?.children?.length) {
+            this.state.closeAllPanels();
+            return;
+        }
+        const currentStack = this.state.panelStack();
+        const hasMatchingRootPanel = this.isRootContextVisible(rootItem, currentStack);
+        // Keep the existing root panel when it already matches the route context.
+        // This avoids unnecessary teardown/recreate flicker when switching between
+        // second-level links (Overview, API, Styles, etc.) in the same library.
+        if (!hasMatchingRootPanel) {
+            this.state.closeAllPanels();
+            this.state.openPanel(rootItem, rootItems);
+        }
+        else {
+            this.ensureRootPanelContext(rootItem);
+        }
+        // If a second path segment exists, find and open the matching child panel
+        if (segments.length > 1) {
+            const sectionSegment = segments[1];
+            const sectionItem = rootItem.children.find((child) => child.children?.length && child.route?.toString().split('/').pop() === sectionSegment);
+            if (sectionItem) {
+                // Keep root-level replacement logic scoped to true root items.
+                // Passing rootItems here preserves drill-down behavior when
+                // `panelMaxVisible` forces nested levels to replace the last panel.
+                if (!this.state.isPanelOpenForItem(sectionItem.id)) {
+                    this.state.openPanel(sectionItem, rootItems);
+                }
+                return;
+            }
+        }
+        // No nested section panel should be visible for plain second-level links.
+        if (this.state.panelStack().length > 1) {
+            this.state.closePanelsFromIndex(1);
+        }
+    }
+    /**
+     * Checks whether the first panel in the current stack belongs to the same
+     * root route context.
+     *
+     * This remains true even when panel mode drill-down has replaced the first
+     * panel content (the original root items are still present in panel history).
+     *
+     * @param rootItem - Root nav item resolved from the current route.
+     * @param stack - Current panel stack snapshot.
+     * @returns `true` when the stack already belongs to the same root context.
+     */
+    isRootContextVisible(rootItem, stack) {
+        const firstPanel = stack[0];
+        if (!firstPanel) {
+            return false;
+        }
+        if (firstPanel.parentItem.id === rootItem.id) {
+            return true;
+        }
+        // Compare by item identity instead of array reference because host apps
+        // often rebuild nav item arrays reactively (new references, same content).
+        return firstPanel.history.some((entry) => this.isSameItemCollection(entry.items, rootItem.children ?? []));
+    }
+    /**
+     * Compares two item collections by stable item IDs.
+     *
+     * @param source - First collection.
+     * @param target - Second collection.
+     * @returns `true` when both collections contain the same IDs in the same order.
+     */
+    isSameItemCollection(source, target) {
+        if (source.length !== target.length) {
+            return false;
+        }
+        for (let index = 0; index < source.length; index++) {
+            if (source[index].id !== target[index].id) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Restores the first panel to the root context when it is currently showing
+     * drill-down content for a child section (e.g. the "Examples" third level).
+     *
+     * @param rootItem - Root nav item resolved from the current route.
+     */
+    ensureRootPanelContext(rootItem) {
+        const firstPanel = this.state.panelStack()[0];
+        if (!firstPanel || firstPanel.parentItem.id === rootItem.id) {
+            return;
+        }
+        // Walk back through drill-down history until the root section is visible.
+        while (true) {
+            const panel = this.state.getPanelById(firstPanel.id);
+            if (!panel || panel.parentItem.id === rootItem.id || panel.history.length === 0) {
+                break;
+            }
+            this.state.navigateBackInPanel(firstPanel.id);
+        }
+    }
+    /**
+     * Extracts the path part from a URL-like string, removing query and fragment.
+     *
+     * @param url - Router URL.
+     * @returns Normalized path for route-state comparisons.
+     */
+    extractPath(url) {
+        return url.split('?')[0].split('#')[0];
+    }
+    /**
+     * Builds a stable signature for the effective nav config so repeated
+     * reactivity passes with identical values do not trigger work.
+     *
+     * @param config - Effective nav config.
+     * @returns Stable string signature.
+     */
+    buildConfigSignature(config) {
+        return JSON.stringify({
+            orientation: config.orientation,
+            verticalExpandMode: config.verticalExpandMode,
+            dropdownTrigger: config.dropdownTrigger,
+            position: config.position,
+            stickyTop: config.stickyTop,
+            collapseMode: config.collapseMode,
+            collapseBreakpoint: config.collapseBreakpoint,
+            offcanvasPosition: config.offcanvasPosition,
+            ariaLabel: config.ariaLabel,
+            panelMaxVisible: config.panelMaxVisible,
+            sidebarSide: config.sidebarSide,
+            panelWidth: config.panelWidth
+        });
+    }
+    /**
+     * Builds a stable signature for breakpoint listener inputs.
+     *
+     * @param config - Effective nav config.
+     * @returns Stable breakpoint signature.
+     */
+    buildBreakpointSignature(config) {
+        return JSON.stringify({
+            collapseBreakpoint: config.collapseBreakpoint,
+            orientation: config.orientation
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: HubNavComponent, isStandalone: true, selector: "hub-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, navClass: { classPropertyName: "navClass", publicName: "navClass", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoOpenFromRoute: { classPropertyName: "autoOpenFromRoute", publicName: "autoOpenFromRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", mobileToggle: "mobileToggle", panelChange: "panelChange" }, host: { properties: { "class.hub-nav--horizontal": "resolvedOrientation() === \"horizontal\"", "class.hub-nav--vertical": "resolvedOrientation() === \"vertical\"", "class.hub-nav--collapsed": "isCollapsed()", "class.hub-nav--sticky": "isStickyActive()", "class.hub-nav--fixed": "resolvedConfig().position === \"fixed\"", "class.hub-nav--sidebar-left": "resolvedConfig().sidebarSide === \"left\"", "class.hub-nav--sidebar-right": "resolvedConfig().sidebarSide === \"right\"", "style.width": "resolvedOrientation() === \"vertical\" ? \"100%\" : null", "style.align-self": "resolvedOrientation() === \"vertical\" ? \"stretch\" : null", "style.--hub-nav-sticky-top": "resolvedConfig().stickyTop", "style.display": "resolvedOrientation() === \"vertical\" ? \"flex\" : null", "style.flex-direction": "resolvedOrientation() === \"vertical\" ? \"column\" : null" }, classAttribute: "hub-nav" }, providers: [HubNavStateService], queries: [{ propertyName: "startDirective", first: true, predicate: HubNavStartDirective, descendants: true, isSignal: true }, { propertyName: "endDirective", first: true, predicate: HubNavEndDirective, descendants: true, isSignal: true }, { propertyName: "itemTemplateDirective", first: true, predicate: HubNavItemTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t(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(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t(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(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 999px);--hub-nav-bg: var(--hub-sys-surface-page, #fff);--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-normal, 400);--hub-nav-item-border-radius: var(--hub-ref-border-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, .15s ease);--hub-nav-item-hover-bg: var(--hub-sys-state-hover-overlay, rgba(0, 0, 0, .04));--hub-nav-item-hover-color: var(--hub-sys-color-primary, #0d6efd);--hub-nav-item-active-bg: var(--hub-sys-color-primary, #0d6efd);--hub-nav-item-active-color: #fff;--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--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, #fff);--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-border-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow-md, 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-z-index: var(--hub-sys-z-index-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, .75rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, .75rem);--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: #fff;--hub-nav-badge-border-radius: var(--hub-ref-border-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-border-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-z-index: var(--hub-sys-z-index-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, .3s ease);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: var(--hub-sys-transition-collapse, .35s ease);--hub-nav-icon-size: var(--hub-ref-icon-size, 1.25rem);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #fff);--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-z-index: var(--hub-sys-z-index-dropdown, 1000);--hub-nav-panel-transition: transform var(--hub-sys-transition-base, .3s ease);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-overlay, rgba(0, 0, 0, .04));--hub-nav-panel-back-size: 2rem}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 999px)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-z-index-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-z-index-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"], outputs: ["itemClick", "dropdownToggle", "panelOpen"] }, { kind: "component", type: HubNavTogglerComponent, selector: "hub-nav-toggler", inputs: ["isOpen"], outputs: ["toggle"] }, { kind: "component", type: HubNavMobilePanelComponent, selector: "hub-nav-mobile-panel", inputs: ["items", "isOpen", "mode", "offcanvasPosition"], outputs: ["closePanel", "itemClick", "dropdownToggle"] }, { kind: "component", type: HubNavPanelContainerComponent, selector: "hub-nav-panel-container", inputs: ["panels", "sidebarSide", "panelWidth", "itemTemplate", "hideFirstPanelHeader"], outputs: ["panelClose", "panelBack", "itemClick", "dropdownToggle", "panelOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HubNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-nav', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        HubNavItemListComponent,
+                        HubNavTogglerComponent,
+                        HubNavMobilePanelComponent,
+                        HubNavPanelContainerComponent
+                    ], providers: [HubNavStateService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'hub-nav',
+                        '[class.hub-nav--horizontal]': 'resolvedOrientation() === "horizontal"',
+                        '[class.hub-nav--vertical]': 'resolvedOrientation() === "vertical"',
+                        '[class.hub-nav--collapsed]': 'isCollapsed()',
+                        '[class.hub-nav--sticky]': 'isStickyActive()',
+                        '[class.hub-nav--fixed]': 'resolvedConfig().position === "fixed"',
+                        '[class.hub-nav--sidebar-left]': 'resolvedConfig().sidebarSide === "left"',
+                        '[class.hub-nav--sidebar-right]': 'resolvedConfig().sidebarSide === "right"',
+                        '[style.width]': 'resolvedOrientation() === "vertical" ? "100%" : null',
+                        '[style.align-self]': 'resolvedOrientation() === "vertical" ? "stretch" : null',
+                        '[style.--hub-nav-sticky-top]': 'resolvedConfig().stickyTop',
+                        '[style.display]': 'resolvedOrientation() === "vertical" ? "flex" : null',
+                        '[style.flex-direction]': 'resolvedOrientation() === "vertical" ? "column" : null'
+                    }, template: "<nav [attr.aria-label]=\"ariaLabel()\" [class]=\"navClass()\">\n\t<!-- Toggler: visible when collapsed (below breakpoint) -->\n\t@if (isCollapsed()) {\n\t\t@if (startTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t@if (endTemplate()) {\n\t\t\t<div class=\"hub-nav-slot hub-nav-slot--end\">\n\t\t\t\t<ng-container\n\t\t\t\t\t[ngTemplateOutlet]=\"endTemplate()!\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"endContext()\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\n\t\t<hub-nav-toggler\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t(toggle)=\"onMobileToggle()\"\n\t\t/>\n\t}\n\n\t<!-- Desktop horizontal navigation: split into two explicit rows -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'horizontal') {\n\t\t<div class=\"hub-nav__horizontal-top-row\">\n\t\t\t@if (startTemplate()) {\n\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"hub-nav__horizontal-root-scroll\">\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\tclass=\"hub-nav__horizontal-root-list\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t(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(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t}\n\t}\n\n\t<!-- Desktop vertical navigation -->\n\t@if (!isCollapsed() && resolvedOrientation() === 'vertical') {\n\t\t<div class=\"hub-nav__main-and-panels\">\n\t\t\t<div class=\"hub-nav__primary-column\">\n\t\t\t\t<!-- Start slot in vertical desktop mode: constrained to the primary column only -->\n\t\t\t\t@if (startTemplate()) {\n\t\t\t\t\t<div class=\"hub-nav-slot hub-nav-slot--start\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"startTemplate()!\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"startContext()\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<hub-nav-item-list\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[depth]=\"0\"\n\t\t\t\t\t[itemTemplate]=\"resolvedItemTemplate()\"\n\t\t\t\t\t(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(panelClose)=\"onPanelClose($event)\"\n\t\t\t\t\t(panelBack)=\"onPanelBack($event)\"\n\t\t\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t\t\t\t(panelOpen)=\"onPanelOpen($event)\"\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Mobile panel: shown when collapsed and open -->\n\t@if (isCollapsed()) {\n\t\t<hub-nav-mobile-panel\n\t\t\t[items]=\"items()\"\n\t\t\t[isOpen]=\"isMobileOpen()\"\n\t\t\t[mode]=\"collapseMode()\"\n\t\t\t[offcanvasPosition]=\"offcanvasPosition()\"\n\t\t\t(closePanel)=\"onMobilePanelClose()\"\n\t\t\t(itemClick)=\"onItemClick($event)\"\n\t\t\t(dropdownToggle)=\"onDropdownToggle($event)\"\n\t\t/>\n\t}\n</nav>\n", styles: [":root,:host{--hub-nav-height: 3.5rem;--hub-nav-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-gap: var(--hub-ref-space-1, .25rem);--hub-nav-horizontal-padding-y: 0;--hub-nav-horizontal-padding-x: 0;--hub-nav-horizontal-row-gap: 0;--hub-nav-horizontal-items-justify: center;--hub-nav-horizontal-items-overflow-x: auto;--hub-nav-horizontal-items-overflow-y: hidden;--hub-nav-vertical-items-overflow-y: auto;--hub-nav-vertical-items-overflow-x: hidden;--hub-nav-vertical-panel-padding-inline: var(--hub-ref-space-2, .5rem);--hub-nav-vertical-panel-padding-block: 0;--hub-nav-horizontal-panel-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-horizontal-panel-padding-x: 0;--hub-nav-scrollbar-width: none;--hub-nav-scrollbar-color: transparent transparent;--hub-nav-scrollbar-webkit-size: 0;--hub-nav-scrollbar-thumb-color: transparent;--hub-nav-scrollbar-track-color: transparent;--hub-nav-scrollbar-thumb-radius: var(--hub-ref-radius-pill, 999px);--hub-nav-bg: var(--hub-sys-surface-page, #fff);--hub-nav-color: var(--hub-sys-text-primary, #212529);--hub-nav-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-border-width: 1px;--hub-nav-border-style: solid;--hub-nav-brand-font-size: var(--hub-ref-font-size-lg, 1.25rem);--hub-nav-brand-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-brand-color: var(--hub-sys-text-primary, #212529);--hub-nav-brand-padding-x: var(--hub-ref-space-2, .5rem);--hub-nav-item-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-item-padding-y: var(--hub-ref-space-2, .5rem);--hub-nav-item-color: var(--hub-sys-text-primary, #212529);--hub-nav-item-font-size: var(--hub-ref-font-size-base, 1rem);--hub-nav-item-font-weight: var(--hub-ref-font-weight-normal, 400);--hub-nav-item-border-radius: var(--hub-ref-border-radius-sm, .25rem);--hub-nav-item-transition: var(--hub-sys-transition-fast, .15s ease);--hub-nav-item-hover-bg: var(--hub-sys-state-hover-overlay, rgba(0, 0, 0, .04));--hub-nav-item-hover-color: var(--hub-sys-color-primary, #0d6efd);--hub-nav-item-active-bg: var(--hub-sys-color-primary, #0d6efd);--hub-nav-item-active-color: #fff;--hub-nav-item-active-font-weight: var(--hub-ref-font-weight-semibold, 600);--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, #fff);--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-border-radius-sm, .25rem));--hub-nav-dropdown-shadow: var(--hub-sys-shadow-md, 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-z-index: var(--hub-sys-z-index-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, .75rem);--hub-nav-header-margin-inline-start: var(--hub-ref-space-3, .75rem);--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: #fff;--hub-nav-badge-border-radius: var(--hub-ref-border-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-border-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-z-index: var(--hub-sys-z-index-fixed, 1030);--hub-nav-mobile-backdrop-bg: rgba(0, 0, 0, .5);--hub-nav-mobile-transition: var(--hub-sys-transition-base, .3s ease);--hub-nav-accordion-indent: var(--hub-ref-space-3, 1rem);--hub-nav-accordion-transition: var(--hub-sys-transition-collapse, .35s ease);--hub-nav-icon-size: var(--hub-ref-icon-size, 1.25rem);--hub-nav-icon-gap: var(--hub-ref-space-2, .5rem);--hub-nav-panel-width: 16rem;--hub-nav-panel-bg: var(--hub-sys-surface-elevated, #fff);--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-z-index: var(--hub-sys-z-index-dropdown, 1000);--hub-nav-panel-transition: transform var(--hub-sys-transition-base, .3s ease);--hub-nav-panel-header-height: 3rem;--hub-nav-panel-header-bg: var(--hub-sys-surface-page, #fff);--hub-nav-panel-header-border-color: var(--hub-sys-border-color-default, #dee2e6);--hub-nav-panel-header-font-size: var(--hub-ref-font-size-sm, .875rem);--hub-nav-panel-header-font-weight: var(--hub-ref-font-weight-semibold, 600);--hub-nav-panel-header-padding-x: var(--hub-ref-space-3, 1rem);--hub-nav-panel-back-color: var(--hub-sys-text-primary, #212529);--hub-nav-panel-back-hover-bg: var(--hub-sys-state-hover-overlay, rgba(0, 0, 0, .04));--hub-nav-panel-back-size: 2rem}:host{display:block}nav{display:flex;background-color:var(--hub-nav-bg, #fff);color:var(--hub-nav-color, #212529);border:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);font-family:inherit}:host(.hub-nav--horizontal) nav{width:100%}:host(.hub-nav--horizontal) nav{display:flex;flex-direction:column;align-items:stretch;padding:var(--hub-nav-horizontal-padding-y, 0) var(--hub-nav-horizontal-padding-x, 0);gap:var(--hub-nav-horizontal-row-gap, 0)}:host(.hub-nav--vertical) nav{flex:1;min-height:0;flex-direction:column;padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) nav>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--collapsed) nav,:host(.hub-nav--collapsed.hub-nav--vertical) nav,:host(.hub-nav--collapsed.hub-nav--horizontal) nav{display:flex;flex:0 0 auto;width:100%;min-height:auto;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--hub-nav-gap, .25rem);padding:var(--hub-nav-padding-y, .5rem) var(--hub-nav-padding-x, 1rem);overflow:hidden}.hub-nav__main-and-panels{display:flex;flex:1;min-height:0;align-items:stretch}.hub-nav__main-and-panels>hub-nav-panel-container{flex:1;min-height:0}.hub-nav__primary-column{display:flex;flex-direction:column;min-height:0}:host(.hub-nav--sidebar-left) .hub-nav__main-and-panels{flex-direction:row}:host(.hub-nav--sidebar-right) .hub-nav__main-and-panels{flex-direction:row-reverse}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column{display:flex;flex-direction:column;flex:0 0 var(--hub-nav-panel-width, 16rem);width:var(--hub-nav-panel-width, 16rem);min-width:var(--hub-nav-panel-width, 16rem)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>.hub-nav__primary-column>hub-nav-item-list{display:flex;flex-direction:column;gap:var(--hub-nav-gap, .25rem);flex:1 1 auto;min-height:0;padding-inline:var(--hub-nav-vertical-panel-padding-inline, .5rem);padding-block:var(--hub-nav-vertical-panel-padding-block, 0);overflow-y:var(--hub-nav-vertical-items-overflow-y, auto);overflow-x:var(--hub-nav-vertical-items-overflow-x, hidden)}:host(.hub-nav--vertical) .hub-nav__main-and-panels>hub-nav-panel-container{flex:0 0 auto;width:auto;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-top-row{display:flex;align-items:center;gap:var(--hub-nav-gap, .25rem)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-list{display:flex;flex-direction:row;align-items:center;justify-content:var(--hub-nav-horizontal-items-justify, center);gap:var(--hub-nav-gap, .25rem);flex:0 0 auto;width:max-content;min-width:100%;margin-inline:auto;overflow:visible}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;padding:var(--hub-nav-horizontal-panel-padding-y, .5rem) var(--hub-nav-horizontal-panel-padding-x, 0);overflow-x:var(--hub-nav-horizontal-items-overflow-x, auto);overflow-y:var(--hub-nav-horizontal-items-overflow-y, hidden)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list{-ms-overflow-style:none;scrollbar-width:var(--hub-nav-scrollbar-width, none);scrollbar-color:var(--hub-nav-scrollbar-color, transparent transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar{width:var(--hub-nav-scrollbar-webkit-size, 0);height:var(--hub-nav-scrollbar-webkit-size, 0)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-thumb,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-thumb{background-color:var(--hub-nav-scrollbar-thumb-color, transparent);border-radius:var(--hub-nav-scrollbar-thumb-radius, 999px)}:host(.hub-nav--horizontal) .hub-nav__horizontal-root-scroll::-webkit-scrollbar-track,:host(.hub-nav--vertical) .hub-nav__primary-column>hub-nav-item-list::-webkit-scrollbar-track{background-color:var(--hub-nav-scrollbar-track-color, transparent)}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row{width:100%;min-width:0}:host(.hub-nav--horizontal) .hub-nav__horizontal-panel-row>hub-nav-panel-container{width:100%;min-width:0}.hub-nav-slot{display:flex;align-items:center;justify-content:flex-start;padding:0 var(--hub-nav-brand-padding-x, .5rem);font-size:var(--hub-nav-brand-font-size, 1.25rem);font-weight:var(--hub-nav-brand-font-weight, 600);color:var(--hub-nav-brand-color, #212529);text-decoration:none;white-space:nowrap;flex-shrink:0}:host(.hub-nav--vertical) .hub-nav-slot--start{width:100%;align-self:stretch;box-sizing:border-box;padding-bottom:var(--hub-nav-padding-y, .5rem);border-bottom:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6);margin-bottom:var(--hub-nav-gap, .25rem)}:host(.hub-nav--vertical) .hub-nav-slot--end{width:100%;align-self:stretch;box-sizing:border-box;margin-top:auto;padding-top:var(--hub-nav-padding-y, .5rem);border-top:var(--hub-nav-border-width, 1px) var(--hub-nav-border-style, solid) var(--hub-nav-border-color, #dee2e6)}:host(.hub-nav--horizontal) .hub-nav-slot--end{margin-inline-start:auto;justify-content:flex-end}:host(.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--horizontal) .hub-nav-slot--end{align-self:center;height:auto;min-height:0;max-height:none}:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--vertical) .hub-nav-slot--end,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--start,:host(.hub-nav--collapsed.hub-nav--horizontal) .hub-nav-slot--end{width:0;align-self:stretch;display:flex;align-items:center;flex:1 1 0;min-width:0;border:0;margin:0;padding:0 var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--collapsed) .hub-nav-slot--start{justify-content:flex-start}:host(.hub-nav--collapsed) .hub-nav-slot--end{margin-inline-start:0;justify-content:flex-end}:host(.hub-nav--collapsed) hub-nav-toggler{flex:0 0 auto;display:flex;align-items:center;padding-inline:var(--hub-nav-brand-padding-x, .5rem)}:host(.hub-nav--sticky){position:sticky;top:var(--hub-nav-sticky-top, 0px);align-self:flex-start;max-height:calc(100vh - var(--hub-nav-sticky-top, 0px));z-index:var(--hub-sys-z-index-sticky, 1020)}:host(.hub-nav--fixed){position:fixed;top:0;left:0;right:0;z-index:var(--hub-sys-z-index-fixed, 1030)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], navClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "navClass", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], autoOpenFromRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpenFromRoute", required: false }] }], startDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavStartDirective), { isSignal: true }] }], endDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavEndDirective), { isSignal: true }] }], itemTemplateDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubNavItemTemplateDirective), { isSignal: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropdownOpen: [{ type: i0.Output, args: ["dropdownOpen"] }], dropdownClose: [{ type: i0.Output, args: ["dropdownClose"] }], mobileToggle: [{ type: i0.Output, args: ["mobileToggle"] }], panelChange: [{ type: i0.Output, args: ["panelChange"] }] } });
+
+/*
+ * Public API Surface of nav
+ */
+// Models
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HUB_NAV_CONFIG, HubNavComponent, HubNavConfigService, HubNavEndDirective, HubNavItemComponent, HubNavItemListComponent, HubNavItemTemplateDirective, HubNavPanelComponent, HubNavPanelContainerComponent, HubNavScrollSpyDirective, HubNavScrollSpySectionDirective, HubNavSeparatorComponent, HubNavStartDirective, HubNavStateService };
+//# sourceMappingURL=ng-hub-ui-nav.mjs.map