@memberjunction/ng-ui-components 5.51.0 → 6.1.0-edge.1

package/dist/lib/left-nav/left-nav.component.js

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, HostBinding, HostListener, Input, NgZone, Output, inject, } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
@@ -14,164 +14,191 @@ function MJLeftNavComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.ActiveTriggerItem.icon);
 } }
-function MJLeftNavComponent_For_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
+function MJLeftNavComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 13);
+    i0.ɵɵlistener("click", function MJLeftNavComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
+    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "div", 15);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("margin-left", ctx_r1.CollapseToggleMarginPx, "px");
+    i0.ɵɵproperty("title", ctx_r1.Collapsed ? "Expand navigation" : "Collapse navigation");
+    i0.ɵɵattribute("aria-label", ctx_r1.Collapsed ? "Expand navigation" : "Collapse navigation")("aria-expanded", !ctx_r1.Collapsed)("aria-controls", ctx_r1.NavRegionId);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-angles-right", ctx_r1.Collapsed)("fa-angles-left", !ctx_r1.Collapsed);
+} }
+function MJLeftNavComponent_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r3 = i0.ɵɵnextContext().$implicit;
+    const section_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(section_r3.label);
+    i0.ɵɵtextInterpolate(section_r4.label);
 } }
-function MJLeftNavComponent_For_14_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_For_15_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_For_14_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_For_14_For_2_ng_container_0_Template, 1, 0, "ng-container", 14);
+function MJLeftNavComponent_For_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_For_15_For_2_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    const section_r3 = i0.ɵɵnextContext().$implicit;
+    const item_r5 = ctx.$implicit;
+    const section_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    const itemTpl_r5 = i0.ɵɵreference(17);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r4, ctx_r1.HasExpandableItems(section_r3.items)));
+    const itemTpl_r6 = i0.ɵɵreference(18);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r5, ctx_r1.ShowTreeStructure && ctx_r1.HasExpandableItems(section_r4.items)));
 } }
-function MJLeftNavComponent_For_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_For_14_Conditional_0_Template, 2, 1, "div", 13);
-    i0.ɵɵrepeaterCreate(1, MJLeftNavComponent_For_14_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
+function MJLeftNavComponent_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_For_15_Conditional_0_Template, 2, 1, "div", 16);
+    i0.ɵɵrepeaterCreate(1, MJLeftNavComponent_For_15_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
 } if (rf & 2) {
-    const section_r3 = ctx.$implicit;
-    i0.ɵɵconditional(section_r3.label ? 0 : -1);
+    const section_r4 = ctx.$implicit;
+    i0.ɵɵconditional(section_r4.label ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(section_r3.items);
+    i0.ɵɵrepeater(section_r4.items);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 18);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r6); const item_r7 = i0.ɵɵnextContext(2).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemToggle($event, item_r7)); });
-    i0.ɵɵelement(1, "i", 19);
+function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const item_r8 = i0.ɵɵnextContext(2).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemToggle($event, item_r8)); });
+    i0.ɵɵelement(1, "i", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).item;
+    const item_r8 = i0.ɵɵnextContext(2).item;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-label", ctx_r1.IsExpanded(item_r7.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r1.IsExpanded(item_r7.id));
+    i0.ɵɵattribute("aria-label", ctx_r1.IsExpanded(item_r8.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r1.IsExpanded(item_r8.id));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsExpanded(item_r7.id))("fa-chevron-right", !ctx_r1.IsExpanded(item_r7.id));
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsExpanded(item_r8.id))("fa-chevron-right", !ctx_r1.IsExpanded(item_r8.id));
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 17);
+function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 20);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_17_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 14);
+function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const child_r8 = ctx.$implicit;
-    const ctx_r8 = i0.ɵɵnextContext(3);
-    const depth_r10 = ctx_r8.depth;
-    const hasExpandable_r11 = ctx_r8.hasExpandable;
+    const child_r9 = ctx.$implicit;
+    const ctx_r9 = i0.ɵɵnextContext(3);
+    const depth_r11 = ctx_r9.depth;
+    const hasExpandable_r12 = ctx_r9.hasExpandable;
     i0.ɵɵnextContext();
-    const itemTpl_r5 = i0.ɵɵreference(17);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r8, depth_r10 + 1, hasExpandable_r11));
+    const itemTpl_r6 = i0.ɵɵreference(18);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r9, depth_r11 + 1, hasExpandable_r12));
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_For_1_Template, 1, 6, "ng-container", null, _forTrack0);
+function MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_For_1_Template, 1, 6, "ng-container", null, _forTrack0);
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).item;
-    i0.ɵɵrepeater(item_r7.children);
+    const item_r8 = i0.ɵɵnextContext(2).item;
+    i0.ɵɵrepeater(item_r8.children);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_1_Template, 2, 6, "button", 16)(2, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_2_Template, 1, 0, "span", 17);
-    i0.ɵɵtemplate(3, MJLeftNavComponent_ng_template_16_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 14);
+function MJLeftNavComponent_ng_template_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_1_Template, 2, 6, "button", 19)(2, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_2_Template, 1, 0, "span", 20);
+    i0.ɵɵtemplate(3, MJLeftNavComponent_ng_template_17_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_Template, 2, 0);
+    i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_17_Conditional_0_Conditional_4_Template, 2, 0);
 } if (rf & 2) {
-    const ctx_r8 = i0.ɵɵnextContext();
-    const item_r7 = ctx_r8.item;
-    const depth_r10 = ctx_r8.depth;
+    const ctx_r9 = i0.ɵɵnextContext();
+    const item_r8 = ctx_r9.item;
+    const depth_r11 = ctx_r9.depth;
     const ctx_r1 = i0.ɵɵnextContext();
-    const itemBtn_r12 = i0.ɵɵreference(19);
-    i0.ɵɵstyleProp("padding-left", depth_r10 * 14, "px");
+    const itemBtn_r13 = i0.ɵɵreference(20);
+    i0.ɵɵstyleProp("padding-left", depth_r11 * 14, "px");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r7.children.length > 0 ? 1 : 2);
+    i0.ɵɵconditional(item_r8.children.length > 0 ? 1 : 2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r7));
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r8));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r7.children.length > 0 && ctx_r1.IsExpanded(item_r7.id) ? 4 : -1);
+    i0.ɵɵconditional(item_r8.children.length > 0 && ctx_r1.IsExpanded(item_r8.id) ? 4 : -1);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_17_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_16_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 14);
+function MJLeftNavComponent_ng_template_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_17_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 17);
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().item;
+    const item_r8 = i0.ɵɵnextContext().item;
     i0.ɵɵnextContext();
