@bmxc/pami-elements 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/collection/components/pami-navigation-rail/pami-navigation-rail.js

@@ -70,6 +70,12 @@ export class PamiNavigationRail {
          * Required for screen reader users (WAI-ARIA APG / WCAG 2.4.1).
          */
         this.label = 'Navigation';
+        /** Docked rail or modal navigation drawer using the same authored content. */
+        this.presentation = 'rail';
+        /** Drawer visibility. Does not change the rail variant. */
+        this.open = false;
+        /** Accessible drawer close-control name. */
+        this.closeLabel = 'Close navigation';
         /**
          * Set to `true` to disable focus management (roving tabindex + arrow keys).
          * Use when embedding inside a custom focus management system.
@@ -95,6 +101,8 @@ export class PamiNavigationRail {
          * the `navigation` landmark.
          */
         this.hasLinkDestinations = false;
+        this.hasGroups = false;
+        this.hasHierarchy = false;
         this.overflowCount = 0;
         /** True while any destination's dropdown is open — lifts the rail's stacking
          *  context so the fixed-position menu is not trapped inside it. */
@@ -157,13 +165,41 @@ export class PamiNavigationRail {
             }
             if (this.disableFocusManagement)
                 return;
-            const tabs = this.getTabs().filter((t) => !this.isTabDisabled(t));
+            const tabs = this.hasHierarchy ? this.visibleTabs() : this.getTabs().filter((t) => !this.isTabDisabled(t));
             if (tabs.length === 0)
                 return;
             const current = e.composedPath().find((node) => {
                 return node instanceof HTMLElement && tabs.includes(node);
             });
             const currentIndex = current ? tabs.indexOf(current) : -1;
+            if (this.hasHierarchy && current) {
+                const rtl = this.resolveDirection() === 'rtl';
+                const branch = current;
+                const hasChildren = Array.from(current.children).some(child => child.getAttribute('slot') === 'children');
+                if (e.key === (rtl ? 'ArrowLeft' : 'ArrowRight') && hasChildren) {
+                    e.preventDefault();
+                    if (!branch.childrenOpen)
+                        void branch.setChildrenOpen?.(true);
+                    else if (tabs[currentIndex + 1])
+                        this.focusDestination(tabs[currentIndex + 1]);
+                    return;
+                }
+                if (e.key === (rtl ? 'ArrowRight' : 'ArrowLeft')) {
+                    const parent = this.destinationPath(current).at(-2);
+                    if (hasChildren && branch.childrenOpen) {
+                        e.preventDefault();
+                        void branch.setChildrenOpen?.(false);
+                        return;
+                    }
+                    if (parent) {
+                        e.preventDefault();
+                        this.focusDestination(parent);
+                        return;
+                    }
+                }
+                if (e.key === 'ArrowLeft' || e.key === 'ArrowRight')
+                    return;
+            }
             let nextIndex = null;
             // A horizontal rail reads along the inline axis, so Left/Right must follow
             // the writing direction — in RTL, ArrowRight moves toward the START.
@@ -192,7 +228,7 @@ export class PamiNavigationRail {
                 return;
             const allTabs = this.getTabs();
             this.setRovingTabindex(allTabs.indexOf(target));
-            target.focus();
+            this.focusDestination(target);
         };
         this.handleToggleClick = () => {
             this.toggle();
@@ -234,6 +270,15 @@ export class PamiNavigationRail {
             this.wireSlottedMenus();
         };
     }
+    async show() {
+        this.open = true;
+    }
+    async close() {
+        this.open = false;
+    }
+    async whenClosed() {
+        await this.el.shadowRoot?.querySelector('pami-side-sheet')?.whenClosed();
+    }
     /** Programmatically expand the rail (shows labels inline with icons). */
     async expand() {
         if (this.variant !== 'expanded') {
@@ -256,11 +301,11 @@ export class PamiNavigationRail {
         const target = tabs[index];
         if (target) {
             this.setRovingTabindex(index);
-            target.focus();
+            this.focusDestination(target);
         }
     }
     componentWillLoad() {
-        this.tabsExpanded = this.variant === 'expanded';
+        this.tabsExpanded = this.variant === 'expanded' || this.presentation === 'drawer';
         /*
          * Seed the slot-presence flags from the light DOM BEFORE the first render —
          * the same technique the active-tab adoption below already uses. They used
@@ -290,7 +335,7 @@ export class PamiNavigationRail {
         // would clear the child's `active` attribute before we could read it. Read
         // the light-DOM children directly since the shadow slot isn't assigned yet.
         if (this.activeIndex < 0) {
-            const tabs = Array.from(this.el.children).filter((el) => el.tagName.toLowerCase() === 'pami-navigation-rail-tab');
+            const tabs = this.collectTabs(Array.from(this.el.children));
             const marked = tabs.findIndex((t) => t.hasAttribute('active'));
             if (marked >= 0)
                 this.activeIndex = marked;
@@ -300,6 +345,34 @@ export class PamiNavigationRail {
         this.syncTabs();
         this.syncFab();
         this.wireSlottedMenus();
+        this.observeDestinations();
+    }
+    connectedCallback() {
+        if (this.el.shadowRoot)
+            this.observeDestinations();
+    }
+    disconnectedCallback() {
+        this.destinationObserver?.disconnect();
+        this.el.querySelectorAll('pami-menu').forEach((menu) => {
+            menu.removeEventListener('pamiOpen', this.handleSlottedMenuOpen);
+            menu.removeEventListener('pamiClose', this.handleSlottedMenuClose);
+        });
+        this.wiredMenus = new WeakSet();
+    }
+    observeDestinations() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.destinationObserver?.disconnect();
+        this.destinationObserver = new MutationObserver(() => {
+            this.syncTabs();
+            this.wireSlottedMenus();
+        });
+        this.destinationObserver.observe(this.el, {
+            childList: true, subtree: true, attributes: true,
+            attributeFilter: ['value', 'href', 'disabled', 'hidden'],
+        });
+        this.syncTabs();
+        this.wireSlottedMenus();
     }
     onVariantChange(newVal, oldVal) {
         if (newVal === oldVal)
@@ -307,7 +380,7 @@ export class PamiNavigationRail {
         // Capture destinations before the rail's padding or target layout changes.
         // A child watcher alone can run after the parent has already moved its icon.
         this.getTabs().forEach(prepareRailTabTransition);
-        this.tabsExpanded = newVal === 'expanded';
+        this.tabsExpanded = newVal === 'expanded' || this.presentation === 'drawer';
         this.syncTabs();
         this.syncFab();
         // Consumers can synchronously update label visibility in these listeners;
@@ -332,17 +405,24 @@ export class PamiNavigationRail {
         this.syncTabs();
     }
     onActiveIndexChange() {
+        this.selectedChildValue = undefined;
+        this.syncTabs();
+    }
+    onPresentationChange() {
+        this.tabsExpanded = this.variant === 'expanded' || this.presentation === 'drawer';
         this.syncTabs();
     }
+    onActiveValueChange() { this.syncTabs(); }
     handleTabClick(e) {
         const target = e.target;
         if (!target)
             return;
         const tabs = this.getTabs();
-        const index = tabs.indexOf(target);
+        const path = this.destinationPath(target);
+        const index = tabs.indexOf(path[0]);
         if (index < 0)
             return;
-        if (this.isTabDisabled(target)) {
+        if (path.some(tab => this.isTabDisabled(tab))) {
             e.stopPropagation();
             return;
         }
@@ -350,13 +430,24 @@ export class PamiNavigationRail {
         // re-clicking the already-active destination (which replays the ripple).
         // `pamiTabChange` is the higher-level *selection changed* event, so only
         // emit it when the active index actually moves.
-        const changed = index !== this.activeIndex;
-        this.activeIndex = index;
+        const value = e.detail?.value ?? '';
+        const changed = this.activeValue !== undefined ? value !== this.activeValue
+            : this.hasHierarchy ? value !== this.selectedChildValue : index !== this.activeIndex;
+        if (this.activeValue === undefined)
+            this.activeIndex = index;
+        if (this.activeValue === undefined && this.hasHierarchy)
+            this.selectedChildValue = value;
+        this.syncTabs();
         this.setRovingTabindex(index);
         this.clearOtherSubmenuSelections(target);
         if (changed) {
-            this.pamiTabChange.emit({ index, value: e.detail?.value ?? '' });
+            this.pamiTabChange.emit({ index, value, ...(this.hasHierarchy ? { path: path.map(tab => this.tabValue(tab)) } : {}) });
         }
+        path.filter(tab => !tab.expanded).forEach(tab => {
+            void tab.setChildrenOpen?.(false);
+        });
+        if (this.presentation === 'drawer')
+            this.open = false;
     }
     /**
      * A destination whose dropdown row is chosen wears the same pill as the
@@ -378,34 +469,96 @@ export class PamiNavigationRail {
         // so arrow keys must skip it exactly as they skip a disabled one.
         return (tab.hasAttribute('disabled') ||
             tab.getAttribute('aria-disabled') === 'true' ||
-            tab.hasAttribute('data-overflowed'));
+            tab.hasAttribute('data-overflowed')
+            || tab.hidden || !!tab.parentElement?.closest('[hidden]'));
     }
     getTabs() {
         const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
         if (!slot)
             return [];
-        return slot
-            .assignedElements()
-            .filter((el) => el.tagName.toLowerCase() === 'pami-navigation-rail-tab');
+        return this.collectTabs(slot.assignedElements());
+    }
+    collectTabs(elements) {
+        return elements.flatMap((element) => {
+            if (element.tagName.toLowerCase() === 'pami-navigation-rail-tab')
+                return [element];
+            if (element.tagName.toLowerCase() === 'pami-navigation-group')
+                return this.collectTabs(Array.from(element.children));
+            return [];
+        });
+    }
+    tabValue(tab) {
+        return tab.value ?? tab.getAttribute('value') ?? '';
+    }
+    allTabs() {
+        const descend = (tabs) => tabs.flatMap(tab => [tab, ...descend(this.collectTabs(Array.from(tab.children).filter(child => child.getAttribute('slot') === 'children')))]);
+        return descend(this.getTabs());
+    }
+    destinationPath(tab) {
+        const path = [tab];
+        let parent = tab.parentElement?.closest('pami-navigation-rail-tab');
+        while (parent && parent.closest('pami-navigation-rail') === this.el) {
+            path.unshift(parent);
+            parent = parent.parentElement?.closest('pami-navigation-rail-tab');
+        }
+        return path;
+    }
+    visibleTabs() {
+        return this.allTabs().filter(tab => !this.isTabDisabled(tab) && this.destinationPath(tab).slice(0, -1)
+            .every(parent => !this.isTabDisabled(parent) && parent.childrenOpen));
+    }
+    focusDestination(tab) {
+        const method = tab.focusDestination;
+        if (this.hasHierarchy && typeof method === 'function')
+            void method.call(tab);
+        else
+            tab.focus();
+    }
+    onChildrenToggle(event) {
+        if (event.detail.open) {
+            const target = event.target;
+            if (!target.expanded)
+                this.getTabs().filter(tab => tab !== target).forEach(tab => {
+                    if (!tab.expanded) {
+                        void tab.setChildrenOpen?.(false);
+                    }
+                });
+        }
+        this.submenuOpen = this.allTabs().some(tab => !tab.expanded
+            && tab.childrenOpen);
+        this.syncTabs();
     }
     syncTabs() {
-        const tabs = this.getTabs();
+        const roots = this.getTabs();
+        const tabs = this.allTabs();
+        this.hasHierarchy = tabs.length !== roots.length || roots.some(tab => Array.from(tab.children).some(child => child.getAttribute('slot') === 'children'));
+        const groups = Array.from(this.el.querySelectorAll('pami-navigation-group'))
+            .filter((group) => group.closest('pami-navigation-rail') === this.el);
+        this.hasGroups = groups.length > 0;
+        groups.forEach((group) => this.setProp(group, 'expanded', this.tabsExpanded || this.orientation === 'horizontal'));
         // Detect link-style destinations so the container can shed its invalid
         // `tablist` role (a tablist must only contain `tab` children).
         this.hasLinkDestinations = tabs.some((tab) => !!tab.href || !!tab.getAttribute('href'));
+        const routeValue = this.activeValue ?? this.selectedChildValue;
         tabs.forEach((tab, i) => {
-            const active = i === this.activeIndex;
+            const active = routeValue !== undefined ? this.tabValue(tab) === routeValue
+                : roots.indexOf(tab) === this.activeIndex;
             this.setProp(tab, 'active', active);
             this.setProp(tab, 'labelVisibility', this.labelVisibility);
-            this.setProp(tab, 'expanded', this.tabsExpanded);
+            this.setProp(tab, 'expanded', !roots.includes(tab) || this.tabsExpanded);
+            this.setProp(tab, 'navigation', this.hasGroups || this.hasHierarchy);
             // The tab styles its own indicator, and shadow DOM keeps the rail out of
             // it — so hand the axis down as an attribute it can key off.
             tab.setAttribute('data-orientation', this.orientation);
             if (!this.disableFocusManagement) {
                 const focusable = !this.isTabDisabled(tab);
-                const isRoving = (this.activeIndex >= 0 && active) ||
-                    (this.activeIndex < 0 && i === tabs.findIndex((t) => !this.isTabDisabled(t)));
-                tab.tabIndex = focusable && isRoving ? 0 : -1;
+                const isRoving = active ||
+                    (!tabs.some((t, j) => this.activeValue !== undefined
+                        ? (t.value ?? t.getAttribute('value')) === this.activeValue && !this.isTabDisabled(t)
+                        : j === this.activeIndex && !this.isTabDisabled(t)) && i === tabs.findIndex((t) => !this.isTabDisabled(t)));
+                tab.tabIndex = focusable && (this.hasHierarchy || isRoving) ? 0 : -1;
+                if (Array.from(tab.children).some(child => child.getAttribute('slot') === 'children'))
+                    tab.tabIndex = -1;
             }
         });
         // Recompute the overflow set from every sync path, not just slotchange.
@@ -423,6 +576,8 @@ export class PamiNavigationRail {
     setRovingTabindex(index) {
         if (this.disableFocusManagement)
             return;
+        if (this.hasHierarchy)
+            return;
         const tabs = this.getTabs();
         tabs.forEach((tab, i) => {
             tab.tabIndex = i === index && !this.isTabDisabled(tab) ? 0 : -1;
@@ -463,6 +618,8 @@ export class PamiNavigationRail {
     }
     /** Destinations pushed past `max-visible`, in author order. */
     get overflowedTabs() {
+        if (this.hasGroups || this.hasHierarchy)
+            return [];
         const cap = this.maxVisible;
         const tabs = this.getTabs();
         if (!cap || cap < 1 || tabs.length <= cap)
@@ -494,12 +651,14 @@ export class PamiNavigationRail {
         const index = this.getTabs().indexOf(tab);
         if (index < 0)
             return;
-        const changed = index !== this.activeIndex;
-        this.activeIndex = index;
+        const value = tab.value ?? tab.getAttribute('value') ?? '';
+        const changed = this.activeValue !== undefined ? value !== this.activeValue : index !== this.activeIndex;
+        if (this.activeValue === undefined)
+            this.activeIndex = index;
         this.setRovingTabindex(index);
         this.clearOtherSubmenuSelections(tab);
         if (changed) {
-            this.pamiTabChange.emit({ index, value: tab.getAttribute('value') ?? '' });
+            this.pamiTabChange.emit({ index, value });
         }
         void this.overflowMenu()?.close();
     }
@@ -510,10 +669,13 @@ export class PamiNavigationRail {
     }
     render() {
         const hasFooterProfile = this.hasFooterLeading || this.hasFooterContent;
-        const footerContentVisible = this.variant === 'expanded' || this.orientation === 'horizontal';
-        return (h(Host, { key: 'acdd805e245749887375d371fd723f3b7027f555', class: {
+        const footerContentVisible = this.tabsExpanded || this.orientation === 'horizontal';
+        const brandName = [this.platformName, this.appName].filter(Boolean).join(' — ');
+        const content = (h("div", { key: '2830aa27974f2288f7340865298d4b6cd3e79231', class: "pami-navigation-rail__container", part: "container" }, h("div", { key: 'fe20f46dba167e4b8360d037505f43612d797e45', class: "pami-navigation-rail__logo", part: "logo", hidden: !this.hasLogo && !this.hasLogoExpanded && !brandName, role: brandName ? 'group' : undefined, "aria-label": brandName || undefined, title: [brandName, this.description].filter(Boolean).join('\n') || undefined }, h("span", { key: '28e002c557b3290a0cccde9e8d483c3ab4bb6a5d', class: "pami-navigation-rail__logo-contracted", part: "logo-contracted" }, h("slot", { key: '5d47fad19c2ceaf69982fcc19e05c3f4e9ecfdec', name: "logo", onSlotchange: this.handleLogoSlotChange })), h("span", { key: '3a8b11c89a9bbe7aeb564c23dce4a2aae041e14d', class: "pami-navigation-rail__logo-expanded", part: "logo-expanded" }, h("slot", { key: '71c652ecbd93a9f1741f44ef8c06e8e8b765a15a', name: "logo-expanded", onSlotchange: this.handleLogoExpandedSlotChange })), brandName && (h("span", { key: '676abd9f591590f1088209a81bfab11ebd00470a', class: "pami-navigation-rail__identity", part: "identity", "aria-hidden": "true" }, this.platformName && h("span", { key: 'e797693062aed0c7807a7f7a61cd422cbffe6e78', part: "platform-name" }, this.platformName), this.appName && h("span", { key: '50a1ff9f7aab2f6e03beff5e094ecf2a561a13aa', part: "app-name" }, this.appName)))), this.expandable && this.orientation === 'vertical' && this.presentation !== 'drawer' && (h("div", { key: '72ca634fbd6f6904cd58cb47ac51e011c9feaaad', class: "pami-navigation-rail__toggle", part: "toggle" }, h("pami-icon-button", { key: 'a8a7e2f468b06a600c30c39ed8d4e9e5418c3af5', class: "pami-navigation-rail__toggle-button", icon: this.variant === 'expanded' ? 'menu_open' : 'menu', "aria-label": this.toggleLabel, "aria-expanded": this.variant === 'expanded' ? 'true' : 'false', onClick: this.handleToggleClick }))), h("div", { key: '83dcbd6e9ba98052ee2cfd544560c01985292811', class: "pami-navigation-rail__header", part: "header", hidden: !this.hasHeader }, h("slot", { key: 'a08704ed6780955e892e0075a017be9dafc5fdf2', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'e8b074f58e6cbb180b969fa55e53edb1fd0f444c', class: "pami-navigation-rail__fab", part: "fab", hidden: !this.hasFab }, h("slot", { key: 'dcfa1ba6db3bed33d38bcfd91317be24946b1fd6', name: "fab", onSlotchange: this.handleFabSlotChange })), h("div", { key: '9ef2a17403ac54bd8e657cd8159b2ed3d8ab35f6', class: "pami-navigation-rail__destinations", part: "destinations", role: this.hasLinkDestinations || this.hasGroups || this.hasHierarchy ? undefined : 'tablist', "aria-orientation": this.hasLinkDestinations || this.hasGroups || this.hasHierarchy ? undefined : this.orientation, "aria-label": this.hasLinkDestinations || this.hasGroups || this.hasHierarchy ? undefined : this.label }, h("slot", { key: 'b7b69ea78a0c531841c4884cc1591b96065fc35e', onSlotchange: this.handleSlotChange })), this.overflowCount > 0 && (h("div", { key: '5746c1816104a87e0a383ade1a86262a8eca54a5', class: "pami-navigation-rail__overflow", part: "overflow" }, h("button", { key: '2bfb9498c838b8779bd747592632394c62279f7a', id: this.overflowId, type: "button", class: "pami-navigation-rail__overflow-trigger", part: "overflow-trigger", "aria-haspopup": "menu", "aria-label": this.overflowLabel, onClick: this.toggleOverflow }, h("pami-icon", { key: 'aedf83afad45024077f6c7b1f154f543472f16c4', class: "pami-navigation-rail__overflow-icon", "aria-hidden": "true", name: this.overflowIcon }), h("span", { key: 'b1105a6d6ea66a0251e2f9455283cd041068aca8', class: "pami-navigation-rail__overflow-label" }, this.overflowLabel)), h("pami-menu", { key: 'e9a1c68d5ecada63bfcfeedd0779afa171385f06', anchor: this.overflowId, placement: this.orientation === 'horizontal' ? 'bottom-end' : 'top-start' }, this.overflowedTabs.map((tab) => (h("pami-menu-item", { key: tab.getAttribute('value') || tab.getAttribute('label') || '', headline: tab.getAttribute('label') || '', onClick: () => this.selectOverflowed(tab) }, tab.getAttribute('icon') && (h("pami-icon", { slot: "leading-icon", name: tab.getAttribute('icon') ?? undefined })))))))), h("div", { key: '19e911aea22be439e60ce8315c15f1ad3269e434', class: "pami-navigation-rail__footer", part: "footer", hidden: !this.hasFooter && !hasFooterProfile }, h("div", { key: 'e6c8a5efeefa6c99adffab5ce2bda520b862d733', class: "pami-navigation-rail__footer-profile", part: "footer-profile", hidden: !hasFooterProfile }, h("div", { key: 'd7ff505ead3f62658976f8f9a900a1a57208836c', class: "pami-navigation-rail__footer-leading", part: "footer-leading" }, h("slot", { key: '5f35ba33870397dcedcb1284b8389c63c5ebae72', name: "footer-leading", onSlotchange: this.handleFooterProfileSlotChange })), h("div", { key: '8ed31d4ef2562c1e5ee83523a22900b822fbc6ad', class: "pami-navigation-rail__footer-content", part: "footer-content", "aria-hidden": footerContentVisible ? undefined : 'true', inert: !footerContentVisible }, h("slot", { key: '85a12ed09a47d82708222789caeaa9911b4a902a', name: "footer-content", onSlotchange: this.handleFooterProfileSlotChange }))), h("slot", { key: '93aca2cd191c48be9c5339fc6138642d12c02828', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+        return (h(Host, { key: '43bb67122b2065f096ceb49abd29d74a3918f6f2', class: {
                 'pami-navigation-rail': true,
-                [`pami-navigation-rail--${this.variant}`]: true,
+                [`pami-navigation-rail--${this.presentation === 'drawer' ? 'expanded' : this.variant}`]: true,
+                'pami-navigation-rail--drawer': this.presentation === 'drawer',
                 'pami-navigation-rail--tabs-expanded': this.tabsExpanded,
                 'pami-navigation-rail--horizontal': this.orientation === 'horizontal',
                 'pami-navigation-rail--submenu-open': this.submenuOpen,
@@ -523,10 +685,22 @@ export class PamiNavigationRail {
                 [`pami-navigation-rail--labels-${this.labelVisibility}`]: true,
                 'pami-navigation-rail--with-logo': this.hasLogo || this.hasLogoExpanded,
                 'pami-navigation-rail--with-logo-expanded': this.hasLogoExpanded,
+                'pami-navigation-rail--with-identity': !!brandName,
                 'pami-navigation-rail--with-header': this.hasHeader,
                 'pami-navigation-rail--with-fab': this.hasFab,
                 'pami-navigation-rail--with-footer': this.hasFooter || hasFooterProfile,
-            }, role: "navigation", "aria-label": this.label, onKeyDown: this.handleKeyDown }, h("div", { key: 'ff13160283ffc4935c38122a52232ae066c33288', class: "pami-navigation-rail__scrim", part: "scrim", "aria-hidden": "true", onClick: this.handleScrimClick }), h("div", { key: 'b773e88b80dcf514f79b75c70205b1b4c747c13b', class: "pami-navigation-rail__container", part: "container" }, h("div", { key: '837055125d1b35a3b02a1efd94d8be96aaf0b18f', class: "pami-navigation-rail__logo", part: "logo", hidden: !this.hasLogo && !this.hasLogoExpanded }, h("span", { key: '3baaa753f0fa45290ecf0ffd1071f96dd21ff500', class: "pami-navigation-rail__logo-contracted", part: "logo-contracted" }, h("slot", { key: '8914fe3ab3f9784d4ffa09eb39cebd7b4aed8128', name: "logo", onSlotchange: this.handleLogoSlotChange })), h("span", { key: '3e8943b4ffed500e4d5641a4368b9962675abf89', class: "pami-navigation-rail__logo-expanded", part: "logo-expanded" }, h("slot", { key: '683cd0c23988aae37142dc9442e7b43c29fe034d', name: "logo-expanded", onSlotchange: this.handleLogoExpandedSlotChange }))), this.expandable && this.orientation === 'vertical' && (h("div", { key: '0a204fd91528a5dd9c7b660d78883ab86cede817', class: "pami-navigation-rail__toggle", part: "toggle" }, h("pami-icon-button", { key: '1c59638b1154120f10b1d6d40c045299d9377fab', class: "pami-navigation-rail__toggle-button", icon: this.variant === 'expanded' ? 'menu_open' : 'menu', "aria-label": this.toggleLabel, "aria-expanded": this.variant === 'expanded' ? 'true' : 'false', onClick: this.handleToggleClick }))), h("div", { key: '226bac425e1e9fd936852717b7a288602f269e4f', class: "pami-navigation-rail__header", part: "header", hidden: !this.hasHeader }, h("slot", { key: '720c43b7fad4026b806ec4258cc627e6445023b6', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'ed1d20f6c727291848a7bdebcbaf5362de7b1165', class: "pami-navigation-rail__fab", part: "fab", hidden: !this.hasFab }, h("slot", { key: '3d55cbb48bc89d43c5ff2364ea73242d572578c4', name: "fab", onSlotchange: this.handleFabSlotChange })), h("div", { key: 'fcdc832fae99817e6b7ebe962aa9904bd9da4aa9', class: "pami-navigation-rail__destinations", part: "destinations", role: this.hasLinkDestinations ? undefined : 'tablist', "aria-orientation": this.hasLinkDestinations ? undefined : this.orientation, "aria-label": this.hasLinkDestinations ? undefined : this.label }, h("slot", { key: 'b30bfce84c5ef36a363ab634f0b0045de17cb912', onSlotchange: this.handleSlotChange })), this.overflowCount > 0 && (h("div", { key: '393685e75cdea15961d72c2de1bd821728ae9ad7', class: "pami-navigation-rail__overflow", part: "overflow" }, h("button", { key: '0bcd6c5ed43973792d0b91de4f2270867374b83e', id: this.overflowId, type: "button", class: "pami-navigation-rail__overflow-trigger", part: "overflow-trigger", "aria-haspopup": "menu", "aria-label": this.overflowLabel, onClick: this.toggleOverflow }, h("pami-icon", { key: '410ab13f99e83fb9afc946aa3280702bf8166de4', class: "pami-navigation-rail__overflow-icon", "aria-hidden": "true", name: this.overflowIcon }), h("span", { key: '04a1e5e2c2ecefbe83be3638b92945e4427fec82', class: "pami-navigation-rail__overflow-label" }, this.overflowLabel)), h("pami-menu", { key: '403ad446a7844d7a8db5a5879ed539edbb2be351', anchor: this.overflowId, placement: this.orientation === 'horizontal' ? 'bottom-end' : 'top-start' }, this.overflowedTabs.map((tab) => (h("pami-menu-item", { key: tab.getAttribute('value') || tab.getAttribute('label') || '', headline: tab.getAttribute('label') || '', onClick: () => this.selectOverflowed(tab) }, tab.getAttribute('icon') && (h("pami-icon", { slot: "leading-icon", name: tab.getAttribute('icon') ?? undefined })))))))), h("div", { key: 'dcce4f8cca53b90ec80a3383a40fa4dda0f0755b', class: "pami-navigation-rail__footer", part: "footer", hidden: !this.hasFooter && !hasFooterProfile }, h("div", { key: '4014ed5b37914db844bed6d09cb271417343cef1', class: "pami-navigation-rail__footer-profile", part: "footer-profile", hidden: !hasFooterProfile }, h("div", { key: 'd1814862146b2cdcc1212b94029ca29cfb3d2cdf', class: "pami-navigation-rail__footer-leading", part: "footer-leading" }, h("slot", { key: '8344c783af8756f587da41e1b9199ec279c7d0c1', name: "footer-leading", onSlotchange: this.handleFooterProfileSlotChange })), h("div", { key: '25e8cb0b4b182ea98b8c5f993b8ae6a400193fb8', class: "pami-navigation-rail__footer-content", part: "footer-content", "aria-hidden": footerContentVisible ? undefined : 'true', inert: !footerContentVisible }, h("slot", { key: '737c84fbc70f8e4517872d527bb3fabf53f1204f', name: "footer-content", onSlotchange: this.handleFooterProfileSlotChange }))), h("slot", { key: '04b2300ee796150d2ae7d3d3833e3502bf7ad87b', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, role: "navigation", "aria-label": this.label, onKeyDown: this.handleKeyDown }, h("div", { key: '6695f2fc2948edf2eeb02097d97e9c97e4ebe594', class: "pami-navigation-rail__scrim", part: "scrim", "aria-hidden": "true", onClick: this.handleScrimClick }), this.presentation === 'drawer' ? (h("pami-side-sheet", { variant: "modal", side: "start", open: this.open, "aria-label": this.label, onPamiOpen: event => {
+                if (event.target !== event.currentTarget)
+                    return;
+                event.stopPropagation();
+                this.pamiOpen.emit();
+            }, onPamiClose: event => {
+                if (event.target !== event.currentTarget)
+                    return;
+                event.stopPropagation();
+                this.open = false;
+                this.pamiClose.emit();
+            } }, h("pami-icon-button", { slot: "close", icon: "close", "aria-label": this.closeLabel, onClick: () => this.close() }), content)) : content));
     }
     static get is() { return "pami-navigation-rail"; }
     static get encapsulation() { return "shadow"; }
@@ -554,7 +728,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant \u2014 `standard` (the spec's *collapsed* rail: 80px wide,\r\nstacked icon + label) or `expanded` (icons + label inline, 220\u2013360px wide)."
+                    "text": "Visual variant \u2014 `standard` (the spec's *collapsed* rail: 80px wide,\nstacked icon + label) or `expanded` (icons + label inline, 220\u2013360px wide)."
                 },
                 "getter": false,
                 "setter": false,
@@ -574,7 +748,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal styling for the expanded variant per spec: `surface-container`\r\nbackground, level-2 elevation, large corner shape. Use when the expanded\r\nrail floats over content instead of being docked; positioning and the\r\nscrim are the host app's responsibility. No effect while collapsed."
+                    "text": "Modal styling for the expanded variant per spec: `surface-container`\nbackground, level-2 elevation, large corner shape. Use when the expanded\nrail floats over content instead of being docked; positioning and the\nscrim are the host app's responsibility. No effect while collapsed."
                 },
                 "getter": false,
                 "setter": false,
@@ -594,7 +768,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Stretch the rail to the full viewport height (`100dvh`) instead of filling\r\nits parent container. Opt-in: by default the rail fills whatever height its\r\ncontainer gives it (`100%`), which keeps it embeddable in split-pane /\r\nnested / modal-docked layouts. Set this when the rail is the app's\r\ntop-level side navigation and should always span the screen."
+                    "text": "Stretch the rail to the full viewport height (`100dvh`) instead of filling\nits parent container. Opt-in: by default the rail fills whatever height its\ncontainer gives it (`100%`), which keeps it embeddable in split-pane /\nnested / modal-docked layouts. Set this when the rail is the app's\ntop-level side navigation and should always span the screen."
                 },
                 "getter": false,
                 "setter": false,
@@ -634,7 +808,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Render a built-in leading menu button that toggles between the collapsed\r\n(`standard`) and `expanded` variants. The icon animates between `menu`\r\n(collapsed) and `menu_open` (expanded) per the MD3 navigation rail figure.\r\nWhen you'd rather supply your own control, leave this `false` and place a\r\nbutton in the `header` slot wired to the `expand()` / `collapse()` /\r\n`toggle()` methods."
+                    "text": "Render a built-in leading menu button that toggles between the collapsed\n(`standard`) and `expanded` variants. The icon animates between `menu`\n(collapsed) and `menu_open` (expanded) per the MD3 navigation rail figure.\nWhen you'd rather supply your own control, leave this `false` and place a\nbutton in the `header` slot wired to the `expand()` / `collapse()` /\n`toggle()` methods."
                 },
                 "getter": false,
                 "setter": false,
@@ -654,7 +828,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible label for the built-in toggle button (only rendered when\r\n`expandable` is set). Announced to assistive tech as the button's name."
+                    "text": "Accessible label for the built-in toggle button (only rendered when\n`expandable` is set). Announced to assistive tech as the button's name."
                 },
                 "getter": false,
                 "setter": false,
@@ -674,7 +848,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls whether destination labels are shown.\r\n - `all`: every destination shows its label (default \u2014 recommended by MD3 for 3\u20137 destinations)\r\n - `selected`: only the active destination shows its label\r\n - `none`: icons only"
+                    "text": "Controls whether destination labels are shown.\n - `all`: every destination shows its label (default \u2014 recommended by MD3 for 3\u20137 destinations)\n - `selected`: only the active destination shows its label\n - `none`: icons only"
                 },
                 "getter": false,
                 "setter": false,
@@ -694,7 +868,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Index of the currently active destination. -1 means no destination is\r\nactive. Two-way bound: updates when the user selects a destination and\r\ncan be set externally to programmatically change the active destination."
+                    "text": "Index of the currently active destination. -1 means no destination is\nactive. Two-way bound: updates when the user selects a destination and\ncan be set externally to programmatically change the active destination."
                 },
                 "getter": false,
                 "setter": false,
@@ -714,7 +888,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible name announced for the rail's `navigation` landmark.\r\nRequired for screen reader users (WAI-ARIA APG / WCAG 2.4.1)."
+                    "text": "Accessible name announced for the rail's `navigation` landmark.\nRequired for screen reader users (WAI-ARIA APG / WCAG 2.4.1)."
                 },
                 "getter": false,
                 "setter": false,
@@ -722,6 +896,142 @@ export class PamiNavigationRail {
                 "attribute": "label",
                 "defaultValue": "'Navigation'"
             },
+            "platformName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Platform name, shown above the tool name in the brand area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "platform-name"
+            },
+            "appName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short name of the tool within the platform."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "app-name"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional functional description, available in the brand tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "activeValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled destination value. When supplied, takes precedence over activeIndex."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-value"
+            },
+            "presentation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rail' | 'drawer'",
+                    "resolved": "\"drawer\" | \"rail\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Docked rail or modal navigation drawer using the same authored content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "presentation",
+                "defaultValue": "'rail'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drawer visibility. Does not change the rail variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible drawer close-control name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close navigation'"
+            },
             "disableFocusManagement": {
                 "type": "boolean",
                 "mutable": false,
@@ -734,7 +1044,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `true` to disable focus management (roving tabindex + arrow keys).\r\nUse when embedding inside a custom focus management system."
+                    "text": "Set to `true` to disable focus management (roving tabindex + arrow keys).\nUse when embedding inside a custom focus management system."
                 },
                 "getter": false,
                 "setter": false,
@@ -754,7 +1064,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Local density rung. Drives the same `--md-sys-density-scale` signal that a\r\nglobal `data-density` ancestor sets, so a local value simply overrides the\r\ninherited one. 0 = default, -4 = ultra-compact."
+                    "text": "Local density rung. Drives the same `--md-sys-density-scale` signal that a\nglobal `data-density` ancestor sets, so a local value simply overrides the\ninherited one. 0 = default, -4 = ultra-compact."
                 },
                 "getter": false,
                 "setter": false,
@@ -774,7 +1084,7 @@ export class PamiNavigationRail {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Layout axis.\r\n\r\n- `vertical` (default) \u2014 the MD3 rail: a fixed-width column on the leading\r\n  edge.\r\n- `horizontal` \u2014 the same parts laid out as a top-of-page bar: logo\r\n  leading, destinations in a row, FAB and footer trailing. For wide layouts\r\n  where a side rail would spend width the content wants.\r\n\r\nThe expand/collapse affordance is vertical-only \u2014 a bar has nowhere to grow\r\n\u2014 so `expandable` is ignored while horizontal."
+                    "text": "Layout axis.\n\n- `vertical` (default) \u2014 the MD3 rail: a fixed-width column on the leading\n  edge.\n- `horizontal` \u2014 the same parts laid out as a top-of-page bar: logo\n  leading, destinations in a row, FAB and footer trailing. For wide layouts\n  where a side rail would spend width the content wants.\n\nThe expand/collapse affordance is vertical-only \u2014 a bar has nowhere to grow\n\u2014 so `expandable` is ignored while horizontal."
                 },
                 "getter": false,
                 "setter": false,
@@ -794,7 +1104,7 @@ export class PamiNavigationRail {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Cap on how many destinations stay in the rail. Any beyond it collapse into\r\nan overflow trigger that opens a menu of the rest; choosing one activates\r\nthat destination. Leave unset for no overflow.\r\n\r\nThe trigger is a `button` with `aria-haspopup=\"menu\"`, deliberately OUTSIDE\r\nthe `tablist` \u2014 a tablist may only contain tabs."
+                    "text": "Cap on how many destinations stay in the rail. Any beyond it collapse into\nan overflow trigger that opens a menu of the rest; choosing one activates\nthat destination. Leave unset for no overflow.\n\nThe trigger is a `button` with `aria-haspopup=\"menu\"`, deliberately OUTSIDE\nthe `tablist` \u2014 a tablist may only contain tabs."
                 },
                 "getter": false,
                 "setter": false,
@@ -853,6 +1163,9 @@ export class PamiNavigationRail {
             "hasFooterLeading": {},
             "hasFooterContent": {},
             "hasLinkDestinations": {},
+            "hasGroups": {},
+            "hasHierarchy": {},
+            "selectedChildValue": {},
             "overflowCount": {},
             "submenuOpen": {},
             "tabsExpanded": {}
@@ -860,6 +1173,36 @@ export class PamiNavigationRail {
     }
     static get events() {
         return [{
+                "method": "pamiOpen",
+                "name": "pamiOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "pamiClose",
+                "name": "pamiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "pamiTabChange",
                 "name": "pamiTabChange",
                 "bubbles": true,
@@ -870,8 +1213,8 @@ export class PamiNavigationRail {
                     "text": "Emitted when the user selects a destination."
                 },
                 "complexType": {
-                    "original": "{ index: number; value: string }",
-                    "resolved": "{ index: number; value: string; }",
+                    "original": "{ index: number; value: string; path?: string[] }",
+                    "resolved": "{ index: number; value: string; path?: string[] | undefined; }",
                     "references": {}
                 }
             }, {
@@ -908,6 +1251,61 @@ export class PamiNavigationRail {
     }
     static get methods() {
         return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "whenClosed": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLPamiSideSheetElement": {
+                            "location": "global",
+                            "id": "global::HTMLPamiSideSheetElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "expand": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -993,6 +1391,12 @@ export class PamiNavigationRail {
             }, {
                 "propName": "activeIndex",
                 "methodName": "onActiveIndexChange"
+            }, {
+                "propName": "presentation",
+                "methodName": "onPresentationChange"
+            }, {
+                "propName": "activeValue",
+                "methodName": "onActiveValueChange"
             }, {
                 "propName": "maxVisible",
                 "methodName": "onMaxVisibleChange"
@@ -1005,6 +1409,12 @@ export class PamiNavigationRail {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pamiChildrenToggle",
+                "method": "onChildrenToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "pamiSubmenuToggle",
                 "method": "onDescendantSubmenuToggle",