@xplortech/apollo-core 2.10.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)',
@@ -99,12 +100,17 @@ const TOP_NAV_STORY_CSS = `
 }
 .sb-top-nav-html-item-inner {
   padding: var(--xpl-space-8);
+  font: inherit;
   font-size: var(--xpl-font-size-body);
+  border: 0;
   border-radius: var(--xpl-border-radius-small);
+  appearance: none;
+  background: transparent;
   display: flex;
   align-items: center;
   gap: var(--xpl-space-8);
   cursor: pointer;
+  text-align: inherit;
   text-decoration: none;
   color: inherit;
 }
@@ -134,7 +140,10 @@ const TOP_NAV_STORY_CSS = `
   border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
 }
 .sb-top-nav-menu-profile-inner { width: 100%; min-width: 0; }
-.sb-top-nav-menu-username { font-weight: var(--xpl-font-weight-medium); }
+.sb-top-nav-menu-username {
+  font-weight: var(--xpl-font-weight-medium);
+  color: var(--xpl-text-strong);
+}
 .sb-top-nav-menu-email {
   font-size: var(--xpl-font-size-caption);
   color: var(--xpl-text-subdued);
@@ -147,7 +156,7 @@ const TOP_NAV_STORY_CSS = `
   align-items: center;
   gap: var(--xpl-space-8);
   padding: var(--xpl-space-8) var(--xpl-space-16);
-  color: inherit;
+  color: var(--xpl-text-default);
   text-decoration: none;
 }
 .sb-top-nav-menu-right-aside-mobile {
@@ -162,7 +171,7 @@ const TOP_NAV_STORY_CSS = `
   align-items: center;
   gap: var(--xpl-space-8);
   padding: var(--xpl-space-10) var(--xpl-space-12);
-  color: inherit;
+  color: var(--xpl-text-default);
   text-decoration: none;
 }
 `.trim();
@@ -177,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) {
@@ -200,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();
 }
@@ -226,7 +233,9 @@ const TOP_NAV_FIGMA_DESIGN = {
     url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=36021-13064&p=f&t=zPkMI4H5nK5XE3ZU-11',
 };
 const topNavFamilyDocsDescription = [
-    'Horizontal top bar (`xpl-top-nav`), nav items (`xpl-top-nav-item`), and profile header (`xpl-nav-header-menu`). **`xpl-top-nav`** supports **`brand-name`**, **`brand-href`**, **`brand-logo`** (image URL), and **`slot="brand-logo"`** for the built-in brand row; **`slot="left-aside"`** holds primary links; **`slot="right-aside"`** then **`slot="user-menu"`**; on narrow viewports (**one pixel below Tailwind `md`** — **`max-width: 767px`** with default **`screens.md`**) **`right-aside`** is hidden in the bar — duplicate those actions into **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`**. The account region uses an **internal** **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): set **`child-account-label`** for the built-in trigger label beside **`chevron-down`**, put the panel in **`slot="user-menu"`**, or use **`slot="user-menu-trigger"`** to replace the built-in trigger. Use **Top Navigation** Controls for props + **Actions** for **`navOpen`** / **`brandClick`**. With **`nav-control`**, the hamburger is visible only on those narrow widths (CSS **`top-nav.css`**). **`brandClick`** fires when the built-in brand is activated and **`brand-href`** is **not** set.',
+    'Horizontal top bar (`xpl-top-nav`), nav items (`xpl-top-nav-item`), grouping container (`xpl-top-nav-menu`), and profile header (`xpl-nav-header-menu`). **`xpl-top-nav`** supports **`brand-name`**, **`brand-href`**, **`brand-logo`** (image URL), and **`slot="brand-logo"`** for the built-in brand row; **`slot="left-aside"`** holds primary links; **`slot="right-aside"`** then **`slot="user-menu"`**; on narrow viewports (**one pixel below Tailwind `md`** — **`max-width: 767px`** with default **`screens.md`**) **`right-aside`** is hidden in the bar — duplicate those actions into **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`**. The account region uses an **internal** **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): set **`child-account-label`** for the built-in trigger label beside **`chevron-down`**, put the panel in **`slot="user-menu"`**, or use **`slot="user-menu-trigger"`** to replace the built-in trigger. Use **Top Navigation** Controls for props + **Actions** for **`navOpen`** / **`brandClick`**. With **`nav-control`**, the hamburger is visible only on those narrow widths (CSS **`top-nav.css`**). **`brandClick`** fires when the built-in brand is activated and **`brand-href`** is **not** set.',
+    '',
+    'Group a parent nav item\'s children with **`xpl-top-nav-menu`** in its **`slot="dropdown"`**: on desktop it opens as a flyout under the parent; on narrow viewports the **same markup** drives a mobile cascade — the drawer swaps its top-level list for the group\'s rows in place (auto back row + `chevron-left`, no second panel). See the **`TopNavItem`** story\'s **`showDropdown`** control, or the grouped "Xplor Ops" item in this story\'s Controls, and switch **`previewViewport`** to a narrow preset to try the cascade.',
     '',
     '**Storybook:** These stories wrap the canvas in Foundation **`dark`** so previews match the components’ dark palette. The manager **moon** toggle targets the addon store and may still look “light” in the chrome; the preview area uses dark tokens regardless.',
     '',
