ng-hub-ui-nav 22.11.2 → 22.12.0

package/README.md

@@ -8,7 +8,7 @@
 A flexible, accessible, and highly customizable navigation component for Angular 21+. It supports horizontal menus, vertical sidebars, mobile collapse modes, stacked drill-down panels, projected start/end slots, and scroll-spy integration.
 
 > [!IMPORTANT]
-> Version `21.1.1` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
+> Version `22.12.0` targets Angular 21 and follows the signal-first architecture used across `ng-hub-ui`.
 
 ## Documentation and Live Examples
 
@@ -69,8 +69,8 @@ This library is part of the **ng-hub-ui** ecosystem:
 - Scroll-spy helpers for documentation pages and one-page layouts.
 - Sticky vertical navigation support.
 - **Desktop icon rail** — the two-way `rail` input collapses a vertical nav to `--hub-nav-rail-width` (4rem) showing icons only: labels surface as tooltips, accordion groups open as click-triggered overlay flyouts, and the offcanvas behavior still wins below `collapseBreakpoint`. A built-in edge toggle ships by default (`config.railToggle: false` to bring your own) and is fully themeable through `--hub-nav-rail-toggle-*`, including a replaceable SVG arrow. The library persists nothing; `railChange` lets the app store the preference.
-- **Tooltip on truncated labels** — long item labels are clipped with an ellipsis (the standard sidebar behaviour) and reveal their full text on hover, automatically and only when truncated (via `ng-hub-ui-utils`' `[hubOverflowTooltip]`). The tooltip is **agnostic** — it defaults to the hub-ui tooltip but is swappable with `provideHubTooltip(...)`. Requires `ng-hub-ui-utils >= 22.8.1` (the library's peer floor) and the tooltip styles (`@use 'ng-hub-ui-utils/styles/tooltip';`). Tip: control the sidebar width with `--hub-nav-panel-width`.
-- Semantic `variant` accent system (`primary` / `success` / `danger` / `warning` / `info`, plus any custom accent) recolouring the hover/active affordances — mirrors `<hub-panels>`.
+- **Tooltip on truncated labels** — long item labels are clipped with an ellipsis (the standard sidebar behaviour) and reveal their full text on hover, automatically and only when truncated (via `ng-hub-ui-utils`' `[hubOverflowTooltip]`). The tooltip is **agnostic** — it defaults to the hub-ui tooltip but is swappable with `provideHubTooltip(...)`. Requires `ng-hub-ui-utils >= 22.13.0` (the library's peer floor) and the tooltip styles (`@use 'ng-hub-ui-utils/styles/tooltip';`). Tip: control the sidebar width with `--hub-nav-panel-width`.
+- Semantic `color` accent system (`primary` / `success` / `danger` / `warning` / `info`, plus any custom accent or literal colour) recolouring the hover/active affordances — mirrors `<hub-panels>`.
 - Full CSS variable theming via `--hub-nav-*` tokens.
 
 ## Installation
@@ -187,9 +187,9 @@ A toggle button ships on the outer edge of the primary column: an arrow inside a
 | `config` | `Partial<HubNavConfig>` | `{}` | Per-instance config merged with global defaults. |
 | `navClass` | `string` | `''` | Additional class applied to the internal `<nav>`. |
 | `itemTemplate` | `TemplateRef<unknown> \| null` | `null` | Optional custom item template. |
-| `autoOpenFromRoute` | `boolean` | `false` | Opens matching dropdowns/panels from the current route. It also re-derives the stack when the viewport comes back above `collapseBreakpoint`; with the input off, a stack opened by hand survives that round trip. |
+| `autoOpenFromRoute` | `boolean` | `false` | Opens matching dropdowns/panels from the current route, and leaves exactly one section open when roots expand differently: arriving at an accordion root drops the panel of the panel root you left, and the other way round. It also re-derives the stack when the viewport comes back above `collapseBreakpoint`; with the input off, a stack opened by hand survives that round trip. |
 | `rail` | `boolean` (two-way `model`) | `false` | Desktop-only icon rail for vertical navs. Ignored below `collapseBreakpoint`. Bind with `[(rail)]`. |
