@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/collection/components/xpl-top-nav/top-nav.stories.js

@@ -1,5 +1,6 @@
 import { addons } from "storybook/preview-api";
 import { INITIAL_VIEWPORTS } from "storybook/viewport";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 const UPDATE_GLOBALS = 'updateGlobals';
 const TOP_NAV_MOBILE600_VIEWPORT = {
     name: 'Mobile (600px)',
@@ -185,9 +186,8 @@ function ensureTopNavStoryStyles() {
     document.head.appendChild(style);
 }
 function syncTopNavPreviewViewportToGlobals(previewViewport, globalsSnapshot) {
-    var _a;
-    const next = previewViewport !== null && previewViewport !== void 0 ? previewViewport : 'responsive';
-    const raw = (_a = globalsSnapshot === null || globalsSnapshot === void 0 ? void 0 : globalsSnapshot.viewport) === null || _a === void 0 ? void 0 : _a.value;
+    const next = previewViewport ?? 'responsive';
+    const raw = globalsSnapshot?.viewport?.value;
     const normalizedCurrent = raw == null || raw === '' || raw === 'reset' ? undefined : String(raw);
     const desiredValue = next === 'responsive' ? undefined : next;
     if (normalizedCurrent === desiredValue) {
@@ -208,8 +208,7 @@ function syncTopNavPreviewViewportToGlobals(previewViewport, globalsSnapshot) {
     });
 }
 function topNavPreviewViewportDecorator(story, context) {
-    var _a;
-    const viewport = (_a = context.globals) === null || _a === void 0 ? void 0 : _a.viewport;
+    const viewport = context.globals?.viewport;
     syncTopNavPreviewViewportToGlobals(context.args.previewViewport, { viewport });
     return story();
 }
@@ -254,7 +253,11 @@ const topNavFamilyDocsDescription = [
 const meta = {
     title: 'Components/Navigation/Top Navigation',
     component: 'xpl-top-nav',
+    tags: ['vrt'],
     decorators: [topNavDarkStoryDecorator],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     parameters: {
         design: TOP_NAV_FIGMA_DESIGN,
         darkMode: {
@@ -305,8 +308,8 @@ export const TopNavigation = (args) => {
     const labelAttr = topNavLabelAttr(label);
     const childAccountAttr = topNavChildAccountLabelAttr(childAccountLabel);
     const brandAttr = topNavBrandAttrs(brandName, brandHref, brandLogo);
-    const username = (menuUsername === null || menuUsername === void 0 ? void 0 : menuUsername.trim()) ? escapeAttr(menuUsername.trim()) : '';
-    const email = (menuEmail === null || menuEmail === void 0 ? void 0 : menuEmail.trim()) ? escapeAttr(menuEmail.trim()) : '';
+    const username = menuUsername?.trim() ? escapeAttr(menuUsername.trim()) : '';
+    const email = menuEmail?.trim() ? escapeAttr(menuEmail.trim()) : '';
     const navHeaderMenuAttrs = [
         username ? `username="${username}"` : '',
         email ? `email="${email}"` : '',
@@ -466,7 +469,10 @@ TopNavigation.parameters = {
     layout: 'fullscreen',
     design: TOP_NAV_FIGMA_DESIGN,
     viewport: {
-        viewports: Object.assign(Object.assign({}, INITIAL_VIEWPORTS), { mobile600: TOP_NAV_MOBILE600_VIEWPORT }),
+        viewports: {
+            ...INITIAL_VIEWPORTS,
+            mobile600: TOP_NAV_MOBILE600_VIEWPORT,
+        },
     },
     'web-component': {
         render: TopNavigation(TopNavigation.args),
@@ -476,7 +482,6 @@ TopNavigation.parameters = {
     },
 };
 export const TopNavItem = (args) => {
-    var _a;
     const attrs = [
         args.active === true ? ' active' : '',
         args.href != null && args.href !== '' ? `href="${escapeAttr(args.href)}"` : '',
@@ -498,7 +503,7 @@ export const TopNavItem = (args) => {
         ? `\n        <xpl-icon slot="trailing-icon" icon="${escapeAttr(args.trailingIcon)}"></xpl-icon>`
         : '';
     const dropdownSlot = args.showDropdown === true
-        ? `\n        <xpl-top-nav-menu slot="dropdown" label="${escapeAttr((_a = args.label) !== null && _a !== void 0 ? _a : 'Menu')}">
+        ? `\n        <xpl-top-nav-menu slot="dropdown" label="${escapeAttr(args.label ?? 'Menu')}">
             <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
             <xpl-top-nav-item label="Capital" href="#" selected>
                 <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
@@ -514,7 +519,6 @@ ${hasLabel ? '' : '        <span>Custom slot content</span>'}${trailingIconSlot}
 `.trim();
 };
 const HtmlTopNavItem = (args) => {
-    var _a;
     const label = args.label != null && args.label !== '' ? args.label : 'Custom slot content';
     const selected = args.selected === true;
     const hasIcon = args.icon != null && args.icon !== '';
@@ -531,7 +535,7 @@ const HtmlTopNavItem = (args) => {
         .filter(Boolean)
         .join(' ');
     const innerTag = hasHref
-        ? `    <a href="${escapeAttr((_a = args.href) !== null && _a !== void 0 ? _a : '')}"${ariaCurrent} class="${innerClasses}">`
+        ? `    <a href="${escapeAttr(args.href ?? '')}"${ariaCurrent} class="${innerClasses}">`
         : `    <button type="button"${ariaCurrent} class="${innerClasses}">`;
     const innerClose = hasHref ? '    </a>' : '    </button>';
     const lines = [
@@ -643,6 +647,7 @@ const HtmlTopNavMenuGroup = (args) => {
         '</div>',
     ].join('\n');
 };
+TopNavMenuGroup.storyName = 'Nav Menu (grouping container)';
 TopNavMenuGroup.args = {
     label: 'Xplor Ops',
 };
@@ -657,10 +662,13 @@ TopNavMenuGroup.parameters = {
     design: TOP_NAV_FIGMA_DESIGN,
     docs: {
         description: {
-            story: 'Thin grouping container for `xpl-top-nav-item` rows — the panel content for a desktop flyout ' +
-                '(nest it in a parent `xpl-top-nav-item`\'s `slot="dropdown"`, see the `TopNavItem` story\'s ' +
-                '`showDropdown` control) and, in a follow-up PR, the source list for the mobile cascade. Panel ' +
-                'chrome (width, surface, shadow, radius, padding) matches `xpl-nav-header-menu`.',
+            story: '**`xpl-top-nav-menu`** — a thin grouping container for `xpl-top-nav-item` rows. It is the panel ' +
+                'content for a **dropdown nav item**: nest it in a parent `xpl-top-nav-item`\'s `slot="dropdown"` ' +
+                "(see the `TopNavItem` story's `showDropdown` control). On desktop it renders as a flyout under the " +
+                'parent; on narrow viewports the same markup drives the **mobile cascade** (drill-in with an auto ' +
+                'back row). This is **not** the account menu — for the profile/account panel see **Nav Header Menu ' +
+                '(account)** (`xpl-nav-header-menu`). The two only share panel chrome (width, surface, shadow, radius, ' +
+                'padding); their roles differ.',
         },
     },
     'web-component': {
@@ -714,6 +722,7 @@ const HtmlTopNavMenu = (args) => {
     lines.push('  <div role="list" class="sb-top-nav-menu-list">', '    <a href="#">View Account</a>', '    <a href="#">Change Account</a>', '    <a href="#">Logout</a>', '  </div>', '</div>');
     return lines.join('\n');
 };
+TopNavMenu.storyName = 'Nav Header Menu (account)';
 TopNavMenu.args = {
     username: 'Katie Wilson',
     email: 'katie01@email.com',
@@ -736,6 +745,16 @@ TopNavMenu.argTypes = {
 TopNavMenu.parameters = {
     layout: 'centered',
     design: TOP_NAV_FIGMA_DESIGN,
+    docs: {
+        description: {
+            story: '**`xpl-nav-header-menu`** — the account/profile panel: a profile header (`username`, `email`), an ' +
+                'optional narrow-only `slot="right-aside-mobile"` strip, and a default slot of `xpl-top-nav-item` ' +
+                'rows. It is usually slotted into `xpl-top-nav` `slot="user-menu"` and shown inside the account ' +
+                'popover. This is **not** the dropdown grouping container — for grouping child links under a parent ' +
+                'nav item (desktop flyout / mobile cascade) see **Nav Menu (grouping container)** ' +
+                '(`xpl-top-nav-menu`).',
+        },
+    },
     'web-component': {
         render: TopNavMenu(TopNavMenu.args),
     },

package/dist/collection/components/xpl-top-nav/xpl-nav-header-menu/xpl-nav-header-menu.js

@@ -1,4 +1,8 @@
 import { Host, h } from "@stencil/core";
+import { hasHostNamedSlot } from "../../../utils/light-dom-slots";
+const NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS = [
+    '.xpl-nav-header-menu__right-aside-mobile',
+];
 export class NavHeaderMenu {
     constructor() {
         this.rightAsideMobilePresent = false;
@@ -52,23 +56,25 @@ export class NavHeaderMenu {
         });
     }
     disconnectRightAsideMobileSlotObserver() {
-        var _a;
-        (_a = this.rightAsideMobileSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.rightAsideMobileSlotObserver?.disconnect();
         this.rightAsideMobileSlotObserver = undefined;
     }
     syncRightAsideMobileSlotPresent() {
-        const has = this.el.querySelector('[slot="right-aside-mobile"]') != null;
+        const has = hasHostNamedSlot(this.el, 'right-aside-mobile', {
+            hostTag: 'xpl-nav-header-menu',
+            projectionRegionSelectors: NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS,
+        });
         if (has !== this.rightAsideMobilePresent) {
             this.rightAsideMobilePresent = has;
         }
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (h(Host, { key: 'c2a9e2904ae2cd06462f7e2d4407ac3e34ded34e', class: {
+        return (h(Host, { key: 'dc0a40f8c2db6084678f6059efa61d8dd75d1a44', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (h("div", { key: '0b7c1b081ac1e73b95bf36724e83511c27e522be', class: "xpl-nav-header-menu__profile" }, h("div", { key: '77ac13de474f5508b5bae03aba09f782a0a05cbc', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '58722b17d64c8cffe7a38b81f30f885a26b0b19e', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'ad7aa885518ee8c205cc3f0e1c84a24b3e486335', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e8c6cdb4e57b02d8b9591eef07a9f0458b73acaa', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'bb884eeb89b4de9d45cb4a7466cc2d7aac90cf6f', name: "right-aside-mobile" })), h("div", { key: '4fa5347923a9f9db10e8875e9ec00407b843263c', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '694d33b2fe8b1cfa302de845a15aa24fdb33fc62' }))));
+            } }, hasProfile && (h("div", { key: '857696ff73c74ccf74e3607169aa8378cdbb9a9b', class: "xpl-nav-header-menu__profile" }, h("div", { key: '0398df3659ad70f11a8300f5213f436840cffe29', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: 'de0e0878b44a134b6fa10eb2117f52b822179602', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'e6a523c745f1e5ef80613071c02452e727b929b9', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'd12b09d4bf2e68947fb78073e9f8bc3ba7d4d65d', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'e4a8f9080993d32338016c5c72fc98c5c4dd3c22', name: "right-aside-mobile" })), h("div", { key: 'd21f74ddc1a08e27c77494fc622b3d85d834760f', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '9ebf836dc8d33991a432cb47e1510091bfd57322' }))));
     }
     static get is() { return "xpl-nav-header-menu"; }
     static get properties() {

package/dist/collection/components/xpl-top-nav/xpl-top-nav-item/xpl-top-nav-item.js

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { TimerManager } from "../../../utils/lifecycle";
+import { TimerManager, isBrowser } from "../../../utils/lifecycle";
+import { TOP_NAV_MOBILE_MQ } from "../top-nav-constants";
 import { TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS, TOP_NAV_ITEM_HOVER_OPEN_MQ, } from "./top-nav-item-constants";
 const TIMER = {
     hasDropdownSync: 'hasDropdownSync',
@@ -15,6 +16,7 @@ export class TopNavItem {
         this.hasActiveDescendant = false;
         this.hasDropdown = false;
         this.isLeadingIconSlotPresent = false;
+        this.isMobileViewport = false;
         this.hostListitemRole = false;
         this.isTrailingIconSlotPresent = false;
         this.active = false;
@@ -59,9 +61,12 @@ export class TopNavItem {
             if (isLinkMode && e.key === ' ') {
                 e.preventDefault();
                 const anchor = this.el.querySelector('.xpl-top-nav-item__inner');
-                anchor === null || anchor === void 0 ? void 0 : anchor.click();
+                anchor?.click();
             }
         };
+        this.onMobileViewportChange = () => {
+            this.isMobileViewport = this.mobileMq?.matches ?? false;
+        };
         this.handleMouseEnter = () => {
             if (!this.hasDropdown || !this.hoverModeActive()) {
                 return;
@@ -97,8 +102,11 @@ export class TopNavItem {
             this.broadcastCloseOtherDropdownHosts();
     }
     connectedCallback() {
-        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
             this.hoverOpenMq = window.matchMedia(TOP_NAV_ITEM_HOVER_OPEN_MQ);
+            this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onMobileViewportChange);
+            this.isMobileViewport = this.mobileMq.matches;
         }
         this.syncHostListitemRole();
         this.syncHasDropdownFromDom();
@@ -108,6 +116,8 @@ export class TopNavItem {
     disconnectedCallback() {
         this.timers.dispose();
         this.hoverOpenMq = undefined;
+        this.mobileMq?.removeEventListener('change', this.onMobileViewportChange);
+        this.mobileMq = undefined;
         this.disconnectDropdownSlotObserver();
         this.disconnectListitemContextObservers();
         const doc = this.el.ownerDocument;
@@ -117,7 +127,6 @@ export class TopNavItem {
     componentWillLoad() {
         this.syncHostListitemRole();
         this.syncHasDropdownFromDom();
-        this.syncDropdownDocListeners();
     }
     componentWillRender() {
         this.disconnectDropdownSlotObserver();
@@ -171,15 +180,13 @@ export class TopNavItem {
         });
     }
     disconnectDropdownSlotObserver() {
-        var _a;
-        (_a = this.dropdownSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.dropdownSlotObserver?.disconnect();
         this.dropdownSlotObserver = undefined;
     }
     disconnectListitemContextObservers() {
-        var _a, _b;
-        (_a = this.parentListitemContextObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentListitemContextObserver?.disconnect();
         this.parentListitemContextObserver = undefined;
-        (_b = this.selfListitemContextObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.selfListitemContextObserver?.disconnect();
         this.selfListitemContextObserver = undefined;
     }
     connectListitemContextObservers() {
@@ -204,7 +211,7 @@ export class TopNavItem {
             const leftPrimaryListHost = isTopNavLeftAside
                 ? parent.querySelector('.xpl-top-nav__left-primary')
                 : null;
-            const observeTarget = leftPrimaryListHost !== null && leftPrimaryListHost !== void 0 ? leftPrimaryListHost : parent;
+            const observeTarget = leftPrimaryListHost ?? parent;
             this.parentListitemContextObserver.observe(observeTarget, {
                 attributes: true,
                 attributeFilter: ['role'],
@@ -224,6 +231,9 @@ export class TopNavItem {
         });
     }
     syncDropdownDocListeners() {
+        if (!isBrowser()) {
+            return;
+        }
         const doc = this.el.ownerDocument;
         doc.removeEventListener('click', this.onDocClickCapture, true);
         doc.removeEventListener('keydown', this.onDocKeyDownCapture, true);
@@ -258,8 +268,10 @@ export class TopNavItem {
         }
     }
     getNavDropdownBroadcastRoot() {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = this.el.closest('xpl-top-nav-menu')) !== null && _a !== void 0 ? _a : this.el.closest('xpl-nav-header-menu')) !== null && _b !== void 0 ? _b : this.el.closest('xpl-top-nav')) !== null && _c !== void 0 ? _c : this.el.ownerDocument);
+        return (this.el.closest('xpl-top-nav-menu') ??
+            this.el.closest('xpl-nav-header-menu') ??
+            this.el.closest('xpl-top-nav') ??
+            this.el.ownerDocument);
     }
     broadcastCloseOtherDropdownHosts() {
         const root = this.getNavDropdownBroadcastRoot();
@@ -271,16 +283,14 @@ export class TopNavItem {
         });
     }
     hoverModeActive() {
-        var _a, _b;
-        return this.openMode === 'hover' && ((_b = (_a = this.hoverOpenMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false);
+        return this.openMode === 'hover' && (this.hoverOpenMq?.matches ?? false);
     }
     focusTriggerAfterEscape() {
         this.timers.scheduleCoalesced(TIMER.focusTriggerAfterEscape, () => {
-            var _a;
             if (!this.el.isConnected) {
                 return;
             }
-            (_a = this.el.querySelector('.xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+            this.el.querySelector('.xpl-top-nav-item__inner')?.focus();
         });
     }
     static isInternalRenderedHostChild(el) {
@@ -289,9 +299,8 @@ export class TopNavItem {
     }
     hasNonDropdownLightDomChild() {
         return Array.from(this.el.childNodes).some((node) => {
-            var _a;
             if (node.nodeType === Node.TEXT_NODE) {
-                return Boolean((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+                return Boolean(node.textContent?.trim());
             }
             if (node.nodeType === Node.ELEMENT_NODE) {
                 const child = node;
@@ -305,15 +314,14 @@ export class TopNavItem {
         });
     }
     getInnerAriaLabel() {
-        var _a, _b, _c;
-        if ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())
+        if (this.label?.trim())
             return undefined;
         if (this.hasNonDropdownLightDomChild())
             return undefined;
-        const custom = (_b = this.itemAriaLabel) === null || _b === void 0 ? void 0 : _b.trim();
+        const custom = this.itemAriaLabel?.trim();
         if (custom)
             return custom;
-        if (((_c = this.icon) === null || _c === void 0 ? void 0 : _c.trim()) || this.isLeadingIconSlotPresent)
+        if (this.icon?.trim() || this.isLeadingIconSlotPresent)
             return 'Navigation item';
         return undefined;
     }
@@ -324,7 +332,7 @@ export class TopNavItem {
         if (el.getAttribute('slot') === 'right-aside-mobile')
             return false;
         const parent = el.parentElement;
-        if ((parent === null || parent === void 0 ? void 0 : parent.getAttribute('role')) === 'list')
+        if (parent?.getAttribute('role') === 'list')
             return true;
         if (parent != null && parent.tagName.toLowerCase() === 'xpl-nav-header-menu') {
             return true;
@@ -333,7 +341,7 @@ export class TopNavItem {
             return true;
         }
         if (el.getAttribute('slot') === 'left-aside' &&
-            (parent === null || parent === void 0 ? void 0 : parent.tagName.toLowerCase()) === 'xpl-top-nav' &&
+            parent?.tagName.toLowerCase() === 'xpl-top-nav' &&
             parent.querySelector('.xpl-top-nav__left-primary[role="list"]') != null) {
             return true;
         }
@@ -345,11 +353,10 @@ export class TopNavItem {
             this.hostListitemRole = next;
     }
     renderLabelContent() {
-        var _a;
         if (!this.label) {
             return h("slot", null);
         }
-        const description = (_a = this.description) === null || _a === void 0 ? void 0 : _a.trim();
+        const description = this.description?.trim();
         if (!description) {
             return (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label));
         }
@@ -369,7 +376,7 @@ export class TopNavItem {
             return (h("span", { class: "xpl-top-nav-item__trailing" }, h("slot", { name: "trailing-icon" })));
         }
         if (this.hasDropdown) {
-            return (h("span", { class: "xpl-top-nav-item__trailing" }, h("xpl-icon", { icon: "chevron-down" })));
+            return (h("span", { class: "xpl-top-nav-item__trailing" }, h("xpl-icon", { icon: this.isMobileViewport ? 'chevron-right' : 'chevron-down' })));
         }
         return null;
     }
@@ -378,15 +385,25 @@ export class TopNavItem {
         const ariaCurrent = this.selected ? 'page' : undefined;
         const ariaExpanded = this.hasDropdown ? (this.open ? 'true' : 'false') : undefined;
         const ariaLabel = this.getInnerAriaLabel();
-        const shared = Object.assign(Object.assign({ class: 'xpl-top-nav-item__inner', tabIndex, 'aria-current': ariaCurrent, 'aria-expanded': ariaExpanded, 'aria-haspopup': this.hasDropdown ? 'true' : undefined, 'aria-controls': this.hasDropdown ? this.dropdownPanelId : undefined }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), { onClick: this.handleClick, onKeyDown: this.handleKeyDown });
+        const shared = {
+            class: 'xpl-top-nav-item__inner',
+            tabIndex,
+            'aria-current': ariaCurrent,
+            'aria-expanded': ariaExpanded,
+            'aria-haspopup': this.hasDropdown ? 'true' : undefined,
+            'aria-controls': this.hasDropdown ? this.dropdownPanelId : undefined,
+            ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+            onClick: this.handleClick,
+            onKeyDown: this.handleKeyDown,
+        };
         const useAnchor = this.href != null && !this.hasDropdown;
         if (useAnchor) {
-            return (h("a", Object.assign({}, shared, { href: this.href }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+            return (h("a", { ...shared, href: this.href }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
         }
-        return (h("button", Object.assign({}, shared, { type: "button" }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+        return (h("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
     }
     render() {
-        return (h(Host, Object.assign({ key: '5de7a361dd1f3e0aaa3f98ebb8013118cb5c1a22', class: {
+        return (h(Host, { key: 'e1e7241e6b6f2d9d96c779b91b7fa1ba20e8e1f4', class: {
                 'xpl-top-nav-item': true,
                 'xpl-top-nav-item--active': this.active,
                 'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
@@ -394,7 +411,7 @@ export class TopNavItem {
                 'xpl-top-nav-item--has-dropdown': this.hasDropdown,
                 'xpl-top-nav-item--selected': this.selected,
                 dark: true,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: 'e076a46dab0d877fdac2eadf09c1fa1bdc97b9bd', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '3a6c88fe606672b09b45bb5d8a22d05b26e84e30', name: "dropdown" })))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (h("div", { key: 'ec1ed04f166670f78c205ba351911672a147d5a7', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '01d3db348a018c43f21b24acad80e7687f8bb0e1', name: "dropdown" })))));
     }
     static get is() { return "xpl-top-nav-item"; }
     static get properties() {
@@ -582,6 +599,7 @@ export class TopNavItem {
             "hasActiveDescendant": {},
             "hasDropdown": {},
             "isLeadingIconSlotPresent": {},
+            "isMobileViewport": {},
             "hostListitemRole": {},
             "isTrailingIconSlotPresent": {}
         };

package/dist/collection/components/xpl-top-nav/xpl-top-nav-menu/xpl-top-nav-menu.js

@@ -1,26 +1,24 @@
 import { Host, h } from "@stencil/core";
-import { TimerManager } from "../../../utils/lifecycle";
+import { TimerManager, isBrowser } from "../../../utils/lifecycle";
 import { TOP_NAV_MOBILE_MQ } from "../top-nav-constants";
 export class TopNavMenu {
     constructor() {
         this.timers = new TimerManager();
         this.isMobileCascade = false;
         this.onViewportChange = () => {
-            var _a, _b;
-            this.isMobileCascade = (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+            this.isMobileCascade = this.mobileMq?.matches ?? false;
         };
         this.handleBackClick = async () => {
-            var _a;
             const parent = this.el.closest('xpl-top-nav-item');
             if (!parent) {
                 return;
             }
             await parent.closeMenu();
-            (_a = parent.querySelector('.xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+            parent.querySelector('.xpl-top-nav-item__inner')?.focus();
         };
     }
     connectedCallback() {
-        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
             this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
             this.mobileMq.addEventListener('change', this.onViewportChange);
             this.isMobileCascade = this.mobileMq.matches;
@@ -28,9 +26,8 @@ export class TopNavMenu {
         this.connectParentOpenObserver();
     }
     disconnectedCallback() {
-        var _a;
         this.timers.dispose();
-        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
         this.mobileMq = undefined;
         this.disconnectParentOpenObserver();
     }
@@ -49,8 +46,7 @@ export class TopNavMenu {
         });
     }
     disconnectParentOpenObserver() {
-        var _a;
-        (_a = this.parentOpenObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentOpenObserver?.disconnect();
         this.parentOpenObserver = undefined;
     }
     scheduleParentOpenCheck() {
@@ -62,29 +58,28 @@ export class TopNavMenu {
         });
     }
     focusBackRowIfJustOpenedOnMobile() {
-        var _a;
         if (!this.isMobileCascade) {
             return;
         }
         const parent = this.el.parentElement;
-        if (!(parent === null || parent === void 0 ? void 0 : parent.classList.contains('xpl-top-nav-item--dropdown-open'))) {
+        if (!parent?.classList.contains('xpl-top-nav-item--dropdown-open')) {
             return;
         }
-        (_a = this.el
-            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+        this.el
+            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')
+            ?.focus();
     }
     renderBackRow() {
-        var _a;
-        if (!this.isMobileCascade || !((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())) {
+        if (!this.isMobileCascade || !this.label?.trim()) {
             return null;
         }
         return (h("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, h("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
     }
     render() {
-        return (h(Host, { key: '314c42b389883edceb333473d9bb97776e1f18de', class: {
+        return (h(Host, { key: 'e71631c4d9d4b653247d13c7b182f722bf1e52cc', class: {
                 'xpl-top-nav-menu': true,
                 dark: true,
-            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), h("slot", { key: 'a6b4e2c916ccc9c0cc1d5e7e6d03b2ad6032f7ac' })));
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), h("slot", { key: 'c6e38f4f78ab65dad030076aebf97c40dbce651b' })));
     }
     static get is() { return "xpl-top-nav-menu"; }
     static get properties() {