@@ -237,12 +246,18 @@ const topNavFamilyDocsDescription = [
     '| **`xpl-top-nav`** | `navOpen` | Mobile menu toggled via control, or drawer closed with **Escape** (`nav-control` must be set). | `boolean` — `true` when open, `false` when closed. |',
     '| **`xpl-top-nav`** | `brandClick` | Built-in brand is activated (click or keyboard) and **`brand-href`** is unset. | `MouseEvent` — same as **`navItemClick`** on the internal brand **`xpl-top-nav-item`**. |',
     '| **`xpl-top-nav-item`** | `navItemClick` | User activates a plain item (click or Enter/Space). Not emitted for dropdown items (`slot="dropdown"`) or for internal chevron-only toggles. | `MouseEvent` (the original click). |',
+    '| **`xpl-top-nav-item`** | `openChange` | `open` changes (click, hover, keyboard, Escape, outside click, or programmatic). | `boolean` — new open state. |',
     '| **`xpl-nav-header-menu`** | — | No custom events. | — |',
+    '| **`xpl-top-nav-menu`** | — | No custom events — the back row calls `closeMenu()` on the parent trigger directly. | — |',
 ].join('\n');
 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: {
@@ -293,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}"` : '',
@@ -314,15 +329,28 @@ export const TopNavigation = (args) => {
     const rightAsideMobileBlock = `
             <xpl-top-nav-item slot="right-aside-mobile" label="Inbox" icon="message-writing"></xpl-top-nav-item>
         `;
+    const groupedNavItem = `
+    <xpl-top-nav-item slot="left-aside" label="Xplor Ops" open-mode="hover">
+        <xpl-top-nav-menu slot="dropdown" label="Xplor Ops">
+            <xpl-top-nav-item label="Payroll" href="#"></xpl-top-nav-item>
+            <xpl-top-nav-item label="Capital" href="#">
+                <xpl-icon slot="trailing-icon" icon="open-rect-arrow-out"></xpl-icon>
+            </xpl-top-nav-item>
+        </xpl-top-nav-menu>
+    </xpl-top-nav-item>`;
     return `
 <xpl-top-nav${navControlAttr}${labelAttr}${childAccountAttr}${brandAttr}>
 ${brandLogoSlot}
     <xpl-top-nav-item slot="left-aside" label="Home" selected></xpl-top-nav-item>
     <xpl-top-nav-item slot="left-aside" label="Dashboard"></xpl-top-nav-item>
-    <xpl-top-nav-item slot="left-aside" label="Settings"></xpl-top-nav-item>${rightAsideBlock}
+    <xpl-top-nav-item slot="left-aside" label="Settings"></xpl-top-nav-item>${groupedNavItem}${rightAsideBlock}
     <xpl-nav-header-menu slot="user-menu" ${navHeaderMenuAttrs}>${rightAsideMobileBlock}
         <xpl-top-nav-item label="View Account" icon="house-4" selected></xpl-top-nav-item>
-        <xpl-top-nav-item label="Change Account" icon="refresh"></xpl-top-nav-item>
+        <xpl-top-nav-item
+            label="Change Account"
+            icon="refresh"
+            description="Acme Corp — Downtown Location"
+        ></xpl-top-nav-item>
         <xpl-top-nav-item label="Logout" icon="open-rect-arrow-out"></xpl-top-nav-item>
     </xpl-nav-header-menu>
 </xpl-top-nav>
@@ -441,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),
@@ -456,24 +487,38 @@ export const TopNavItem = (args) => {
         args.href != null && args.href !== '' ? `href="${escapeAttr(args.href)}"` : '',
         args.label != null && args.label !== '' ? `label="${escapeAttr(args.label)}"` : '',
         args.icon != null && args.icon !== '' ? `icon="${escapeAttr(args.icon)}"` : '',
+        args.description != null && args.description !== ''
+            ? `description="${escapeAttr(args.description)}"`
+            : '',
         args.itemAriaLabel != null && args.itemAriaLabel !== ''
             ? `item-aria-label="${escapeAttr(args.itemAriaLabel)}"`
             : '',
+        args.openMode === 'hover' ? ' open-mode="hover"' : '',
         args.selected === true ? ' selected' : '',
     ]
         .filter(Boolean)
         .join(' ');
     const hasLabel = args.label != null && args.label !== '';
+    const trailingIconSlot = args.trailingIcon != null && args.trailingIcon !== ''
+        ? `\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(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>
+            </xpl-top-nav-item>
+        </xpl-top-nav-menu>`
+        : '';
     return `
 <div class="dark sb-top-nav-item-story-bar">
     <xpl-top-nav-item ${attrs.trim()}>
-${hasLabel ? '' : '        <span>Custom slot content</span>'}
+${hasLabel ? '' : '        <span>Custom slot content</span>'}${trailingIconSlot}${dropdownSlot}
     </xpl-top-nav-item>
 </div>
 `.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 !== '';
@@ -490,9 +535,9 @@ const HtmlTopNavItem = (args) => {
         .filter(Boolean)
         .join(' ');
     const innerTag = hasHref
-        ? `    <a href="${escapeAttr((_a = args.href) !== null && _a !== void 0 ? _a : '')}"${ariaCurrent} class="${innerClasses}">`
-        : `    <div role="button" tabindex="0"${ariaCurrent} class="${innerClasses}">`;
-    const innerClose = hasHref ? '    </a>' : '    </div>';
+        ? `    <a href="${escapeAttr(args.href ?? '')}"${ariaCurrent} class="${innerClasses}">`
+        : `    <button type="button"${ariaCurrent} class="${innerClasses}">`;
+    const innerClose = hasHref ? '    </a>' : '    </button>';
     const lines = [
         '<div class="dark sb-top-nav-item-story-bar">',
         '  <div role="listitem">',
@@ -508,6 +553,8 @@ TopNavItem.args = {
     href: '',
     label: 'Nav item',
     selected: false,
+    openMode: 'click',
+    showDropdown: false,
 };
 TopNavItem.argTypes = {
     active: {
@@ -516,7 +563,7 @@ TopNavItem.argTypes = {
     },
     href: {
         control: 'text',
-        description: 'When set, the item renders as a native `<a>` link instead of a `div[role="button"]`. Use `#` for in-page demo. Clear to switch back to button mode.',
+        description: 'When set, the item renders as a native `<a>` link instead of a native `<button>`. Use `#` for in-page demo. Clear to switch back to button mode.',
     },
     label: {
         control: 'text',
@@ -524,21 +571,45 @@ TopNavItem.argTypes = {
     },
     icon: {
         control: 'text',
-        description: 'Icon name from the Apollo icon set to display before the label (e.g. house-4, wrench). Empty = no icon.',
+        description: 'Icon name from the Apollo icon set for `slot="leading-icon"`\'s fallback (e.g. house-4, wrench). Empty = no icon. Ignored when `slot="leading-icon"` content is present.',
+    },
+    description: {
+        control: 'text',
+        description: 'Optional second line below `label` (row context — e.g. inside `xpl-nav-header-menu`). Empty = single-line row.',
+    },
+    trailingIcon: {
+        control: 'text',
+        description: 'Storybook-only: demos `slot="trailing-icon"` with the given icon name (e.g. `open-rect-arrow-out` for "opens in new window"). When `showDropdown` is also on, this replaces the auto `chevron-down`.',
+        table: { category: 'Storybook' },
     },
     itemAriaLabel: {
         control: 'text',
         description: 'Maps to `item-aria-label`: accessible name for icon-only items (no label / default-slot text).',
     },
+    openMode: {
+        control: 'select',
+        options: ['click', 'hover'],
+        description: 'How `slot="dropdown"` opens. `hover` only activates on hover-capable, fine-pointer, `md`-and-up devices (falls back to click/tap otherwise); Enter/Space always toggles regardless. Requires `showDropdown`.',
+    },
     selected: {
         control: 'boolean',
         description: 'Whether the item is selected. Sets aria-current="page" and selected styling.',
     },
+    showDropdown: {
+        control: 'boolean',
+        description: 'Storybook-only: demos this item as a dropdown trigger with `slot="dropdown"` content (auto chevron, `open` state, `openMode`).',
+        table: { category: 'Storybook' },
+    },
     navItemClick: {
         control: false,
         description: '**Event** (not a prop): `navItemClick` — `CustomEvent<MouseEvent>`; `detail` is the originating click. Not emitted when `slot="dropdown"` is used.',
         table: { category: 'Events' },
     },
+    openChange: {
+        control: false,
+        description: '**Event** (not a prop): `openChange` — `CustomEvent<boolean>`; fires whenever `open` changes (click, hover, keyboard, Escape, outside click, or programmatic).',
+        table: { category: 'Events' },
+    },
 };
 TopNavItem.parameters = {
     layout: 'centered',
@@ -550,6 +621,63 @@ TopNavItem.parameters = {
         render: HtmlTopNavItem(TopNavItem.args),
     },
 };
+export const TopNavMenuGroup = (args) => {
+    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
+    return `
+<div class="dark sb-top-nav-menu-shell--min">
+    <xpl-top-nav-menu label="${escapeAttr(label)}">
+        <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>
+        </xpl-top-nav-item>
+        <xpl-top-nav-item label="Xplor Ops Home" description="xplorops.com" href="#"></xpl-top-nav-item>
+    </xpl-top-nav-menu>
+</div>
+`.trim();
+};
+const HtmlTopNavMenuGroup = (args) => {
+    const label = args.label != null && args.label !== '' ? args.label : 'Xplor Ops';
+    return [
+        '<div class="dark sb-top-nav-menu-shell--min">',
+        `  <div role="list" aria-label="${escapeAttr(label)}" class="sb-top-nav-menu-list">`,
+        '    <a href="#">Payroll</a>',
+        '    <a href="#">Capital</a>',
+        '    <a href="#">Xplor Ops Home</a>',
+        '  </div>',
+        '</div>',
+    ].join('\n');
+};
+TopNavMenuGroup.storyName = 'Nav Menu (grouping container)';
+TopNavMenuGroup.args = {
+    label: 'Xplor Ops',
+};
+TopNavMenuGroup.argTypes = {
+    label: {
+        control: 'text',
+        description: 'Accessible name for the list (`aria-label`) and, on small screens, the mobile cascade back-row label for this group.',
+    },
+};
+TopNavMenuGroup.parameters = {
+    layout: 'centered',
+    design: TOP_NAV_FIGMA_DESIGN,
+    docs: {
+        description: {
+            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': {
+        render: TopNavMenuGroup(TopNavMenuGroup.args),
+    },
+    html: {
+        render: HtmlTopNavMenuGroup(TopNavMenuGroup.args),
+    },
+};
 export const TopNavMenu = (args) => {
     const attrs = [
         args.username != null && args.username !== ''
@@ -594,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',
@@ -616,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: '605d14e70deb43e79834d39cb3a078b3298e853a', 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: '4d7f4ffc4d0391fb3b20db6be3a1c32126f02dfe', class: "xpl-nav-header-menu__profile" }, h("div", { key: 'f79f233a7dd322329b4f571b6858d5f6954eb972', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '5672342ae08198b52525ca2fe75d0d489e678c6b', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: '90f13a468d30f939b3e99f932dc96746d99c4196', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: '70ae77baf3570e700639e7d8d387c5e4df7739c4', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'e9e1170bc8648f3676e083c7aa5c03d16e09b2ed', name: "right-aside-mobile" })), h("div", { key: '225c538dc72259da900406eb3fc6f222f93292e1', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '7631ce2ee1e6acdf4fdc9d54671e186de597de63' }))));
+            } }, 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/top-nav-item-constants.js

@@ -0,0 +1,2 @@
+export const TOP_NAV_ITEM_HOVER_OPEN_MQ = '(hover: hover) and (pointer: fine) and (min-width: 768px)';
+export const TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS = 150;