@memberjunction/ng-ui-components 5.38.0 → 5.39.0

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
@@ -8,163 +8,169 @@ const _c2 = (a0, a1) => ({ item: a0, depth: 0, hasExpandable: a1 });
 const _c3 = a0 => ({ item: a0 });
 const _c4 = (a0, a1, a2) => ({ item: a0, depth: a1, hasExpandable: a2 });
 const _forTrack0 = ($index, $item) => $item.id;
-function MJLeftNavComponent_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
+function MJLeftNavComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 12);
+} if (rf & 2) {
+    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);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const section_r1 = i0.ɵɵnextContext().$implicit;
+    const section_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(section_r1.label);
+    i0.ɵɵtextInterpolate(section_r3.label);
 } }
-function MJLeftNavComponent_For_3_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_For_14_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_For_3_For_2_ng_container_0_Template, 1, 0, "ng-container", 4);
+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);
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const section_r1 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    const itemTpl_r4 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c2, item_r2, ctx_r2.HasExpandableItems(section_r1.items)));
+    const item_r4 = ctx.$implicit;
+    const section_r3 = 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)));
 } }
-function MJLeftNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_For_3_Conditional_0_Template, 2, 1, "div", 3);
-    i0.ɵɵrepeaterCreate(1, MJLeftNavComponent_For_3_For_2_Template, 1, 5, "ng-container", null, _forTrack0);
+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);
 } if (rf & 2) {
-    const section_r1 = ctx.$implicit;
-    i0.ɵɵconditional(section_r1.label ? 0 : -1);
+    const section_r3 = ctx.$implicit;
+    i0.ɵɵconditional(section_r3.label ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(section_r1.items);
+    i0.ɵɵrepeater(section_r3.items);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 8);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const item_r6 = i0.ɵɵnextContext(2).item; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnItemToggle($event, item_r6)); });
-    i0.ɵɵelement(1, "i", 9);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext(2).item;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("aria-label", ctx_r2.IsExpanded(item_r6.id) ? "Collapse" : "Expand")("aria-expanded", ctx_r2.IsExpanded(item_r6.id));
+    const item_r7 = 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.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.IsExpanded(item_r6.id))("fa-chevron-right", !ctx_r2.IsExpanded(item_r6.id));
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.IsExpanded(item_r7.id))("fa-chevron-right", !ctx_r1.IsExpanded(item_r7.id));
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 7);
+function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 17);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_16_Conditional_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 4);
+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);
 } if (rf & 2) {
-    const child_r7 = ctx.$implicit;
-    const ctx_r7 = i0.ɵɵnextContext(3);
-    const depth_r9 = ctx_r7.depth;
-    const hasExpandable_r10 = ctx_r7.hasExpandable;
+    const child_r8 = ctx.$implicit;
+    const ctx_r8 = i0.ɵɵnextContext(3);
+    const depth_r10 = ctx_r8.depth;
+    const hasExpandable_r11 = ctx_r8.hasExpandable;
     i0.ɵɵnextContext();
-    const itemTpl_r4 = i0.ɵɵreference(6);
-    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r7, depth_r9 + 1, hasExpandable_r10));
+    const itemTpl_r5 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("ngTemplateOutlet", itemTpl_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, child_r8, depth_r10 + 1, hasExpandable_r11));
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_For_1_Template, 1, 6, "ng-container", null, _forTrack0);
+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);
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext(2).item;
-    i0.ɵɵrepeater(item_r6.children);
+    const item_r7 = i0.ɵɵnextContext(2).item;
+    i0.ɵɵrepeater(item_r7.children);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_1_Template, 2, 6, "button", 6)(2, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_2_Template, 1, 0, "span", 7);
-    i0.ɵɵtemplate(3, MJLeftNavComponent_ng_template_5_Conditional_0_ng_container_3_Template, 1, 0, "ng-container", 4);
+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);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_5_Conditional_0_Conditional_4_Template, 2, 0);
+    i0.ɵɵconditionalCreate(4, MJLeftNavComponent_ng_template_16_Conditional_0_Conditional_4_Template, 2, 0);
 } if (rf & 2) {
-    const ctx_r7 = i0.ɵɵnextContext();
-    const item_r6 = ctx_r7.item;
-    const depth_r9 = ctx_r7.depth;
-    const ctx_r2 = i0.ɵɵnextContext();
-    const itemBtn_r11 = i0.ɵɵreference(8);
-    i0.ɵɵstyleProp("padding-left", depth_r9 * 14, "px");
+    const ctx_r8 = i0.ɵɵnextContext();
+    const item_r7 = ctx_r8.item;
+    const depth_r10 = ctx_r8.depth;
+    const ctx_r1 = i0.ɵɵnextContext();
+    const itemBtn_r12 = i0.ɵɵreference(19);
+    i0.ɵɵstyleProp("padding-left", depth_r10 * 14, "px");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r6.children.length > 0 ? 1 : 2);
+    i0.ɵɵconditional(item_r7.children.length > 0 ? 1 : 2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r6));
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(6, _c3, item_r7));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r6.children.length > 0 && ctx_r2.IsExpanded(item_r6.id) ? 4 : -1);
+    i0.ɵɵconditional(item_r7.children.length > 0 && ctx_r1.IsExpanded(item_r7.id) ? 4 : -1);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function MJLeftNavComponent_ng_template_16_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function MJLeftNavComponent_ng_template_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MJLeftNavComponent_ng_template_5_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 4);
+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);
 } if (rf & 2) {
-    const item_r6 = i0.ɵɵnextContext().item;
+    const item_r7 = i0.ɵɵnextContext().item;
     i0.ɵɵnextContext();
-    const itemBtn_r11 = i0.ɵɵreference(8);
-    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r11)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r6));
+    const itemBtn_r12 = i0.ɵɵreference(19);
+    i0.ɵɵproperty("ngTemplateOutlet", itemBtn_r12)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c3, item_r7));
 } }
