@hermes-ui/angular 0.1.7 → 0.2.0

package/fesm2022/hermes-ui-angular-layout-vertical-nav.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, EventEmitter, Input, HostBinding, Output, Optional, Inject, Directive, NgModule } from '@angular/core';
+import { Component, Injectable, EventEmitter, Input, HostBinding, Output, PLATFORM_ID, booleanAttribute, HostListener, Inject, Optional, Directive, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@hermes-ui/angular/utils';
 import { IfExpandService, uniqueIdFactory, HermesConditionalModule, HermesFocusOnViewInitModule } from '@hermes-ui/angular/utils';
 import { Subject, fromEvent } from 'rxjs';
 import * as i5 from '@hermes-ui/angular/icon';
-import { ClarityIcons, angleIcon, angleDoubleIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import { HermesIcons, angleIcon, angleDoubleIcon, barsIcon, checkIcon, pinIcon, unpinIcon, twoWayArrowsIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { takeUntil } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
 
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -60,12 +60,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 class VerticalNavGroupRegistrationService {
     constructor() {
         this.navGroupCount = 0;
+        this.groups = new Set();
     }
-    registerNavGroup() {
+    registerNavGroup(group) {
         this.navGroupCount++;
+        if (group) {
+            this.groups.add(group);
+        }
     }
-    unregisterNavGroup() {
+    unregisterNavGroup(group) {
         this.navGroupCount--;
+        if (group) {
+            this.groups.delete(group);
+        }
+    }
+    /** Expands every group registered right now. */
+    expandAll() {
+        this.groups.forEach(group => group.expandGroup());
+    }
+    /** Collapses every group registered right now. */
+    collapseAll() {
+        this.groups.forEach(group => group.collapseGroup());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VerticalNavGroupRegistrationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VerticalNavGroupRegistrationService }); }
@@ -144,7 +159,7 @@ class HermesVerticalNavGroup {
         this.wasExpanded = false;
         this._subscriptions = [];
         this._expandAnimationState = COLLAPSED_STATE;
-        _navGroupRegistrationService.registerNavGroup();
+        _navGroupRegistrationService.registerNavGroup(this);
         // FIXME: This subscription handles a corner case
         // Vertical Nav collapse requires the animation to run first and then
         // remove the nodes from the DOM. If the user directly sets the input
@@ -217,7 +232,7 @@ class HermesVerticalNavGroup {
     }
     ngOnDestroy() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
-        this._navGroupRegistrationService.unregisterNavGroup();
+        this._navGroupRegistrationService.unregisterNavGroup(this);
     }
     expandGroup() {
         this.expanded = true;
@@ -249,7 +264,7 @@ class HermesVerticalNavGroup {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNavGroup, deps: [{ token: i1.IfExpandService }, { token: VerticalNavGroupRegistrationService }, { token: VerticalNavGroupService }, { token: VerticalNavService }, { token: i1.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesVerticalNavGroup, isStandalone: false, selector: "hermes-vertical-nav-group", inputs: { userExpandedInput: ["hermesVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "hermesVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-group-content\">\r\n  <ng-content select=\"[hermesVerticalNavLink]\"></ng-content>\r\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\r\n    <ng-content select=\"[hermesVerticalNavIcon]\"></ng-content>\r\n    <div class=\"nav-group-text\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <hermes-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'down' : 'right'\"></hermes-icon>\r\n  </button>\r\n</div>\r\n<!--TODO: This animation needs to be added to the hermes-vertical-nav-group-children component-->\r\n<div class=\"nav-group-children\" [@hermesExpand]=\"expandAnimationState\" (@hermesExpand.done)=\"expandAnimationDone($event)\">\r\n  <ng-content select=\"[hermesIfExpanded], hermes-vertical-nav-group-children\"></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesVerticalNavGroup, isStandalone: false, selector: "hermes-vertical-nav-group", inputs: { userExpandedInput: ["hermesVerticalNavGroupExpanded", "userExpandedInput"] }, outputs: { expandedChange: "hermesVerticalNavGroupExpandedChange" }, host: { properties: { "class.is-expanded": "this.expanded" }, classAttribute: "nav-group" }, providers: [IfExpandService, VerticalNavGroupService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-group-content\">\r\n  <ng-content select=\"[hermesVerticalNavLink]\"></ng-content>\r\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\r\n    <ng-content select=\"[hermesVerticalNavIcon]\"></ng-content>\r\n    <div class=\"nav-group-text\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <hermes-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'up' : 'down'\"></hermes-icon>\r\n  </button>\r\n</div>\r\n<!--TODO: This animation needs to be added to the hermes-vertical-nav-group-children component-->\r\n<div class=\"nav-group-children\" [@hermesExpand]=\"expandAnimationState\" (@hermesExpand.done)=\"expandAnimationDone($event)\">\r\n  <ng-content select=\"[hermesIfExpanded], hermes-vertical-nav-group-children\"></ng-content>\r\n</div>\r\n", dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], animations: [
             trigger('hermesExpand', [
                 state(EXPANDED_STATE, style({ height: '*' })),
                 state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
@@ -265,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                             state(COLLAPSED_STATE, style({ height: 0, visibility: 'hidden' })),
                             transition(`${EXPANDED_STATE} <=> ${COLLAPSED_STATE}`, animate('0.2s ease-in-out')),
                         ]),
-                    ], host: { class: 'nav-group' }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-group-content\">\r\n  <ng-content select=\"[hermesVerticalNavLink]\"></ng-content>\r\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\r\n    <ng-content select=\"[hermesVerticalNavIcon]\"></ng-content>\r\n    <div class=\"nav-group-text\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <hermes-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'down' : 'right'\"></hermes-icon>\r\n  </button>\r\n</div>\r\n<!--TODO: This animation needs to be added to the hermes-vertical-nav-group-children component-->\r\n<div class=\"nav-group-children\" [@hermesExpand]=\"expandAnimationState\" (@hermesExpand.done)=\"expandAnimationDone($event)\">\r\n  <ng-content select=\"[hermesIfExpanded], hermes-vertical-nav-group-children\"></ng-content>\r\n</div>\r\n" }]
+                    ], host: { class: 'nav-group' }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-group-content\">\r\n  <ng-content select=\"[hermesVerticalNavLink]\"></ng-content>\r\n  <button class=\"nav-group-trigger\" type=\"button\" [attr.aria-expanded]=\"expanded\" (click)=\"toggleExpand()\">\r\n    <ng-content select=\"[hermesVerticalNavIcon]\"></ng-content>\r\n    <div class=\"nav-group-text\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <hermes-icon shape=\"angle\" class=\"nav-group-trigger-icon\" [direction]=\"expanded ? 'up' : 'down'\"></hermes-icon>\r\n  </button>\r\n</div>\r\n<!--TODO: This animation needs to be added to the hermes-vertical-nav-group-children component-->\r\n<div class=\"nav-group-children\" [@hermesExpand]=\"expandAnimationState\" (@hermesExpand.done)=\"expandAnimationDone($event)\">\r\n  <ng-content select=\"[hermesIfExpanded], hermes-vertical-nav-group-children\"></ng-content>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1.IfExpandService }, { type: VerticalNavGroupRegistrationService }, { type: VerticalNavGroupService }, { type: VerticalNavService }, { type: i1.HermesCommonStringsService }], propDecorators: { expandedChange: [{
                 type: Output,
                 args: ['hermesVerticalNavGroupExpandedChange']
@@ -309,39 +324,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+const MODES = [
+    { id: 'auto', shape: 'two-way-arrows' },
+    { id: 'fixed', shape: 'pin' },
+    { id: 'compact', shape: 'bars' },
+];
+// Mirrors `--hermes-vertical-nav-transition-duration` (0.2s): how long the width takes to settle.
+const TRANSITION_MS = 200;
+// Measuring at the exact instant the transition ends is a coin flip - the last frame lands before or
+// after the timer. A small margin takes the measurement out of the race without being noticeable.
+const MEASURE_MARGIN_MS = 60;
+// Below this a label is not really laid out: it's the 1x1 screen-reader-only box of a collapsed nav,
+// or a node that hasn't been measured yet.
+const MIN_LABEL_WIDTH_PX = 8;
+// Room left between the end of the longest label and the end of its box, so the hover pill and the
+// selected tint don't end flush against the divider.
+const LABEL_BREATHING_PX = 8;
+const MEASURED_WIDTH_PROPERTY = '--hermes-vertical-nav-measured-width';
 class HermesVerticalNav {
-    onPeekEnter() {
-        if (this.pinnable && this.collapsed) {
-            this.peeking = true;
-        }
-    }
-    onPeekLeave() {
-        this.peeking = false;
-    }
-    constructor(_navService, _navIconService, _navGroupRegistrationService, commonStrings) {
+    /**
+     * Makes the nav manage its own collapsed state from a behavior mode (see `HermesVerticalNavMode`),
+     * including the hover/focus reaction of `auto`. `null` (the default) leaves the collapsed state to
+     * `hermesVerticalNavCollapsed` and the built-in toggle button, as before.
+     */
+    get mode() {
+        return this._mode;
+    }
+    set mode(value) {
+        this._mode = value ?? null;
+        this.syncCollapsible();
+        this.applyMode();
+    }
+    constructor(_navService, _navIconService, _navGroupRegistrationService, commonStrings, host, cdr, zone, platformId) {
         this._navService = _navService;
         this._navIconService = _navIconService;
         this._navGroupRegistrationService = _navGroupRegistrationService;
         this.commonStrings = commonStrings;
+        this.host = host;
+        this.cdr = cdr;
+        this.zone = zone;
         /** Quando true, o toggle vira semanticamente um "fixar aberta/fechada" (ícones
          *  pin/unpin em vez do chevron duplo genérico) e habilita o hover-peek: passar
          *  o mouse enquanto colapsada e não fixada expande temporariamente (ver
-         *  onPeekEnter/onPeekLeave abaixo), sem persistir nem emitir o output. */
+         *  onPointerEnter/onPointerLeave abaixo), sem persistir nem emitir o output. */
         this.pinnable = false;
+        /** Shows the footer with the behavior menu and the expand-all / collapse-all buttons. Needs a mode. */
+        this.footer = false;
+        /**
+         * Lets the width of the open nav grow (up to `--hermes-vertical-nav-max-width`) to fit the longest
+         * label in view. Only applies to a nav with a mode.
+         */
+        this.autoWidth = true;
+        this.modeChange = new EventEmitter();
+        this._collapsedChanged = new EventEmitter(true);
         this.contentId = uniqueIdFactory();
+        this.modes = MODES;
         /** true só enquanto o mouse está sobre uma nav colapsada e "pinnable" —
          *  não persiste, não afeta `collapsed`/o output, é puramente visual. */
         this.peeking = false;
-        this._collapsedChanged = new EventEmitter(true);
+        this.menuOpen = false;
+        this._mode = null;
+        this._collapsibleInput = false;
+        this.hovered = false;
+        this.focusedVisible = false;
+        this.isBrowser = isPlatformBrowser(platformId);
         this._sub = _navService.collapsedChanged.subscribe(value => {
             this._collapsedChanged.emit(value);
+            if (!value) {
+                this.scheduleMeasure();
+            }
         });
     }
     get collapsible() {
         return this._navService.collapsible;
     }
     set collapsible(value) {
-        this._navService.collapsible = value;
+        this._collapsibleInput = !!value;
+        this.syncCollapsible();
     }
     get collapsed() {
         return this._navService.collapsed;
@@ -349,6 +408,17 @@ class HermesVerticalNav {
     set collapsed(value) {
         this._navService.collapsed = value;
     }
+    /** The nav derives its collapsed state from a mode, instead of from the collapsed input. */
+    get managed() {
+        return this._mode !== null;
+    }
+    /** In `auto` mode the nav sits on top of the content instead of pushing it. */
+    get overlay() {
+        return this._mode === 'auto';
+    }
+    get showFooter() {
+        return this.footer && this.managed;
+    }
     get hasNavGroups() {
         return this._navGroupRegistrationService.navGroupCount > 0;
     }
@@ -361,14 +431,268 @@ class HermesVerticalNav {
         }
         return !this.collapsed ? 'true' : 'false';
     }
+    /** The built-in top toggle is replaced by the footer once the nav manages itself. */
+    get showToggle() {
+        return !!this.collapsible && !this.managed;
+    }
+    get currentMode() {
+        return MODES.find(mode => mode.id === this._mode) ?? MODES[0];
+    }
+    get currentModeLabel() {
+        return this.label(this.currentMode.id);
+    }
+    label(key) {
+        const strings = this.commonStrings.keys;
+        const fallback = {
+            behavior: strings.verticalNavBehavior,
+            auto: strings.verticalNavModeAuto,
+            fixed: strings.verticalNavModeFixed,
+            compact: strings.verticalNavModeCompact,
+            expandAll: strings.verticalNavExpandAll,
+            collapseAll: strings.verticalNavCollapseAll,
+        };
+        return this.footerLabels?.[key] ?? fallback[key];
+    }
+    ngAfterViewInit() {
+        if (!this.isBrowser) {
+            return;
+        }
+        // The host can be created under a pointer that is already resting on it (e.g. the nav lives inside
+        // each routed page and is recreated on every navigation). Browsers don't always fire `mouseenter`
+        // for that, so ask the browser directly; it may take a frame to update `:hover`, hence two tries.
+        if (this.managed) {
+            [0, 150].forEach(delay => setTimeout(() => this.syncHoverFromDom(), delay));
+        }
+        // Anything that changes what's in view - a group opening, lazy content, translated labels -
+        // changes which label is the longest, so it asks for a new measurement.
+        this.zone.runOutsideAngular(() => {
+            const content = this.host.nativeElement.querySelector('.nav-content');
+            if (content && typeof MutationObserver !== 'undefined') {
+                this.observer = new MutationObserver(() => this.scheduleMeasure());
+                this.observer.observe(content, {
+                    childList: true,
+                    subtree: true,
+                    characterData: true,
+                    attributes: true,
+                    attributeFilter: ['class'],
+                });
+            }
+        });
+        this.scheduleMeasure();
+    }
     ngOnDestroy() {
         this._sub.unsubscribe();
+        this.observer?.disconnect();
+        clearTimeout(this.measureTimer);
     }
     toggleByButton() {
         this.collapsed = !this.collapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: i1.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesVerticalNav, isStandalone: false, selector: "hermes-vertical-nav", inputs: { toggleLabel: ["hermesVerticalNavToggleLabel", "toggleLabel"], pinnable: ["hermesVerticalNavPinnable", "pinnable"], collapsible: ["hermesVerticalNavCollapsible", "collapsible"], collapsed: ["hermesVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "hermesVerticalNavCollapsedChange" }, host: { listeners: { "mouseenter": "onPeekEnter()", "mouseleave": "onPeekLeave()" }, properties: { "class.is-collapsed": "collapsed && !peeking", "class.is-peeking": "peeking", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons", "class.is-pinnable": "pinnable" }, classAttribute: "hermes-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (collapsible) {\r\n<button\r\n  type=\"button\"\r\n  class=\"nav-trigger\"\r\n  [class.on-collapse]=\"collapsed\"\r\n  [attr.aria-controls]=\"contentId\"\r\n  [attr.aria-expanded]=\"ariaExpanded\"\r\n  [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n  (click)=\"toggleByButton()\"\r\n>\r\n  @if (pinnable) {\r\n    <hermes-icon [shape]=\"collapsed ? 'pin' : 'unpin'\" class=\"nav-trigger-icon\"></hermes-icon>\r\n  } @else {\r\n    <hermes-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></hermes-icon>\r\n  }\r\n</button>\r\n}\r\n<div [id]=\"contentId\" class=\"nav-content\">\r\n  <ng-content></ng-content>\r\n  @if (collapsible && collapsed) {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"collapsed = false\"\r\n    class=\"nav-btn\"\r\n    aria-hidden=\"true\"\r\n    tabindex=\"-1\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n  ></button>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
+    onPointerEnter() {
+        if (this.pinnable && this.collapsed) {
+            this.peeking = true;
+        }
+        if (this._mode === 'auto') {
+            this.hovered = true;
+            this.applyMode();
+        }
+    }
+    onPointerLeave() {
+        this.peeking = false;
+        if (this._mode === 'auto') {
+            this.hovered = false;
+            this.applyMode();
+        }
+    }
+    /**
+     * Only keyboard focus (`:focus-visible`) holds the nav open. Clicking a link also focuses it, and
+     * click-focus alone would keep the nav open until something else was clicked - `:focus-visible` is
+     * exactly the browser's own pointer-vs-keyboard distinction, so pointer-triggered focus is left to
+     * the pointer's own enter/leave.
+     */
+    onFocusIn(event) {
+        if (this._mode !== 'auto') {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        try {
+            if (target.matches(':focus-visible')) {
+                this.focusedVisible = true;
+                this.applyMode();
+            }
+        }
+        catch {
+            // :focus-visible unsupported in this engine; the pointer alone decides.
+        }
+    }
+    /**
+     * Focus keeps the nav open only while it is still inside it. A missing `relatedTarget` counts as
+     * leaving: clicking a routed link can unmount the focused element, and treating that as "still
+     * inside" would pin the nav open for good.
+     */
+    onFocusOut(event) {
+        if (this._mode !== 'auto') {
+            return;
+        }
+        const related = event.relatedTarget;
+        const stillInside = related instanceof Node && this.host.nativeElement.contains(related);
+        if (!stillInside) {
+            this.focusedVisible = false;
+            this.applyMode();
+        }
+    }
+    // --- Footer ---------------------------------------------------------------------------------
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+        this.applyMode();
+    }
+    closeMenu(restoreFocus = false) {
+        if (!this.menuOpen) {
+            return;
+        }
+        this.menuOpen = false;
+        this.applyMode();
+        if (restoreFocus) {
+            this.host.nativeElement.querySelector('.nav-footer-mode-btn')?.focus();
+        }
+    }
+    selectMode(mode) {
+        this.menuOpen = false;
+        this.setMode(mode);
+        this.host.nativeElement.querySelector('.nav-footer-mode-btn')?.focus();
+    }
+    /** The footer's "expand all": opens every group, leaving `compact` first since it has nowhere to show them. */
+    expandAll() {
+        this.ensureExpanded();
+        this._navGroupRegistrationService.expandAll();
+    }
+    collapseAll() {
+        this._navGroupRegistrationService.collapseAll();
+    }
+    onFooterFocusOut(event) {
+        const related = event.relatedTarget;
+        const footer = event.currentTarget;
+        if (!(related instanceof Node && footer.contains(related))) {
+            this.closeMenu();
+        }
+    }
+    onDocumentClick(event) {
+        if (this.menuOpen && !this.host.nativeElement.querySelector('.nav-footer')?.contains(event.target)) {
+            this.closeMenu();
+        }
+    }
+    // --- Internals ------------------------------------------------------------------------------
+    syncCollapsible() {
+        this._navService.collapsible = this._collapsibleInput || this.managed;
+    }
+    setMode(mode) {
+        if (this._mode !== mode) {
+            this._mode = mode;
+            this.modeChange.emit(mode);
+        }
+        this.syncCollapsible();
+        this.applyMode();
+    }
+    ensureExpanded() {
+        if (this._mode === 'compact') {
+            this.setMode('fixed');
+        }
+        else if (this.collapsed) {
+            this.collapsed = false;
+        }
+    }
+    /**
+     * Derives the collapsed state from the mode. `auto` stays open while the pointer or the keyboard is
+     * on the nav, and also while its own menu is open - otherwise reaching for the menu, which sits
+     * over the list, could collapse the nav under the pointer.
+     */
+    applyMode() {
+        if (!this.managed) {
+            return;
+        }
+        let collapsed;
+        switch (this._mode) {
+            case 'fixed':
+                collapsed = false;
+                break;
+            case 'compact':
+                collapsed = true;
+                break;
+            default:
+                collapsed = !(this.hovered || this.focusedVisible || this.menuOpen);
+        }
+        this.collapsed = collapsed;
+    }
+    syncHoverFromDom() {
+        if (this._mode !== 'auto') {
+            return;
+        }
+        let hovering = false;
+        try {
+            hovering = this.host.nativeElement.matches(':hover');
+        }
+        catch {
+            return;
+        }
+        if (hovering !== this.hovered) {
+            this.hovered = hovering;
+            this.applyMode();
+            this.cdr.markForCheck();
+        }
+    }
+    scheduleMeasure() {
+        if (!this.isBrowser || !this.managed || !this.autoWidth) {
+            return;
+        }
+        clearTimeout(this.measureTimer);
+        this.zone.runOutsideAngular(() => {
+            this.measureTimer = setTimeout(() => this.measureWidth(), TRANSITION_MS + MEASURE_MARGIN_MS);
+        });
+    }
+    /**
+     * The smallest width at which every label in view fits whole. CSS clamps it between the nav's
+     * `min-width` and `max-width`, so this only reports what the labels ask for.
+     *
+     * The measurement is absolute rather than an adjustment on the current width: each label reports the
+     * column width it needs (everything around it plus its own text), and the largest wins. Measuring
+     * twice in a row gives the same number whether the column is wide or at its floor.
+     *
+     * Only labels in view count. A closed group's children stay in the DOM (that's how their height
+     * animates) but are `visibility: hidden`, and the nav shouldn't grow to fit text nobody sees.
+     */
+    measureWidth() {
+        const root = this.host.nativeElement;
+        const panel = root.querySelector('.nav-panel');
+        if (!panel || root.classList.contains('is-collapsed') || !this.managed || !this.autoWidth) {
+            return;
+        }
+        const panelWidth = panel.getBoundingClientRect().width;
+        const range = document.createRange();
+        let needed = 0;
+        root.querySelectorAll('.nav-content .nav-text, .nav-content .nav-group-text').forEach(label => {
+            const hiddenBy = label.closest('.nav-group-children');
+            if (hiddenBy && getComputedStyle(hiddenBy).visibility === 'hidden') {
+                return;
+            }
+            const box = label.getBoundingClientRect().width;
+            if (box < MIN_LABEL_WIDTH_PX) {
+                return;
+            }
+            range.selectNodeContents(label);
+            needed = Math.max(needed, panelWidth - box + range.getBoundingClientRect().width + LABEL_BREATHING_PX);
+        });
+        range.detach();
+        // No measurable label: the list isn't laid out yet. Leaving the width alone is right - guessing
+        // is what makes a column jump on its own.
+        if (needed > 0) {
+            root.style.setProperty(MEASURED_WIDTH_PROPERTY, `${Math.ceil(needed)}px`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNav, deps: [{ token: VerticalNavService }, { token: VerticalNavIconService }, { token: VerticalNavGroupRegistrationService }, { token: i1.HermesCommonStringsService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesVerticalNav, isStandalone: false, selector: "hermes-vertical-nav", inputs: { toggleLabel: ["hermesVerticalNavToggleLabel", "toggleLabel"], pinnable: ["hermesVerticalNavPinnable", "pinnable"], ariaLabel: ["hermesVerticalNavLabel", "ariaLabel"], mode: ["hermesVerticalNavMode", "mode"], footer: ["hermesVerticalNavFooter", "footer", booleanAttribute], autoWidth: ["hermesVerticalNavAutoWidth", "autoWidth", booleanAttribute], footerLabels: ["hermesVerticalNavFooterLabels", "footerLabels"], collapsible: ["hermesVerticalNavCollapsible", "collapsible"], collapsed: ["hermesVerticalNavCollapsed", "collapsed"] }, outputs: { modeChange: "hermesVerticalNavModeChange", _collapsedChanged: "hermesVerticalNavCollapsedChange" }, host: { listeners: { "mouseenter": "onPointerEnter()", "mouseleave": "onPointerLeave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.is-collapsed": "collapsed && !peeking", "class.is-peeking": "peeking", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons", "class.is-pinnable": "pinnable", "class.is-overlay": "overlay", "class.has-footer": "showFooter", "attr.role": "ariaLabel ? \"navigation\" : null", "attr.aria-label": "ariaLabel || null" }, classAttribute: "hermes-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-panel\">\r\n  @if (showToggle) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"nav-trigger\"\r\n    [class.on-collapse]=\"collapsed\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n    (click)=\"toggleByButton()\"\r\n  >\r\n    @if (pinnable) {\r\n      <hermes-icon [shape]=\"collapsed ? 'pin' : 'unpin'\" class=\"nav-trigger-icon\"></hermes-icon>\r\n    } @else {\r\n      <hermes-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></hermes-icon>\r\n    }\r\n  </button>\r\n  }\r\n  <div [id]=\"contentId\" class=\"nav-content\">\r\n    <ng-content></ng-content>\r\n    @if (collapsible && collapsed && !managed) {\r\n    <button\r\n      type=\"button\"\r\n      (click)=\"collapsed = false\"\r\n      class=\"nav-btn\"\r\n      aria-hidden=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-controls]=\"contentId\"\r\n      [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n    ></button>\r\n    }\r\n  </div>\r\n  @if (showFooter) {\r\n  <div class=\"nav-footer\" (focusout)=\"onFooterFocusOut($event)\" (keydown.escape)=\"closeMenu(true)\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-mode-btn\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-expanded]=\"menuOpen\"\r\n      [attr.aria-label]=\"label('behavior') + ': ' + currentModeLabel\"\r\n      [title]=\"label('behavior') + ': ' + currentModeLabel\"\r\n      (click)=\"toggleMenu()\"\r\n    >\r\n      <hermes-icon [shape]=\"currentMode.shape\"></hermes-icon>\r\n    </button>\r\n    <span class=\"nav-footer-mode\">{{ currentModeLabel }}</span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-batch\"\r\n      [attr.aria-label]=\"label('expandAll')\"\r\n      [title]=\"label('expandAll')\"\r\n      (click)=\"expandAll()\"\r\n    >\r\n      <hermes-icon shape=\"angle-double\" direction=\"down\"></hermes-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-batch\"\r\n      [attr.aria-label]=\"label('collapseAll')\"\r\n      [title]=\"label('collapseAll')\"\r\n      (click)=\"collapseAll()\"\r\n    >\r\n      <hermes-icon shape=\"angle-double\" direction=\"up\"></hermes-icon>\r\n    </button>\r\n    @if (menuOpen) {\r\n    <div class=\"nav-footer-menu\" role=\"menu\" [attr.aria-label]=\"label('behavior')\">\r\n      @for (item of modes; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"nav-footer-menu-item\"\r\n        role=\"menuitemradio\"\r\n        [attr.aria-checked]=\"item.id === mode\"\r\n        (click)=\"selectMode(item.id)\"\r\n      >\r\n        <hermes-icon [shape]=\"item.shape\"></hermes-icon>\r\n        <span class=\"nav-footer-menu-label\">{{ label(item.id) }}</span>\r\n        @if (item.id === mode) {\r\n        <hermes-icon shape=\"check\"></hermes-icon>\r\n        }\r\n      </button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNav, decorators: [{
             type: Component,
@@ -384,15 +708,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[class.has-nav-groups]': 'hasNavGroups',
                         '[class.has-icons]': 'hasIcons',
                         '[class.is-pinnable]': 'pinnable',
-                        '(mouseenter)': 'onPeekEnter()',
-                        '(mouseleave)': 'onPeekLeave()',
-                    }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (collapsible) {\r\n<button\r\n  type=\"button\"\r\n  class=\"nav-trigger\"\r\n  [class.on-collapse]=\"collapsed\"\r\n  [attr.aria-controls]=\"contentId\"\r\n  [attr.aria-expanded]=\"ariaExpanded\"\r\n  [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n  (click)=\"toggleByButton()\"\r\n>\r\n  @if (pinnable) {\r\n    <hermes-icon [shape]=\"collapsed ? 'pin' : 'unpin'\" class=\"nav-trigger-icon\"></hermes-icon>\r\n  } @else {\r\n    <hermes-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></hermes-icon>\r\n  }\r\n</button>\r\n}\r\n<div [id]=\"contentId\" class=\"nav-content\">\r\n  <ng-content></ng-content>\r\n  @if (collapsible && collapsed) {\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"collapsed = false\"\r\n    class=\"nav-btn\"\r\n    aria-hidden=\"true\"\r\n    tabindex=\"-1\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n  ></button>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: i1.HermesCommonStringsService }], propDecorators: { toggleLabel: [{
+                        '[class.is-overlay]': 'overlay',
+                        '[class.has-footer]': 'showFooter',
+                        '[attr.role]': 'ariaLabel ? "navigation" : null',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '(mouseenter)': 'onPointerEnter()',
+                        '(mouseleave)': 'onPointerLeave()',
+                        '(focusin)': 'onFocusIn($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n<div class=\"nav-panel\">\r\n  @if (showToggle) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"nav-trigger\"\r\n    [class.on-collapse]=\"collapsed\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-expanded]=\"ariaExpanded\"\r\n    [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n    (click)=\"toggleByButton()\"\r\n  >\r\n    @if (pinnable) {\r\n      <hermes-icon [shape]=\"collapsed ? 'pin' : 'unpin'\" class=\"nav-trigger-icon\"></hermes-icon>\r\n    } @else {\r\n      <hermes-icon shape=\"angle-double\" class=\"nav-trigger-icon\" [direction]=\"(collapsed) ? 'right' : 'left'\"></hermes-icon>\r\n    }\r\n  </button>\r\n  }\r\n  <div [id]=\"contentId\" class=\"nav-content\">\r\n    <ng-content></ng-content>\r\n    @if (collapsible && collapsed && !managed) {\r\n    <button\r\n      type=\"button\"\r\n      (click)=\"collapsed = false\"\r\n      class=\"nav-btn\"\r\n      aria-hidden=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-controls]=\"contentId\"\r\n      [attr.aria-label]=\"toggleLabel || commonStrings.keys.verticalNavToggle\"\r\n    ></button>\r\n    }\r\n  </div>\r\n  @if (showFooter) {\r\n  <div class=\"nav-footer\" (focusout)=\"onFooterFocusOut($event)\" (keydown.escape)=\"closeMenu(true)\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-mode-btn\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-expanded]=\"menuOpen\"\r\n      [attr.aria-label]=\"label('behavior') + ': ' + currentModeLabel\"\r\n      [title]=\"label('behavior') + ': ' + currentModeLabel\"\r\n      (click)=\"toggleMenu()\"\r\n    >\r\n      <hermes-icon [shape]=\"currentMode.shape\"></hermes-icon>\r\n    </button>\r\n    <span class=\"nav-footer-mode\">{{ currentModeLabel }}</span>\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-batch\"\r\n      [attr.aria-label]=\"label('expandAll')\"\r\n      [title]=\"label('expandAll')\"\r\n      (click)=\"expandAll()\"\r\n    >\r\n      <hermes-icon shape=\"angle-double\" direction=\"down\"></hermes-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"nav-footer-btn nav-footer-batch\"\r\n      [attr.aria-label]=\"label('collapseAll')\"\r\n      [title]=\"label('collapseAll')\"\r\n      (click)=\"collapseAll()\"\r\n    >\r\n      <hermes-icon shape=\"angle-double\" direction=\"up\"></hermes-icon>\r\n    </button>\r\n    @if (menuOpen) {\r\n    <div class=\"nav-footer-menu\" role=\"menu\" [attr.aria-label]=\"label('behavior')\">\r\n      @for (item of modes; track item.id) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"nav-footer-menu-item\"\r\n        role=\"menuitemradio\"\r\n        [attr.aria-checked]=\"item.id === mode\"\r\n        (click)=\"selectMode(item.id)\"\r\n      >\r\n        <hermes-icon [shape]=\"item.shape\"></hermes-icon>\r\n        <span class=\"nav-footer-menu-label\">{{ label(item.id) }}</span>\r\n        @if (item.id === mode) {\r\n        <hermes-icon shape=\"check\"></hermes-icon>\r\n        }\r\n      </button>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: VerticalNavService }, { type: VerticalNavIconService }, { type: VerticalNavGroupRegistrationService }, { type: i1.HermesCommonStringsService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { toggleLabel: [{
                 type: Input,
                 args: ['hermesVerticalNavToggleLabel']
             }], pinnable: [{
                 type: Input,
                 args: ['hermesVerticalNavPinnable']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['hermesVerticalNavLabel']
+            }], mode: [{
+                type: Input,
+                args: ['hermesVerticalNavMode']
+            }], footer: [{
+                type: Input,
+                args: [{ alias: 'hermesVerticalNavFooter', transform: booleanAttribute }]
+            }], autoWidth: [{
+                type: Input,
+                args: [{ alias: 'hermesVerticalNavAutoWidth', transform: booleanAttribute }]
+            }], footerLabels: [{
+                type: Input,
+                args: ['hermesVerticalNavFooterLabels']
+            }], modeChange: [{
+                type: Output,
+                args: ['hermesVerticalNavModeChange']
             }], _collapsedChanged: [{
                 type: Output,
                 args: ['hermesVerticalNavCollapsedChange']
@@ -402,6 +753,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }], collapsed: [{
                 type: Input,
                 args: ['hermesVerticalNavCollapsed']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 /*
@@ -497,7 +851,7 @@ const HERMES_VERTICAL_NAV_DIRECTIVES = [
 ];
 class HermesVerticalNavModule {
     constructor() {
-        ClarityIcons.addIcons(angleIcon, angleDoubleIcon);
+        HermesIcons.addIcons(angleIcon, angleDoubleIcon, barsIcon, checkIcon, pinIcon, unpinIcon, twoWayArrowsIcon);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesVerticalNavModule, declarations: [HermesVerticalNav,