-    const itemBtn_r12 = i0.ɵɵreference(19);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r7));
+    const itemBtn_r13 = i0.ɵɵreference(20);
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r8));
 } }
-function MJLeftNavComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_ng_template_16_Conditional_0_Template, 5, 8)(1, MJLeftNavComponent_ng_template_16_Conditional_1_Template, 1, 4, "ng-container");
+function MJLeftNavComponent_ng_template_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_ng_template_17_Conditional_0_Template, 5, 8)(1, MJLeftNavComponent_ng_template_17_Conditional_1_Template, 1, 4, "ng-container");
 } if (rf & 2) {
-    const item_r7 = ctx.item;
-    const hasExpandable_r11 = ctx.hasExpandable;
-    i0.ɵɵconditional(item_r7.children !== undefined && hasExpandable_r11 ? 0 : 1);
+    const item_r8 = ctx.item;
+    const hasExpandable_r12 = ctx.hasExpandable;
+    i0.ɵɵconditional(item_r8.children !== undefined && hasExpandable_r12 ? 0 : 1);
 } }
-function MJLeftNavComponent_ng_template_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 26);
+function MJLeftNavComponent_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 30);
 } if (rf & 2) {
-    const item_r14 = i0.ɵɵnextContext().item;
-    i0.ɵɵclassMap(item_r14.icon);
+    const item_r15 = i0.ɵɵnextContext().item;
+    i0.ɵɵclassMap(item_r15.icon);
 } }
-function MJLeftNavComponent_ng_template_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 24);
+function MJLeftNavComponent_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r14 = i0.ɵɵnextContext().item;
+    const item_r15 = i0.ɵɵnextContext().item;
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r14.description);
+    i0.ɵɵtextInterpolate(ctx_r1.ItemInitial(item_r15));
 } }
-function MJLeftNavComponent_ng_template_18_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+function MJLeftNavComponent_ng_template_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r14 = i0.ɵɵnextContext().item;
+    const item_r15 = i0.ɵɵnextContext().item;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r14.badge);
+    i0.ɵɵtextInterpolate(item_r15.description);
 } }
-function MJLeftNavComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 20);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_18_Template_button_click_0_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemClick(item_r14)); });
-    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_18_Conditional_1_Template, 1, 2, "i", 21);
-    i0.ɵɵelementStart(2, "span", 22)(3, "span", 23);
-    i0.ɵɵtext(4);
+function MJLeftNavComponent_ng_template_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJLeftNavComponent_ng_template_18_Conditional_5_Template, 2, 1, "span", 24);
+} if (rf & 2) {
+    const item_r15 = i0.ɵɵnextContext().item;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r15.badge);
+} }
+function MJLeftNavComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_19_Template_button_click_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnItemClick(item_r15)); });
+    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_19_Conditional_1_Template, 1, 2, "i", 24)(2, MJLeftNavComponent_ng_template_19_Conditional_2_Template, 2, 1, "span", 25);
+    i0.ɵɵelementStart(3, "span", 26)(4, "span", 27);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MJLeftNavComponent_ng_template_19_Conditional_6_Template, 2, 1, "span", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJLeftNavComponent_ng_template_18_Conditional_6_Template, 2, 1, "span", 25);
+    i0.ɵɵconditionalCreate(7, MJLeftNavComponent_ng_template_19_Conditional_7_Template, 2, 1, "span", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r14 = ctx.item;
+    const item_r15 = ctx.item;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("mj-left-nav__item--active", item_r14.id === ctx_r1.ActiveId)("mj-left-nav__item--disabled", item_r14.disabled);
-    i0.ɵɵproperty("disabled", item_r14.disabled);
-    i0.ɵɵattribute("aria-current", item_r14.id === ctx_r1.ActiveId ? "page" : null);
+    i0.ɵɵclassProp("mj-left-nav__item--active", ctx_r1.IsItemActive(item_r15))("mj-left-nav__item--disabled", item_r15.disabled);
+    i0.ɵɵproperty("disabled", item_r15.disabled);
+    i0.ɵɵattribute("aria-current", ctx_r1.AriaCurrentFor(item_r15))("title", ctx_r1.EffectiveIconOnly ? ctx_r1.ItemTooltip(item_r15) : null)("aria-label", ctx_r1.EffectiveIconOnly ? ctx_r1.ItemTooltip(item_r15) : null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r14.icon ? 1 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r14.label);
+    i0.ɵɵconditional(item_r15.icon ? 1 : ctx_r1.EffectiveIconOnly ? 2 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(item_r15.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r14.description ? 5 : -1);
+    i0.ɵɵconditional(item_r15.description ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r14.badge != null ? 6 : -1);
+    i0.ɵɵconditional(item_r15.badge != null ? 7 : -1);
 } }