-function MJLeftNavComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJLeftNavComponent_ng_template_5_Conditional_0_Template, 5, 8)(1, MJLeftNavComponent_ng_template_5_Conditional_1_Template, 1, 4, "ng-container");
+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");
 } if (rf & 2) {
-    const item_r6 = ctx.item;
-    const hasExpandable_r10 = ctx.hasExpandable;
-    i0.ɵɵconditional(item_r6.children !== undefined && hasExpandable_r10 ? 0 : 1);
+    const item_r7 = ctx.item;
+    const hasExpandable_r11 = ctx.hasExpandable;
+    i0.ɵɵconditional(item_r7.children !== undefined && hasExpandable_r11 ? 0 : 1);
 } }
-function MJLeftNavComponent_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 16);
+function MJLeftNavComponent_ng_template_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 26);
 } if (rf & 2) {
-    const item_r13 = i0.ɵɵnextContext().item;
-    i0.ɵɵclassMap(item_r13.icon);
+    const item_r14 = i0.ɵɵnextContext().item;
+    i0.ɵɵclassMap(item_r14.icon);
 } }
-function MJLeftNavComponent_ng_template_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 14);
+function MJLeftNavComponent_ng_template_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r13 = i0.ɵɵnextContext().item;
+    const item_r14 = i0.ɵɵnextContext().item;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r13.description);
+    i0.ɵɵtextInterpolate(item_r14.description);
 } }
-function MJLeftNavComponent_ng_template_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 15);
+function MJLeftNavComponent_ng_template_18_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r13 = i0.ɵɵnextContext().item;
+    const item_r14 = i0.ɵɵnextContext().item;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r13.badge);
+    i0.ɵɵtextInterpolate(item_r14.badge);
 } }