-| `variant` | `'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string` | `'primary'` | Semantic accent for the hover/active affordances. Built-in values render with the design-system tints; any custom string resolves through `--hub-sys-color-<variant>`. |
+| `color` | `'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string \| undefined` | `undefined` (reads as `primary`) | Semantic accent for the hover/active affordances. A bareword — semantic name, registered accent or CSS named colour — resolves through `--hub-sys-color-<name>`; a literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged. |
 
 #### Outputs
 
@@ -219,11 +219,20 @@ interface HubNavConfig {
 	sidebarSide: 'left' | 'right';
 	panelWidth: string;
 	dropdownRenderMode: 'inline' | 'overlay';
+	railToggle?: boolean;
+	activeIndicator?: boolean;
+	followReplacedUrls?: boolean | number;
 	labels?: Partial<HubNavLabels>;
 }
 ```
 
-`labels` overrides the built-in accessible strings (`toggleNavigation`, `closeNavigation`, `goBack`, `closePanel`, `toggleSection` — the latter supports a `{label}` placeholder) per instance. Without an override, each label resolves from the shared `HUBUI.NAV.*` dictionary keys (`provideHubTranslationAdapter()` in `ng-hub-ui-utils`) and finally falls back to English.
+`railToggle` (default `true`) draws the built-in rail toggle on the outer edge of a vertical desktop nav; set it to `false` to supply your own control.
+
+`activeIndicator` (default `false`) moves the active mark to a single element shared by the list so it travels between siblings instead of appearing in place. It is opt-in because the mark stops being painted by each item, so a rule targeting `.hub-nav-item__link--active` no longer applies. It honours `prefers-reduced-motion`.
+
+`followReplacedUrls` (default `true`) decides how eagerly the nav follows a URL that was **replaced** rather than pushed — which is what a scroll spy does while the reader scrolls. `true` follows every report; a **number** follows only once the reports have been quiet for that many milliseconds, so the mark lands where the reader stopped instead of walking down the menu; `false` never follows, marking only where the reader chose to go. Deep links are unaffected either way.
+
+`labels` overrides the built-in accessible strings (`toggleNavigation`, `closeNavigation`, `collapseNavigation`, `expandNavigation`, `goBack`, `closePanel`, `toggleSection` — the last one supports a `{label}` placeholder) per instance. Without an override, each label resolves from the shared `HUBUI.NAV.*` dictionary keys (`provideHubTranslationAdapter()` in `ng-hub-ui-utils`) and finally falls back to English.
 
 
 ### `HubNavItem`
@@ -285,7 +294,7 @@ The component exposes a complete set of `--hub-nav-*` tokens. See the full refer
 
 ### Recolour the whole nav from a single accent
 
-The hover/active affordances and the nav surface all derive from one accent hook. Set it (or use the `variant` input) to re-theme the entire nav:
+The hover/active affordances and the nav surface all derive from one accent hook. Set it (or use the `color` input) to re-theme the entire nav:
 
 ```css
 .my-sidebar {

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

@@ -396,8 +396,17 @@ class HubNavStateService {
         this.openDropdown(id);
         return true;
     }
-    /** Closes all open dropdowns. */
+    /**
+     * Closes all open dropdowns.
+     *
+     * Writing an empty set over an empty set is not free: the signal has no value equality, so
+     * every reader re-runs. Route synchronisation calls this on each navigation, and this nav
+     * has already been observed generating state churn by the million in a single SSR pass.
+     */
     closeAllDropdowns() {
+        if (this._openDropdowns().size === 0) {
+            return;
+        }
         this._openDropdowns.set(new Set());
     }
     /**
@@ -519,6 +528,12 @@ class HubNavStateService {
     /**
      * Finds the ordered list of dropdown ancestor IDs for the active route.
      *
+     * The walk commits to the first branch it accepts, so which item it accepts has to be the
+     * most specific one at each level, not merely the first that matches: a menu whose opening
+     * entry is parked on the language prefix (`/en/`) matches every URL in the site, and being
+     * childless it ended the walk with an empty trail — every section stayed shut, whichever
+     * page you were on.
+     *
      * @param items - Items to search recursively.
      * @param activeRoute - Current router URL.
      * @param trail - Accumulated ancestor trail.
@@ -526,7 +541,7 @@ class HubNavStateService {
      */
     findActiveDropdownTrail(items, activeRoute, trail = []) {
         for (const item of items) {
-            if (!this.isItemOrDescendantActive(item, activeRoute)) {
+            if (!this.isItemActiveAmongSiblings(item, items, activeRoute)) {
                 continue;
             }
             const nextTrail = item.children?.length ? [...trail, item.id] : trail;
@@ -557,8 +572,11 @@ class HubNavStateService {
     closePanelsFromIndex(index) {
         this._panelStack.update((stack) => stack.slice(0, index));
     }
-    /** Closes all open panels. */
+    /** Closes all open panels. Skips the write when the stack is already empty, as {@link closeAllDropdowns} does. */
     closeAllPanels() {
+        if (this._panelStack().length === 0) {
+            return;
+        }
         this._panelStack.set([]);
     }
     /**
@@ -849,8 +867,14 @@ class HubNavScrollSpySectionDirective {
     /** Optional section id. When omitted, host `id` is used. */
     sectionId = input(null, { ...(ngDevMode ? { debugName: "sectionId" } : /* istanbul ignore next */ {}), alias: 'hubNavScrollSpySection' });
     el = inject((ElementRef));
-    /** Effective section id exposed to the container directive. */
-    resolvedSectionId = computed(() => this.sectionId() ?? this.el.nativeElement.id ?? null, /* @ts-ignore */
+    /**
+     * Effective section id exposed to the container directive.
+     *
+     * Falsy rather than nullish on purpose: the documented bare form, `<section id="x"
+     * hubNavScrollSpySection>`, reaches the input as the empty string, which `??` would keep —
+     * stripping the host marker attribute and leaving the container with nothing to observe.
+     */
+    resolvedSectionId = computed(() => this.sectionId() || this.el.nativeElement.id || null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedSectionId" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavScrollSpySectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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 });
@@ -1325,7 +1349,7 @@ class HubNavItemComponent {
         this.toggleDropdown.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: HubOverflowTooltipDirective, selector: "[hubOverflowTooltip]", inputs: ["hubOverflowTooltip", "placement"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "placement", "delay", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubNavItemComponent, isStandalone: true, selector: "hub-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, forceAccordionMode: { classPropertyName: "forceAccordionMode", publicName: "forceAccordionMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", toggleDropdown: "toggleDropdown" }, host: { attributes: { "role": "none" }, properties: { "class.hub-nav-item--active": "isActive()", "class.hub-nav-item--disabled": "item().disabled", "class.hub-nav-item--has-children": "hasChildren()", "class.hub-nav-item--expanded": "isExpanded()", "class.hub-nav-item--header": "isHeader()", "attr.data-item-id": "item().id" }, classAttribute: "hub-nav-item" }, ngImport: i0, template: "@if (itemTemplate()) {\n\t<!-- Custom template rendering -->\n\t<ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"templateContext()\" />\n} @else if (isHeader()) {\n\t<!-- Header item: non-interactive section label -->\n\t<span class=\"hub-nav-item__header\" role=\"presentation\">{{ item().label }}</span>\n} @else if (isLink() && resolvedRoute()) {\n\t<!-- Link item: routable anchor -->\n\t<a\n\t\tclass=\"hub-nav-item__link\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\trole=\"menuitem\"\n\t\t[routerLink]=\"resolvedRoute()\"\n\t\t[queryParams]=\"item().queryParams\"\n\t\t[fragment]=\"item().fragment\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</a>\n} @else if ((isDropdown() || hasChildren()) && resolvedRoute()) {\n\t<!-- Routable dropdown: link area navigates, caret area toggles submenu -->\n\t<div class=\"hub-nav-item__compound\">\n\t\t<a\n\t\t\tclass=\"hub-nav-item__link\"\n\t\t\t[class.hub-nav-item__link--split]=\"showCaret()\"\n\t\t\trole=\"menuitem\"\n\t\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t\t[routerLink]=\"resolvedRoute()\"\n\t\t\t[queryParams]=\"item().queryParams\"\n\t\t\t[fragment]=\"item().fragment\"\n\t\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t[attr.aria-current]=\"isActive() ? 'page' : null\"\n\t\t\t[attr.aria-expanded]=\"showCaret() ? null : isExpanded()\"\n\t\t\t[attr.aria-haspopup]=\"showCaret() ? null : true\"\n\t\t\t[tooltip]=\"railTooltip()\"\n\t\t\t[placement]=\"railTooltipPlacement()\"\n\t\t\t(click)=\"onRouteItemClick($event)\"\n\t\t>\n\t\t\t@if (item().icon) {\n\t\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t\t} @else if (railInitial()) {\n\t\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t\t}\n\t\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t\t@if (item().badge) {\n\t\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t\t}\n\t\t</a>\n\n\t\t@if (showCaret()) {\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-nav-item__caret-button\"\n\t\t\t\t[class.hub-nav-item__caret-button--active]=\"isActive()\"\n\t\t\t\t[class.hub-nav-item__caret-button--expanded]=\"isExpanded()\"\n\t\t\t\t[class.hub-nav-item__caret-button--disabled]=\"item().disabled\"\n\t\t\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t\t\t[attr.aria-label]=\"caretAriaLabel()\"\n\t\t\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t\t\t(click)=\"onCaretClick($event)\"\n\t\t\t>\n\t\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t\t</button>\n\t\t}\n\t</div>\n} @else if (isDropdown() || hasChildren()) {\n\t<!-- Dropdown trigger: button that toggles a submenu -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link hub-nav-item__dropdown-toggle\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--active]=\"isActive()\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.aria-expanded]=\"isExpanded()\"\n\t\t[attr.aria-haspopup]=\"true\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t\t@if (showCaret()) {\n\t\t\t<span class=\"hub-nav-item__caret\" aria-hidden=\"true\"></span>\n\t\t}\n\t</button>\n} @else {\n\t<!-- Fallback: non-routable item (custom or link without route) -->\n\t<button\n\t\ttype=\"button\"\n\t\tclass=\"hub-nav-item__link\"\n\t\trole=\"menuitem\"\n\t\t[class.hub-nav-item__link--disabled]=\"item().disabled\"\n\t\t[attr.tabindex]=\"item().disabled ? -1 : 0\"\n\t\t[attr.aria-disabled]=\"item().disabled || null\"\n\t\t[tooltip]=\"railTooltip()\"\n\t\t[placement]=\"railTooltipPlacement()\"\n\t\t(click)=\"onItemClick($event)\"\n\t>\n\t\t@if (item().icon) {\n\t\t\t<span class=\"hub-nav-item__icon\" [class]=\"item().icon\" aria-hidden=\"true\"></span>\n\t\t} @else if (railInitial()) {\n\t\t\t<span class=\"hub-nav-item__initial\" aria-hidden=\"true\">{{ railInitial() }}</span>\n\t\t}\n\t\t<span class=\"hub-nav-item__label\" [hubOverflowTooltip]=\"item().label\">{{ item().label }}</span>\n\t\t@if (item().badge) {\n\t\t\t<span class=\"hub-nav-item__badge\" [class]=\"item().badgeClass\">{{ item().badge }}</span>\n\t\t}\n\t</button>\n}\n", styles: [":host{display:block;position:relative}:host-context(.hub-nav-item-list--force-accordion){display:block;width:100%}.hub-nav-item__link{display:flex;align-items:center;gap:var(--hub-nav-icon-gap, .5rem);width:100%;padding:var(--hub-nav-item-padding-y, .5rem) var(--hub-nav-item-padding-x, 1rem);font-size:var(--hub-nav-item-font-size, 1rem);font-weight:var(--hub-nav-item-font-weight, 400);color:var(--hub-nav-item-color, #212529);text-decoration:none;background:none;border:0;border-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out);white-space:nowrap;font-family:inherit;line-height:var(--hub-ref-line-height-base, 1.5);text-align:start}.hub-nav-item__link:hover:not(.hub-nav-item__link--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__link--active{background-color:var(--hub-nav-item-active-bg);color:var(--hub-nav-item-active-color);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__link--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);pointer-events:none;cursor:default}.hub-nav-item__link:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}:host-context(.hub-nav--horizontal) .hub-nav-item__link--active{box-shadow:inset 0 calc(var(--hub-nav-item-active-indicator-size, 3px) * -1) 0 var(--hub-nav-item-active-indicator-color)}:host-context(.hub-nav-item-list--animated-indicator) .hub-nav-item__link--active{background-color:transparent;box-shadow:none}.hub-nav-item__compound{display:flex;align-items:stretch;width:100%}.hub-nav-item__link--split{flex:1 1 auto;min-width:0;border-start-end-radius:0;border-end-end-radius:0}.hub-nav-item__caret-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:calc(var(--hub-nav-item-font-size, 1rem) * 2.5);padding:0 var(--hub-nav-item-padding-x, 1rem);color:var(--hub-nav-item-color, #212529);background:none;border:0;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--hub-nav-item-border-radius, .25rem);border-end-end-radius:var(--hub-nav-item-border-radius, .25rem);cursor:pointer;transition:var(--hub-nav-item-transition, all .15s ease-in-out)}.hub-nav-item__caret-button:hover:not(.hub-nav-item__caret-button--disabled){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__caret-button--active{background-color:var(--hub-nav-item-active-bg, #0d6efd);color:var(--hub-nav-item-active-color, #fff)}.hub-nav-item__caret-button--disabled{color:var(--hub-nav-item-disabled-color, #6c757d);opacity:var(--hub-nav-item-disabled-opacity, .65);cursor:default}.hub-nav-item__caret-button:focus-visible{outline:2px solid var(--hub-sys-focus-ring-color, rgba(13, 110, 253, .25));outline-offset:-2px}.hub-nav-item__caret-button--expanded:not(.hub-nav-item__caret-button--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd)}.hub-nav-item__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);flex-shrink:0}.hub-nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}.hub-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-nav-badge-padding-y, .25em) var(--hub-nav-badge-padding-x, .5em);font-size:var(--hub-nav-badge-font-size, .75rem);font-weight:var(--hub-ref-font-weight-semibold, 600);line-height:1;color:var(--hub-nav-badge-color, #fff);background-color:var(--hub-nav-badge-bg, #dc3545);border-radius:var(--hub-nav-badge-border-radius, 50rem);flex-shrink:0}.hub-nav-item__caret{display:inline-block;width:0;height:0;vertical-align:middle;border-top:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid transparent;transition:var(--hub-nav-item-transition, all .15s ease-in-out);flex-shrink:0}:host(.hub-nav-item--expanded) .hub-nav-item__caret{transform:rotate(180deg)}:host(.hub-nav-item--expanded) .hub-nav-item__link:not(.hub-nav-item__link--active){background-color:var(--hub-nav-item-hover-bg, rgba(0, 0, 0, .04));color:var(--hub-nav-item-hover-color, #0d6efd);font-weight:var(--hub-nav-item-active-font-weight, 600)}.hub-nav-item__header{display:block;padding:var(--hub-nav-header-padding-y, .25rem) var(--hub-nav-header-padding-x, 1rem);margin-top:var(--hub-nav-header-margin-top, .75rem);font-size:var(--hub-nav-header-font-size, .875rem);font-weight:var(--hub-nav-header-font-weight, 600);color:var(--hub-nav-header-color, #6c757d);text-transform:uppercase;letter-spacing:.05em;cursor:default;white-space:nowrap}:host-context(.hub-nav--horizontal) .hub-nav-item__header{display:inline-flex;align-items:center;margin-top:0;margin-inline-start:0;padding-block:var(--hub-nav-header-padding-y, .25rem);padding-inline-end:var(--hub-nav-header-padding-x, 1rem);padding-inline-start:var(--hub-nav-header-horizontal-padding-inline-start, 2rem)}:host-context(.hub-nav-dropdown) .hub-nav-item__header,:host-context(.hub-nav-accordion) .hub-nav-item__header,:host-context(.hub-nav-panel__body) .hub-nav-item__header,:host-context(.hub-nav-mobile-panel__body) .hub-nav-item__header{display:block;margin-top:var(--hub-nav-header-margin-top, .75rem);margin-inline-start:0}:host-context(.hub-nav--horizontal){display:inline-flex}:host-context(.hub-nav--horizontal) .hub-nav-item__link{white-space:nowrap}:host-context(.hub-nav--horizontal):host-context(.hub-nav-dropdown) .hub-nav-item__caret{border-top:var(--hub-nav-caret-size, .3rem) solid transparent;border-bottom:var(--hub-nav-caret-size, .3rem) solid transparent;border-left:var(--hub-nav-caret-size, .3rem) solid var(--hub-nav-caret-color, currentColor);border-right:0}:host-context(.hub-nav-dropdown){display:block}:host-context(.hub-nav-item-list--force-accordion) .hub-nav-item__link{width:100%}.hub-nav-item__initial{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__link{justify-content:center;gap:0;padding-inline:0}:host-context(.hub-nav-item-list--rail) .hub-nav-item__label{flex:0 0 auto;inline-size:0;overflow:hidden}:host-context(.hub-nav-item-list--rail) .hub-nav-item__badge,:host-context(.hub-nav-item-list--rail) .hub-nav-item__caret,:host-context(.hub-nav-item-list--rail) .hub-nav-item__header{display:none}:host-context(.hub-nav-item-list--rail) .hub-nav-item__initial{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-nav-icon-size, 1em);height:var(--hub-nav-icon-size, 1em);font-weight:var(--hub-nav-item-active-font-weight, 600);text-transform:uppercase;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: HubOverflowTooltipDirective, selector: "[hubOverflowTooltip]", inputs: ["hubOverflowTooltip", "placement", "hubOverflowTooltipMeasure"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "placement", "delay", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubNavItemComponent, decorators: [{
             type: Component,
@@ -2895,18 +2919,39 @@ class HubNavComponent {
             this._lastSyncedPath = currentPath;
             return;
         }
+        // Which root the reader is now inside, resolved by the most specific match rather than
+        // the first one — the same rule {@link openPanelsFromRoute} uses. A root parked on the
+        // language prefix (`/en/`) matches every URL in the site, and taking it as the answer
+        // handed an accordion section's navigation to the panel stack.
+        const activeRootItem = items.find((item) => this.state.isItemActiveAmongSiblings(item, items, currentUrl));
+        // Nowhere in the menu — a settings screen, a 404. Whatever is open describes the page
+        // just left, so both mechanisms are cleared rather than only the panels.
+        if (!activeRootItem) {
+            this.state.closeAllDropdowns();
+            this.state.closeAllPanels();
+            this._lastSyncedPath = currentPath;
+            return;
+        }
         // An accordion opens in place, so what the route has to open is its
         // dropdown state — not the panel stack, which is the drill-down mechanism
         // and is not rendered in this mode. Deciding by collapsed-or-not alone
         // left an expanded accordion with nothing opened from the route: the
         // section somebody had just navigated into stayed shut, while a panel
         // nobody could see was opened behind the page.
-        const activeRootItem = items.find((item) => this.state.isItemOrDescendantActive(item, currentUrl));
-        if (activeRootItem && this.state.getEffectiveExpandMode(activeRootItem) === 'accordion') {
+        if (this.state.getEffectiveExpandMode(activeRootItem) === 'accordion') {
             this.state.syncDropdownsWithRoute(items, currentUrl);
+            // In a mixed nav the reader can arrive here from a root that drills down into
+            // panels, and that panel now has no owner: an accordion expands in place and
+            // never touches the stack, so nothing else would ever close it. Two sections
+            // stayed open at once, one of them the one just walked out of.
+            this.state.closeAllPanels();
             this._lastSyncedPath = currentPath;
             return;
         }
+        // The mirror of the branch above. This root does not expand in place, so any dropdown
+        // still open belongs to the section left behind — including the case of a root with no
+        // children at all, which opens neither mechanism and must therefore leave neither.
+        this.state.closeAllDropdowns();
         if (currentPath === this._lastSyncedPath && this.state.panelCount() > 0) {
             return;
         }