+/** Source of per-instance DOM ids — see {@link MJLeftNavComponent.NavRegionId}. */
+let navRegionSeq = 0;
 /**
  * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have
  * an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics,
@@ -220,6 +247,11 @@ function MJLeftNavComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
  * pane rather than competing with it for horizontal space.
  */
 export class MJLeftNavComponent {
+    /**
+     * DOM id of the `<aside>`, so the collapse toggle's `aria-expanded` can name the region it
+     * expands via `aria-controls`. Per-instance because a page may host more than one rail.
+     */
+    NavRegionId = `mj-left-nav-${++navRegionSeq}`;
     /**
      * The sections + items that make up the rail. Sections render top-to-bottom
      * in array order; items inside each section render in array order.
@@ -236,6 +268,192 @@ export class MJLeftNavComponent {
      * the rail becomes a fixed-width off-canvas drawer.
      */
     Width = 240;
+    /**
+     * Set by a consumer that has visually collapsed the rail to an icons-only strip (via `Width` plus
+     * its own CSS hiding the labels). When true, each item gains a native `title` tooltip AND an
+     * `aria-label` carrying its full text.
+     *
+     * Why it is opt-in rather than always-on:
+     *  - **Tooltip**: with labels visible, a tooltip that just repeats the label is redundant noise on
+     *    every hover. Icon-only rails everywhere (VS Code's activity bar, Slack, Linear, Jira, Figma)
+     *    show one; expanded rails do not.
+     *  - **aria-label**: when the label IS visible it already names the button, and adding an identical
+     *    aria-label is at best a no-op. When the consumer's CSS hides `.mj-left-nav__text`, the button's
+     *    accessible name goes EMPTY — a screen reader announces "button" with no destination. That is
+     *    the hole this closes.
+     *
+     * Leaving it false reproduces the previous markup exactly, so existing consumers are unaffected.
+     */
+    IconOnly = false;
+    /**
+     * Opt-in desktop collapse: renders a compact double-angle toggle chip at the top of the rail and,
+     * when {@link Collapsed}, presents the rail as an icons-only strip ({@link CollapsedWidth} wide) —
+     * labels visually hidden but kept in the a11y tree, section labels folded to divider lines,
+     * badges docked on the icon corner, and per-item tooltips/aria auto-enabled.
+     *
+     * The component owns the PRESENTATION only — the consumer owns the STATE (bind `[(Collapsed)]`
+     * and persist it however the app persists preferences), the same split as `ExpandedIds`.
+     * Desktop-only: ≤700px the rail is the off-canvas drawer and the toggle hides.
+     *
+     * Two things to know when the rail's content is richer than a flat icon list:
+     *  - **Tree sections fold to their top level while collapsed** (see {@link ShowTreeStructure});
+     *    a top-level item stands in as active for an active descendant, and the tree returns intact
+     *    on expand. Items with no `icon` render a monogram so they stay visible and hittable.
+     *  - **The `[header]` / `[footer]` slots are yours.** The rail can't restyle projected content,
+     *    so a wide header (logo lockup + wordmark, a filter box) will overflow a `CollapsedWidth`
+     *    strip. Bind the same collapsed flag in the consumer and project a compact variant.
+     *
+     * Deliberately NOT included: hover-to-peek (auto-expand on pointer hover) — removed by ruling
+     * (2026-07-30): a rail that expands when the pointer grazes it moves the target the user was
+     * aiming at. Deliberate toggling beats clever hovering.
+     */
+    Collapsible = false;
+    /** Whether the rail is currently collapsed to icons. Two-way bindable via `[(Collapsed)]`. */
+    Collapsed = false;
+    /** Emitted when the user clicks the collapse toggle. Consumer updates + persists the state. */
+    CollapsedChange = new EventEmitter();
+    /**
+     * Width of the collapsed icons-only strip. The default 60 is derived from the rail's own
+     * numbers — 8+8 container padding, 12+12 item padding, 18px icon, 1px border — so icons stay
+     * centred; retune it if those change.
+     */
+    CollapsedWidth = 60;
+    /**
+     * True below the 701px breakpoint, where the rail stops being a rail and becomes the off-canvas
+     * drawer. Tracked in TS — not just CSS — because collapse is more than styling: it also decides
+     * whether tree sections fold and whether items are named by tooltip. The collapsed STYLES are
+     * gated to ≥701px, so without this the drawer would keep the collapsed BEHAVIOR while showing
+     * full labels: a flattened tree, and a monogram beside the very label it stands in for.
+     *
+     * Mirrors the matchMedia pattern in `mj-filter-popover` (same package).
+     */
+    isMobileViewport = false;
+    zone = inject(NgZone);
+    cdr = inject(ChangeDetectorRef);
+    mediaQuery = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia('(max-width: 700px)')
+        : null;
+    // matchMedia 'change' fires OUTSIDE Angular's zone, so re-enter before flipping state the
+    // template reads.
+    onMediaChange = (e) => {
+        this.zone.run(() => {
+            this.isMobileViewport = e.matches;
+            this.cdr.markForCheck();
+        });
+    };
+    constructor() {
+        if (this.mediaQuery) {
+            this.isMobileViewport = this.mediaQuery.matches;
+            this.mediaQuery.addEventListener('change', this.onMediaChange);
+        }
+    }
+    ngOnDestroy() {
+        this.mediaQuery?.removeEventListener('change', this.onMediaChange);
+    }
+    /**
+     * Whether the rail is collapsed *and* in a viewport where collapse means anything. Below 701px
+     * the rail is the off-canvas drawer — already dismissable, already showing full labels — so a
+     * persisted `Collapsed = true` must not follow the user down there.
+     */
+    get IsNativelyCollapsed() {
+        return this.Collapsible && this.Collapsed && !this.isMobileViewport;
+    }
+    /** The width the rail actually renders at, honoring the collapse state. */
+    get EffectiveWidth() {
+        return this.IsNativelyCollapsed ? this.CollapsedWidth : this.Width;
+    }
+    /**
+     * Icon-only presentation is on when the consumer forces it OR the rail is natively collapsed.
+     *
+     * `IconOnly` is deliberately NOT viewport-gated: that flag means the CONSUMER's own CSS has
+     * narrowed the rail, and we can't know which breakpoints they gated it to. Withdrawing the
+     * accessible names on their behalf could leave a genuinely icons-only rail unnamed — the exact
+     * hole `IconOnly` exists to close. Native collapse is ours to gate; theirs is theirs.
+     */
+    get EffectiveIconOnly() {
+        return this.IconOnly || this.IsNativelyCollapsed;
+    }
+    /**
+     * Whether tree structure (chevrons, depth indentation, expanded children) renders at all.
+     *
+     * An icons-only rail is ~60px wide and shows nothing but a centred glyph per row, which leaves a
+     * tree with no way to express itself: the chevron would eat a third of the width and shove the
+     * icon off-centre, each depth level would push its icon 14px further right until the rail clipped
+     * it, and a child's icon (optional, and usually absent on tree leaves) would say nothing about
+     * which branch it belongs to. So while icons-only, each section renders its TOP-LEVEL items only —
+     * the same choice every icon rail makes (VS Code's activity bar shows one icon per container and
+     * defers the tree to the expanded pane).
+     *
+     * Nothing is lost on the way back: `ExpandedIds` is consumer-owned and untouched here, so the tree
+     * returns exactly as the user left it the moment the rail expands.
+     */
+    get ShowTreeStructure() {
+        return !this.EffectiveIconOnly;
+    }
+    /**
+     * Whether an item paints as active. Normally an exact {@link ActiveId} match — but while the tree
+     * is suppressed (see {@link ShowTreeStructure}) the active item may be a child that isn't rendered,
+     * which would leave the collapsed rail with NOTHING highlighted and no sense of place. In that
+     * state a top-level item stands in for its active descendant.
+     */
+    IsItemActive(item) {
+        if (item.id === this.ActiveId)
+            return true;
+        return this.EffectiveIconOnly && this.hasActiveDescendant(item);
+    }
+    /**
+     * `'page'` for the active item itself; `'true'` for a stand-in ancestor, which is current in the
+     * set but is not the page the user is on. Distinguishing them keeps the announcement honest.
+     */
+    AriaCurrentFor(item) {
+        if (item.id === this.ActiveId)
+            return 'page';
+        return this.IsItemActive(item) ? 'true' : null;
+    }
+    hasActiveDescendant(item) {
+        if (!this.ActiveId || !item.children?.length)
+            return false;
+        return this.findItemById(item.children, this.ActiveId) !== undefined;
+    }
+    /**
+     * Monogram for an icon-less item in an icons-only rail. `Array.from` rather than `charAt` so a
+     * label starting with an emoji or an astral character yields that whole character instead of half
+     * a surrogate pair. Falls back to a bullet for a blank label so the button is never empty.
+     */
+    ItemInitial(item) {
+        return Array.from(item.label?.trim() ?? '')[0] ?? '•';
+    }
+    /**
+     * Left margin that pins the toggle chip at the collapsed band's centre in BOTH modes, so the
+     * chip never relocates on toggle (the user never re-aims). Derived, not magic:
+     * (CollapsedWidth − 38px chip)/2 from the rail edge, minus the rail's 8px container padding.
+     * 38 = the 18px icon box + 2×10px chip padding.
+     */
+    get CollapseToggleMarginPx() {
+        return Math.max(0, Math.round((this.CollapsedWidth - 38) / 2 - 8));
+    }
+    /** Reflects the collapsed state onto the host so the collapsed CSS can scope to it. */
+    get isCollapsedHost() {
+        return this.IsNativelyCollapsed;
+    }
+    /** Flip + announce. The consumer receives the new value and persists it. */
+    ToggleCollapsed() {
+        this.Collapsed = !this.Collapsed;
+        this.CollapsedChange.emit(this.Collapsed);
+    }
+    /**
+     * The text surfaced as an icon-only item's tooltip / accessible name. Folds in the description and
+     * badge because collapsing the rail hides both: the badge survives as an unlabeled corner count,
+     * so "Batch approvals (2)" is the only place a hovering user learns what the 2 counts.
+     */
+    ItemTooltip(item) {
+        const parts = [item.label];
+        if (item.description)
+            parts.push(`— ${item.description}`);
+        if (item.badge != null)
+            parts.push(`(${item.badge})`);
+        return parts.join(' ');
+    }
     /**
      * Label shown on the mobile drawer header and used as the switcher fallback
      * label when no item is active. Defaults to `'Menu'`. Set to something
@@ -335,11 +553,11 @@ export class MJLeftNavComponent {
         return false;
     }
     static ɵfac = function MJLeftNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJLeftNavComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLeftNavComponent, selectors: [["mj-left-nav"]], hostVars: 2, hostBindings: function MJLeftNavComponent_HostBindings(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLeftNavComponent, selectors: [["mj-left-nav"]], hostVars: 4, hostBindings: function MJLeftNavComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function MJLeftNavComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
         } if (rf & 2) {
-            i0.ɵɵclassProp("mj-left-nav-host--open", ctx.isMobileNavOpen);
-        } }, inputs: { Sections: "Sections", ActiveId: "ActiveId", Width: "Width", MobileTitle: "MobileTitle", ExpandedIds: "ExpandedIds" }, outputs: { ItemClicked: "ItemClicked", ItemToggled: "ItemToggled" }, ngContentSelectors: _c1, decls: 20, vars: 7, consts: [["itemTpl", ""], ["itemBtn", ""], ["type", "button", "aria-haspopup", "dialog", 1, "mj-left-nav__switcher", 3, "click"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon", 3, "class"], [1, "mj-left-nav__switcher-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars-staggered", "mj-left-nav__switcher-hint"], ["aria-hidden", "true", 1, "mj-left-nav__scrim", 3, "click"], ["role", "navigation", 1, "mj-left-nav"], [1, "mj-left-nav__drawer-header"], [1, "mj-left-nav__drawer-title"], ["type", "button", "aria-label", "Close menu", 1, "mj-left-nav__drawer-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon"], [1, "mj-left-nav__section-label"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-left-nav__row"], ["type", "button", 1, "mj-left-nav__chevron"], ["aria-hidden", "true", 1, "mj-left-nav__chevron-placeholder"], ["type", "button", 1, "mj-left-nav__chevron", 3, "click"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", 1, "mj-left-nav__item", 3, "click", "disabled"], ["aria-hidden", "true", 1, "mj-left-nav__icon", 3, "class"], [1, "mj-left-nav__text"], [1, "mj-left-nav__label"], [1, "mj-left-nav__description"], [1, "mj-left-nav__badge"], ["aria-hidden", "true", 1, "mj-left-nav__icon"]], template: function MJLeftNavComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵclassProp("mj-left-nav-host--collapsed", ctx.isCollapsedHost)("mj-left-nav-host--open", ctx.isMobileNavOpen);
+        } }, inputs: { Sections: "Sections", ActiveId: "ActiveId", Width: "Width", IconOnly: "IconOnly", Collapsible: "Collapsible", Collapsed: "Collapsed", CollapsedWidth: "CollapsedWidth", MobileTitle: "MobileTitle", ExpandedIds: "ExpandedIds" }, outputs: { CollapsedChange: "CollapsedChange", ItemClicked: "ItemClicked", ItemToggled: "ItemToggled" }, ngContentSelectors: _c1, decls: 21, vars: 9, consts: [["itemTpl", ""], ["itemBtn", ""], ["type", "button", "aria-haspopup", "dialog", 1, "mj-left-nav__switcher", 3, "click"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon", 3, "class"], [1, "mj-left-nav__switcher-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars-staggered", "mj-left-nav__switcher-hint"], ["aria-hidden", "true", 1, "mj-left-nav__scrim", 3, "click"], ["role", "navigation", 1, "mj-left-nav", 3, "id"], [1, "mj-left-nav__drawer-header"], [1, "mj-left-nav__drawer-title"], ["type", "button", "aria-label", "Close menu", 1, "mj-left-nav__drawer-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["aria-hidden", "true", 1, "mj-left-nav__switcher-icon"], ["type", "button", 1, "mj-left-nav__collapse-toggle", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "mj-left-nav__collapse-icon"], ["aria-hidden", "true", 1, "mj-left-nav__collapse-divider"], [1, "mj-left-nav__section-label"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-left-nav__row"], ["type", "button", 1, "mj-left-nav__chevron"], ["aria-hidden", "true", 1, "mj-left-nav__chevron-placeholder"], ["type", "button", 1, "mj-left-nav__chevron", 3, "click"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", 1, "mj-left-nav__item", 3, "click", "disabled"], ["aria-hidden", "true", 1, "mj-left-nav__icon", 3, "class"], ["aria-hidden", "true", 1, "mj-left-nav__initial"], [1, "mj-left-nav__text"], [1, "mj-left-nav__label"], [1, "mj-left-nav__description"], [1, "mj-left-nav__badge"], ["aria-hidden", "true", 1, "mj-left-nav__icon"]], template: function MJLeftNavComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵelementStart(0, "button", 2);
@@ -353,18 +571,20 @@ export class MJLeftNavComponent {
             i0.ɵɵelementStart(5, "div", 6);
             i0.ɵɵlistener("click", function MJLeftNavComponent_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseMobileNav()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "aside", 7)(7, "div", 8)(8, "span", 9);
-            i0.ɵɵtext(9);
+            i0.ɵɵelementStart(6, "aside", 7);
+            i0.ɵɵconditionalCreate(7, MJLeftNavComponent_Conditional_7_Template, 3, 10);
+            i0.ɵɵelementStart(8, "div", 8)(9, "span", 9);
+            i0.ɵɵtext(10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "button", 10);
-            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseMobileNav()); });
-            i0.ɵɵelement(11, "i", 11);
+            i0.ɵɵelementStart(11, "button", 10);
+            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseMobileNav()); });
+            i0.ɵɵelement(12, "i", 11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵprojection(12);
-            i0.ɵɵrepeaterCreate(13, MJLeftNavComponent_For_14_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
-            i0.ɵɵprojection(15, 1);
+            i0.ɵɵprojection(13);
+            i0.ɵɵrepeaterCreate(14, MJLeftNavComponent_For_15_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵprojection(16, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, MJLeftNavComponent_ng_template_16_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(18, MJLeftNavComponent_ng_template_18_Template, 7, 10, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(17, MJLeftNavComponent_ng_template_17_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(19, MJLeftNavComponent_ng_template_19_Template, 8, 12, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵattribute("aria-expanded", ctx.MobileNavOpen);
             i0.ɵɵadvance();
@@ -372,13 +592,16 @@ export class MJLeftNavComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate((ctx.ActiveTriggerItem == null ? null : ctx.ActiveTriggerItem.label) || ctx.MobileTitle);
             i0.ɵɵadvance(3);
-            i0.ɵɵstyleProp("width", ctx.Width, "px");
+            i0.ɵɵstyleProp("width", ctx.EffectiveWidth, "px");
+            i0.ɵɵproperty("id", ctx.NavRegionId);
             i0.ɵɵattribute("aria-modal", ctx.MobileNavOpen ? true : null);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Collapsible ? 7 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.MobileTitle);
             i0.ɵɵadvance(4);
             i0.ɵɵrepeater(ctx.Sections);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: ["[_nghost-%COMP%] {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%]:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%]:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled[_ngcontent-%COMP%] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    .mj-left-nav__text[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__description[_ngcontent-%COMP%] {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    \n\n\n\n\n\n\n    .mj-left-nav__row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row[_ngcontent-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    \n\n\n\n\n\n\n\n\n\n    .mj-left-nav__switcher[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%], \n   .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      \n\n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n\n      \n\n\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      \n\n      .mj-left-nav__switcher[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon[_ngcontent-%COMP%] {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label[_ngcontent-%COMP%] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      \n\n      .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      \n\n      .mj-left-nav[_ngcontent-%COMP%] {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        transform: translateX(0);\n      }\n\n      \n\n      .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        transition: none;\n      }\n    }"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: ["[_nghost-%COMP%] {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label[_ngcontent-%COMP%]:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item[_ngcontent-%COMP%]:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled[_ngcontent-%COMP%] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    \n\n\n\n    .mj-left-nav__initial[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__description[_ngcontent-%COMP%] {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge[_ngcontent-%COMP%] {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active[_ngcontent-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    \n\n\n\n\n\n\n    .mj-left-nav__row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row[_ngcontent-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    \n\n\n\n\n\n\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    \n\n\n\n    .mj-left-nav__collapse-icon[_ngcontent-%COMP%] {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle[_ngcontent-%COMP%], \n   .mj-left-nav__collapse-divider[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      \n\n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__text[_ngcontent-%COMP%] {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      \n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__item[_ngcontent-%COMP%] {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      \n\n\n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%] {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__section-label[_ngcontent-%COMP%]::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      \n\n\n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav__badge[_ngcontent-%COMP%] {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      \n\n      .mj-left-nav-host--collapsed[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        overflow-x: hidden;\n      }\n    }\n\n    \n\n\n\n\n\n\n\n\n\n    .mj-left-nav__switcher[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%], \n   .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      \n\n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n\n      \n\n\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      \n\n      .mj-left-nav__switcher[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon[_ngcontent-%COMP%] {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label[_ngcontent-%COMP%] {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      \n\n      .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      \n\n      .mj-left-nav[_ngcontent-%COMP%] {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      .mj-left-nav-host--open[_nghost-%COMP%]   .mj-left-nav[_ngcontent-%COMP%] {\n        transform: translateX(0);\n      }\n\n      \n\n      .mj-left-nav__drawer-header[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close[_ngcontent-%COMP%]:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav[_ngcontent-%COMP%], \n   .mj-left-nav__scrim[_ngcontent-%COMP%] {\n        transition: none;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavComponent, [{
         type: Component,
@@ -405,9 +628,37 @@ export class MJLeftNavComponent {
 
     <aside
       class="mj-left-nav"
-      [style.width.px]="Width"
+      [id]="NavRegionId"
+      [style.width.px]="EffectiveWidth"
       role="navigation"
       [attr.aria-modal]="MobileNavOpen ? true : null">
+      <!-- Desktop collapse toggle (opt-in via [Collapsible]) — a compact double-angle chip, NOT a
+           hamburger (a lone hamburger row reads as a broken nav item) and NOT a nav-row lookalike.
+           The chip is LOCKED in one spot — centred in the collapsed band — in BOTH modes: only the
+           glyph flips on toggle, so the user never re-aims (a control that relocates when clicked
+           makes the user chase it). « = collapse toward the left edge, » = expand. Hidden ≤700px:
+           the mobile drawer is its own affordance and collapsing a drawer is meaningless. -->
+      @if (Collapsible) {
+        <button
+          type="button"
+          class="mj-left-nav__collapse-toggle"
+          [style.margin-left.px]="CollapseToggleMarginPx"
+          [attr.aria-label]="Collapsed ? 'Expand navigation' : 'Collapse navigation'"
+          [attr.aria-expanded]="!Collapsed"
+          [attr.aria-controls]="NavRegionId"
+          [title]="Collapsed ? 'Expand navigation' : 'Collapse navigation'"
+          (click)="ToggleCollapsed()">
+          <i
+            class="fa-solid mj-left-nav__collapse-icon"
+            [class.fa-angles-right]="Collapsed"
+            [class.fa-angles-left]="!Collapsed"
+            aria-hidden="true"></i>
+        </button>
+        <!-- Wordless hairline between the toggle and the nav content: without a boundary the chip
+             reads as a destination. Same height in both modes, so items never shift on toggle. -->
+        <div class="mj-left-nav__collapse-divider" aria-hidden="true"></div>
+      }
+
       <!-- Drawer header — only visible on mobile when the rail is a drawer. -->
       <div class="mj-left-nav__drawer-header">
         <span class="mj-left-nav__drawer-title">{{ MobileTitle }}</span>
@@ -427,8 +678,10 @@ export class MJLeftNavComponent {
           <div class="mj-left-nav__section-label">{{ section.label }}</div>
         }
         @for (item of section.items; track item.id) {
+          <!-- hasExpandable goes false while icons-only, collapsing each section to its TOP-LEVEL
+               items only — see ShowTreeStructure for why a tree can't survive a 60px rail. -->
           <ng-container
-            *ngTemplateOutlet="itemTpl; context: { item: item, depth: 0, hasExpandable: HasExpandableItems(section.items) }">
+            *ngTemplateOutlet="itemTpl; context: { item: item, depth: 0, hasExpandable: ShowTreeStructure && HasExpandableItems(section.items) }">
           </ng-container>
         }
       }
@@ -490,13 +743,21 @@ export class MJLeftNavComponent {
       <button
         type="button"
         class="mj-left-nav__item"
-        [class.mj-left-nav__item--active]="item.id === ActiveId"
+        [class.mj-left-nav__item--active]="IsItemActive(item)"
         [class.mj-left-nav__item--disabled]="item.disabled"
         [disabled]="item.disabled"
-        [attr.aria-current]="item.id === ActiveId ? 'page' : null"
+        [attr.aria-current]="AriaCurrentFor(item)"
+        [attr.title]="EffectiveIconOnly ? ItemTooltip(item) : null"
+        [attr.aria-label]="EffectiveIconOnly ? ItemTooltip(item) : null"
         (click)="OnItemClick(item)">
         @if (item.icon) {
           <i class="mj-left-nav__icon" [class]="item.icon" aria-hidden="true"></i>
+        } @else if (EffectiveIconOnly) {
+          <!-- An icon-less item collapses to a button with NOTHING visible in it (the label is the
+               only content and it is clipped away) — an invisible-but-clickable row. The icon is
+               optional on MJLeftNavItem, so the rail cannot require one; a monogram keeps every item
+               identifiable and hittable. Only rendered icons-only: expanded rails are unchanged. -->
+          <span class="mj-left-nav__initial" aria-hidden="true">{{ ItemInitial(item) }}</span>
         }
         <span class="mj-left-nav__text">
           <span class="mj-left-nav__label">{{ item.label }}</span>
@@ -509,13 +770,26 @@ export class MJLeftNavComponent {
         }
       </button>
     </ng-template>
-  `, styles: ["\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* \u2500\u2500 Tree rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* \u2500\u2500 Mobile drawer pattern (\u2264700px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Desktop shows the rail inline. On mobile the rail would otherwise eat the\n       top of the screen, so we hide it off-canvas and surface a compact section\n       switcher in its place. Tapping the switcher slides the full rail in from\n       the left over a scrim \u2014 preserving trees, header/footer slots and badges\n       (item descriptions hide in the drawer for a tighter list).\n\n       The switcher / scrim / drawer-header are display:none above the\n       breakpoint; the rail keeps its desktop layout there. */\n    .mj-left-nav__switcher,\n    .mj-left-nav__scrim,\n    .mj-left-nav__drawer-header {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      /* Host collapses to the switcher's footprint; the rail goes out of flow. */\n      :host {\n        width: 100% !important;\n      }\n\n      /* Hide item descriptions in the drawer \u2014 the label + icon are enough on a\n         narrow sheet; the secondary line just adds clutter. */\n      .mj-left-nav__description {\n        display: none;\n      }\n\n      /* Section switcher \u2014 reads as a picker for the current section. */\n      .mj-left-nav__switcher {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      /* Scrim \u2014 fades in with the drawer. */\n      .mj-left-nav__scrim {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav__scrim {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /* Rail becomes a left off-canvas drawer. */\n      .mj-left-nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav {\n        transform: translateX(0);\n      }\n\n      /* Drawer header \u2014 sticky title + close button. */\n      .mj-left-nav__drawer-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav,\n      .mj-left-nav__scrim {\n        transition: none;\n      }\n    }\n  "] }]
-    }], null, { Sections: [{
+  `, styles: ["\n    :host {\n      display: block;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav {\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-right: 1px solid var(--mj-border-default);\n      overflow-y: auto;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    .mj-left-nav__section-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      padding: 12px 12px 6px;\n    }\n\n    .mj-left-nav__section-label:first-child {\n      padding-top: 6px;\n    }\n\n    .mj-left-nav__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      width: 100%;\n      border: none;\n      background: transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      text-align: left;\n    }\n\n    .mj-left-nav__item:hover:not(.mj-left-nav__item--disabled) {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__item--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-left-nav__item--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    }\n\n    .mj-left-nav__item--disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .mj-left-nav__icon {\n      width: 18px;\n      text-align: center;\n      font-size: 13px;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n    }\n\n    /* Stand-in glyph for an icon-less item while the rail is icons-only. Same 18px box as\n       .mj-left-nav__icon so it sits on the identical optical column \u2014 the rail reads as one\n       consistent strip whether an item brought an icon or not. */\n    .mj-left-nav__initial {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 1.2;\n      margin-top: 1px;\n      flex-shrink: 0;\n      color: inherit;\n      text-transform: uppercase;\n    }\n\n    .mj-left-nav__text {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mj-left-nav__label {\n      font-size: 13px;\n      font-weight: 500;\n      line-height: 1.2;\n    }\n\n    .mj-left-nav__description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 3px;\n      line-height: 1.3;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__description {\n      color: color-mix(in srgb, var(--mj-brand-primary) 70%, var(--mj-text-muted));\n    }\n\n    .mj-left-nav__badge {\n      margin-left: auto;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      align-self: center;\n    }\n\n    .mj-left-nav__item--active .mj-left-nav__badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    /* \u2500\u2500 Tree rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Used when MJLeftNavItem.children is defined (even as an empty array).\n       The row wraps a chevron/placeholder + the item button so they sit on\n       one line, and depth-based padding-left is applied to the row (not the\n       item) so the chevron aligns with the depth column. */\n\n    .mj-left-nav__row {\n      display: flex;\n      align-items: stretch;\n      gap: 2px;\n    }\n\n    .mj-left-nav__row .mj-left-nav__item {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .mj-left-nav__chevron {\n      flex-shrink: 0;\n      width: 20px;\n      height: 32px;\n      align-self: center;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: transparent;\n      border-radius: 4px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      font-size: 10px;\n      padding: 0;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      font-family: inherit;\n    }\n\n    .mj-left-nav__chevron:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__chevron-placeholder {\n      flex-shrink: 0;\n      width: 20px;\n      display: inline-block;\n    }\n\n    /* \u2500\u2500 Desktop collapse (opt-in via [Collapsible]) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       The toggle chip + the icons-only collapsed presentation. DESKTOP ONLY: below 701px the rail\n       is the off-canvas drawer, which is already dismissable \u2014 collapsing it would be nonsense \u2014\n       so the toggle hides and the collapsed rules never apply there. Hover-to-peek is deliberately\n       NOT part of this feature (removed by ruling 2026-07-30: a rail that expands when the pointer\n       grazes it moves the target the user was aiming at). */\n\n    .mj-left-nav__collapse-toggle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: fit-content;\n      padding: 8px 10px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-muted);\n      font-family: inherit;\n      cursor: pointer;\n      box-sizing: border-box;\n      transition: background-color 0.12s ease, color 0.12s ease;\n      margin-bottom: 2px;\n    }\n\n    .mj-left-nav__collapse-toggle:hover {\n      background: var(--mj-bg-surface-hover);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-left-nav__collapse-toggle:focus-visible {\n      outline: 2px solid var(--mj-border-focus);\n      outline-offset: -2px;\n    }\n\n    /* 18px box = the same footprint as .mj-left-nav__icon, so the chip sits on the items' optical\n       icon column when centred in the collapsed band. Slightly smaller glyph than the nav icons \u2014\n       this is a chrome control, not a destination. */\n    .mj-left-nav__collapse-icon {\n      width: 18px;\n      text-align: center;\n      font-size: 12px;\n      flex-shrink: 0;\n    }\n\n    .mj-left-nav__collapse-divider {\n      height: 1px;\n      margin: 4px 0;\n      background: var(--mj-border-default);\n    }\n\n    @media (max-width: 700px) {\n      .mj-left-nav__collapse-toggle,\n      .mj-left-nav__collapse-divider {\n        display: none;\n      }\n    }\n\n    @media (min-width: 701px) {\n      /* ITEM labels are HIDDEN VISUALLY, NOT REMOVED. display:none would drop them from the\n         accessibility tree too, leaving every rail button unnamed \u2014 an icon-only rail a screen\n         reader cannot read. This keeps the name and only takes the pixels. (The tooltips/aria the\n         items grow while collapsed come from EffectiveIconOnly.) */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__text {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        margin: -1px;\n        padding: 0;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      /* With the text out of flow the icon is the only thing left; centre it in the narrow rail. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__item {\n        justify-content: center;\n        gap: 0;\n        margin-inline: auto;\n        position: relative;\n      }\n\n      /* SECTION labels become a small centred divider line, keeping the label's OWN box (padding +\n         height) so the vertical rhythm is IDENTICAL to the expanded rail \u2014 the words come back in\n         the exact same place on expand. color: transparent hides the glyphs without removing them\n         from the a11y tree or changing the box height; overflow clips the transparent glyphs so\n         they can never make the narrow rail horizontally scrollable. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label {\n        position: relative;\n        color: transparent;\n        overflow: hidden;\n      }\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__section-label::after {\n        content: '';\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 1px;\n        background: var(--mj-border-default);\n      }\n\n      /* No row edge exists in the narrow rail, so the badge docks on the icon's top-right corner\n         (the activity-bar idiom) as a compact attention count \u2014 presence = action needed. The\n         centred icon itself never moves. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav__badge {\n        margin-left: 0;\n        align-self: auto;\n        position: absolute;\n        left: calc(50% + 4px);\n        top: 4px;\n        min-width: 15px;\n        height: 15px;\n        padding: 0 4px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 9px;\n        line-height: 1;\n        white-space: nowrap;\n        background: var(--mj-brand-primary);\n        color: var(--mj-text-inverse);\n      }\n\n      /* Belt-and-braces: a collapsed rail never scrolls sideways. */\n      :host(.mj-left-nav-host--collapsed) .mj-left-nav {\n        overflow-x: hidden;\n      }\n    }\n\n    /* \u2500\u2500 Mobile drawer pattern (\u2264700px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Desktop shows the rail inline. On mobile the rail would otherwise eat the\n       top of the screen, so we hide it off-canvas and surface a compact section\n       switcher in its place. Tapping the switcher slides the full rail in from\n       the left over a scrim \u2014 preserving trees, header/footer slots and badges\n       (item descriptions hide in the drawer for a tighter list).\n\n       The switcher / scrim / drawer-header are display:none above the\n       breakpoint; the rail keeps its desktop layout there. */\n    .mj-left-nav__switcher,\n    .mj-left-nav__scrim,\n    .mj-left-nav__drawer-header {\n      display: none;\n    }\n\n    @media (max-width: 700px) {\n      /* Host collapses to the switcher's footprint; the rail goes out of flow. */\n      :host {\n        width: 100% !important;\n      }\n\n      /* Hide item descriptions in the drawer \u2014 the label + icon are enough on a\n         narrow sheet; the secondary line just adds clutter. */\n      .mj-left-nav__description {\n        display: none;\n      }\n\n      /* Section switcher \u2014 reads as a picker for the current section. */\n      .mj-left-nav__switcher {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        width: 100%;\n        padding: 11px 14px;\n        border: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-primary);\n        font-family: inherit;\n        font-size: 14px;\n        font-weight: 600;\n        text-align: left;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n      }\n      .mj-left-nav__switcher:active {\n        background: var(--mj-bg-surface-active);\n      }\n      .mj-left-nav__switcher-icon {\n        width: 18px;\n        text-align: center;\n        font-size: 14px;\n        flex-shrink: 0;\n        color: var(--mj-brand-primary);\n      }\n      .mj-left-nav__switcher-label {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .mj-left-nav__switcher-hint {\n        flex-shrink: 0;\n        font-size: 15px;\n        color: var(--mj-text-muted);\n      }\n\n      /* Scrim \u2014 fades in with the drawer. */\n      .mj-left-nav__scrim {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: var(--mj-bg-overlay);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.24s ease;\n        z-index: 9998;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav__scrim {\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      /* Rail becomes a left off-canvas drawer. */\n      .mj-left-nav {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: min(320px, 84vw) !important;\n        height: 100%;\n        max-height: none;\n        border-right: 1px solid var(--mj-border-default);\n        box-shadow: var(--mj-shadow-lg);\n        transform: translateX(-100%);\n        transition: transform 0.24s ease;\n        z-index: 9999;\n        padding-top: 0;\n      }\n      :host(.mj-left-nav-host--open) .mj-left-nav {\n        transform: translateX(0);\n      }\n\n      /* Drawer header \u2014 sticky title + close button. */\n      .mj-left-nav__drawer-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 8px;\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        padding: 14px 12px 10px;\n        margin: 0 -8px 4px;\n        padding-left: 16px;\n        background: var(--mj-bg-surface);\n        border-bottom: 1px solid var(--mj-border-subtle);\n      }\n      .mj-left-nav__drawer-title {\n        font-size: 13px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: var(--mj-text-muted);\n      }\n      .mj-left-nav__drawer-close {\n        flex-shrink: 0;\n        width: 32px;\n        height: 32px;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        background: transparent;\n        border-radius: 8px;\n        cursor: pointer;\n        color: var(--mj-text-secondary);\n        font-size: 16px;\n        font-family: inherit;\n      }\n      .mj-left-nav__drawer-close:active {\n        background: var(--mj-bg-surface-active);\n      }\n    }\n\n    @media (max-width: 700px) and (prefers-reduced-motion: reduce) {\n      .mj-left-nav,\n      .mj-left-nav__scrim {\n        transition: none;\n      }\n    }\n  "] }]
+    }], () => [], { Sections: [{
             type: Input
         }], ActiveId: [{
             type: Input
         }], Width: [{
             type: Input
+        }], IconOnly: [{
+            type: Input
+        }], Collapsible: [{
+            type: Input
+        }], Collapsed: [{
+            type: Input
+        }], CollapsedChange: [{
+            type: Output
+        }], CollapsedWidth: [{
+            type: Input
+        }], isCollapsedHost: [{
+            type: HostBinding,
+            args: ['class.mj-left-nav-host--collapsed']
         }], MobileTitle: [{
             type: Input
         }], ExpandedIds: [{
@@ -531,5 +805,5 @@ export class MJLeftNavComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavComponent, { className: "MJLeftNavComponent", filePath: "lib/left-nav/left-nav.component.ts", lineNumber: 538 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavComponent, { className: "MJLeftNavComponent", filePath: "lib/left-nav/left-nav.component.ts", lineNumber: 736 }); })();
 //# sourceMappingURL=left-nav.component.js.map