-function MJLeftNavComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 10);
-    i0.ɵɵlistener("click", function MJLeftNavComponent_ng_template_7_Template_button_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).item; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnItemClick(item_r13)); });
-    i0.ɵɵconditionalCreate(1, MJLeftNavComponent_ng_template_7_Conditional_1_Template, 1, 2, "i", 11);
-    i0.ɵɵelementStart(2, "span", 12)(3, "span", 13);
+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);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJLeftNavComponent_ng_template_7_Conditional_5_Template, 2, 1, "span", 14);
+    i0.ɵɵconditionalCreate(5, MJLeftNavComponent_ng_template_18_Conditional_5_Template, 2, 1, "span", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJLeftNavComponent_ng_template_7_Conditional_6_Template, 2, 1, "span", 15);
+    i0.ɵɵconditionalCreate(6, MJLeftNavComponent_ng_template_18_Conditional_6_Template, 2, 1, "span", 25);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r13 = ctx.item;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("mj-left-nav__item--active", item_r13.id === ctx_r2.ActiveId)("mj-left-nav__item--disabled", item_r13.disabled);
-    i0.ɵɵproperty("disabled", item_r13.disabled);
-    i0.ɵɵattribute("aria-current", item_r13.id === ctx_r2.ActiveId ? "page" : null);
+    const item_r14 = 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.ɵɵadvance();
-    i0.ɵɵconditional(item_r13.icon ? 1 : -1);
+    i0.ɵɵconditional(item_r14.icon ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r13.label);
+    i0.ɵɵtextInterpolate(item_r14.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r13.description ? 5 : -1);
+    i0.ɵɵconditional(item_r14.description ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r13.badge != null ? 6 : -1);
+    i0.ɵɵconditional(item_r14.badge != null ? 6 : -1);
 } }
 /**
  * `<mj-left-nav>` — Canonical left rail for MJ Explorer dashboards that have
@@ -180,9 +186,10 @@ function MJLeftNavComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
  *  - Items with a count badge (APIKeys pattern)
  *  - Sections with uppercase headers (Communication / Credentials pattern)
  *  - Optional `[header]` and `[footer]` content slots (KH Config logo header, etc.)
- *  - Responsive collapse-to-row at narrow viewports (consumer controls parent's
- *    flex-direction switch; the rail's own styles handle item wrapping + the
- *    description-hide behavior)
+ *  - Responsive mobile drawer (≤700px): the rail hides off-canvas and a compact
+ *    section switcher takes its place; tapping it slides the full rail in over a
+ *    scrim. The rail keeps its full content (trees, slots, descriptions, badges)
+ *    inside the drawer — no flattening. Set `[MobileTitle]` for the drawer label.
  *
  * ## Example
  *
@@ -206,10 +213,11 @@ function MJLeftNavComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
  * </mj-left-nav>
  * ```
  *
- * Responsive collapse — the rail's own CSS handles narrow-viewport item
- * wrapping. The consumer is responsible for switching the parent's
- * flex-direction from row → column at the same breakpoint, e.g. via
- * `<mj-page-body>` Direction="row" with a `@media` override in the shell's CSS.
+ * Responsive — at ≤700px the rail becomes an off-canvas drawer (see the feature
+ * list above). The consumer should still switch the parent's flex-direction from
+ * row → column at the same breakpoint (e.g. `<mj-page-body>` Direction="row" with
+ * a `@media` override) so the in-flow section switcher stacks above the content
+ * pane rather than competing with it for horizontal space.
  */
 export class MJLeftNavComponent {
     /**
@@ -224,9 +232,16 @@ export class MJLeftNavComponent {
     ActiveId = null;
     /**
      * Width of the rail in pixels. Defaults to 240. Set to a smaller value
-     * (e.g., 200) for denser shells.
+     * (e.g., 200) for denser shells. Only applies to the desktop rail — on mobile
+     * the rail becomes a fixed-width off-canvas drawer.
      */
     Width = 240;
+    /**
+     * 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
+     * domain-specific (e.g. `'Sections'`, `'Test Suites'`) for clearer context.
+     */
+    MobileTitle = 'Menu';
     /**
      * Ids of currently-expanded tree items. Items whose id appears here render
      * with a down-chevron and their `children` are visible; items not in this
@@ -245,15 +260,61 @@ export class MJLeftNavComponent {
      * the item's id in / out of `ExpandedIds`. Does NOT also fire `ItemClicked`.
      */
     ItemToggled = new EventEmitter();
+    /**
+     * Whether the mobile off-canvas drawer is open. Component-owned, transient UI
+     * state — no effect above the 700px breakpoint where the rail is always inline.
+     */
+    MobileNavOpen = false;
+    /** Reflects {@link MobileNavOpen} onto the host so CSS can drive the drawer. */
+    get isMobileNavOpen() {
+        return this.MobileNavOpen;
+    }
+    OpenMobileNav() {
+        this.MobileNavOpen = true;
+    }
+    CloseMobileNav() {
+        this.MobileNavOpen = false;
+    }
+    /** Escape closes the mobile drawer. No-op when it's already closed. */
+    onEscape() {
+        if (this.MobileNavOpen) {
+            this.MobileNavOpen = false;
+        }
+    }
     OnItemClick(item) {
         if (item.disabled)
             return;
+        // Selecting a leaf dismisses the mobile drawer; harmless on desktop.
+        this.MobileNavOpen = false;
         this.ItemClicked.emit(item);
     }
     OnItemToggle(event, item) {
         event.stopPropagation();
+        // Expanding/collapsing a tree branch keeps the drawer open.
         this.ItemToggled.emit(item);
     }
+    /**
+     * The item matching {@link ActiveId} (searched recursively through trees),
+     * used to label the mobile section switcher with the current section's icon
+     * and label. Returns `undefined` when nothing is active.
+     */
+    get ActiveTriggerItem() {
+        if (!this.ActiveId)
+            return undefined;
+        return this.findItemById(this.Sections.flatMap((s) => s.items), this.ActiveId);
+    }
+    findItemById(items, id) {
+        for (const item of items) {
+            if (item.id === id)
+                return item;
+            if (item.children?.length) {
+                const found = this.findItemById(item.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
     IsExpanded(id) {
         return this.ExpandedIds.indexOf(id) >= 0;
     }
@@ -274,24 +335,91 @@ 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"]], inputs: { Sections: "Sections", ActiveId: "ActiveId", Width: "Width", ExpandedIds: "ExpandedIds" }, outputs: { ItemClicked: "ItemClicked", ItemToggled: "ItemToggled" }, ngContentSelectors: _c1, decls: 9, vars: 2, consts: [["itemTpl", ""], ["itemBtn", ""], ["role", "navigation", 1, "mj-left-nav"], [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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLeftNavComponent, selectors: [["mj-left-nav"]], hostVars: 2, 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) {
+            const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c0);
-            i0.ɵɵelementStart(0, "aside", 2);
-            i0.ɵɵprojection(1);
-            i0.ɵɵrepeaterCreate(2, MJLeftNavComponent_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
-            i0.ɵɵprojection(4, 1);
+            i0.ɵɵelementStart(0, "button", 2);
+            i0.ɵɵlistener("click", function MJLeftNavComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OpenMobileNav()); });
+            i0.ɵɵconditionalCreate(1, MJLeftNavComponent_Conditional_1_Template, 1, 2, "i", 3);
+            i0.ɵɵelementStart(2, "span", 4);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(4, "i", 5);
+            i0.ɵɵelementEnd();
+            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.ɵɵ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.ɵɵelementEnd()();
+            i0.ɵɵprojection(12);
+            i0.ɵɵrepeaterCreate(13, MJLeftNavComponent_For_14_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵprojection(15, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, MJLeftNavComponent_ng_template_5_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(7, MJLeftNavComponent_ng_template_7_Template, 7, 10, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            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);
         } if (rf & 2) {
-            i0.ɵɵstyleProp("width", ctx.Width, "px");
+            i0.ɵɵattribute("aria-expanded", ctx.MobileNavOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.ActiveTriggerItem == null ? null : ctx.ActiveTriggerItem.icon) ? 1 : -1);
             i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate((ctx.ActiveTriggerItem == null ? null : ctx.ActiveTriggerItem.label) || ctx.MobileTitle);
+            i0.ɵɵadvance(3);
+            i0.ɵɵstyleProp("width", ctx.Width, "px");
+            i0.ɵɵattribute("aria-modal", ctx.MobileNavOpen ? true : null);
+            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    @media (max-width: 700px) {\n      [_nghost-%COMP%] {\n        width: 100% !important;\n      }\n      .mj-left-nav[_ngcontent-%COMP%] {\n        width: 100%;\n        height: auto;\n        max-height: 220px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n      }\n      .mj-left-nav__item[_ngcontent-%COMP%] {\n        flex: 1 1 calc(50% - 8px);\n        margin-bottom: 0;\n      }\n      .mj-left-nav__description[_ngcontent-%COMP%] {\n        display: none;\n      }\n      .mj-left-nav__section-label[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n      }\n      \n\n\n      .mj-left-nav__row[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n        padding-left: 0 !important;\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    .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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLeftNavComponent, [{
         type: Component,
         args: [{ selector: 'mj-left-nav', standalone: true, imports: [CommonModule], template: `
-    <aside class="mj-left-nav" [style.width.px]="Width" role="navigation">
+    <!-- Mobile-only section switcher (hidden ≥701px via CSS). Shows the active
+         section and opens the full rail as an off-canvas drawer on tap. The rail
+         itself is too rich (trees, header/footer slots, descriptions, badges) to
+         flatten into a dropdown or tab strip, so we surface it as-is in a drawer. -->
+    <button
+      type="button"
+      class="mj-left-nav__switcher"
+      [attr.aria-expanded]="MobileNavOpen"
+      aria-haspopup="dialog"
+      (click)="OpenMobileNav()">
+      @if (ActiveTriggerItem?.icon) {
+        <i class="mj-left-nav__switcher-icon" [class]="ActiveTriggerItem!.icon" aria-hidden="true"></i>
+      }
+      <span class="mj-left-nav__switcher-label">{{ ActiveTriggerItem?.label || MobileTitle }}</span>
+      <i class="fa-solid fa-bars-staggered mj-left-nav__switcher-hint" aria-hidden="true"></i>
+    </button>
+
+    <!-- Scrim behind the mobile drawer (hidden ≥701px / when closed via CSS). -->
+    <div class="mj-left-nav__scrim" (click)="CloseMobileNav()" aria-hidden="true"></div>
+
+    <aside
+      class="mj-left-nav"
+      [style.width.px]="Width"
+      role="navigation"
+      [attr.aria-modal]="MobileNavOpen ? true : null">
+      <!-- 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>
+        <button
+          type="button"
+          class="mj-left-nav__drawer-close"
+          aria-label="Close menu"
+          (click)="CloseMobileNav()">
+          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+        </button>
+      </div>
+
       <ng-content select="[header]"></ng-content>
 
       @for (section of Sections; track $index) {
@@ -381,19 +509,27 @@ 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    /* Responsive collapse: at narrow viewports the rail becomes a top bar of\n       wrapping items. The consumer is still responsible for switching the\n       parent's flex-direction from row \u2192 column (see <mj-page-body> Direction\n       + the shell's @media override). */\n    @media (max-width: 700px) {\n      :host {\n        width: 100% !important;\n      }\n      .mj-left-nav {\n        width: 100%;\n        height: auto;\n        max-height: 220px;\n        border-right: none;\n        border-bottom: 1px solid var(--mj-border-default);\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n      }\n      .mj-left-nav__item {\n        flex: 1 1 calc(50% - 8px);\n        margin-bottom: 0;\n      }\n      .mj-left-nav__description {\n        display: none;\n      }\n      .mj-left-nav__section-label {\n        flex-basis: 100%;\n      }\n      /* Tree rows take a full line even in the wrap layout \u2014 chevron + item\n         should stay paired rather than flow as separate flex children. */\n      .mj-left-nav__row {\n        flex-basis: 100%;\n        padding-left: 0 !important;\n      }\n    }\n  "] }]
+  `, 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: [{
             type: Input
         }], ActiveId: [{
             type: Input
         }], Width: [{
             type: Input
+        }], MobileTitle: [{
+            type: Input
         }], ExpandedIds: [{
             type: Input
         }], ItemClicked: [{
             type: Output
         }], ItemToggled: [{
             type: Output
+        }], isMobileNavOpen: [{
+            type: HostBinding,
+            args: ['class.mj-left-nav-host--open']
+        }], onEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavComponent, { className: "MJLeftNavComponent", filePath: "lib/left-nav/left-nav.component.ts", lineNumber: 383 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLeftNavComponent, { className: "MJLeftNavComponent", filePath: "lib/left-nav/left-nav.component.ts", lineNumber: 538 }); })();
 //# sourceMappingURL=left-nav.component.js.map