@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -1,9 +1,28 @@
 import { Host, h, } from "@stencil/core";
+import { hasHostNamedSlot } from "../../utils/light-dom-slots";
+import { isBrowser } from "../../utils/lifecycle";
+const TOP_NAV_BRAND_LOGO_SLOT_REGIONS = [
+    '.xpl-top-nav__brand-logo-slot',
+    '.xpl-top-nav__brand-bar',
+];
+const TOP_NAV_USER_MENU_PANEL_REGION = '.xpl-top-nav__user-menu-panel';
+const TOP_NAV_USER_MENU_SLOT_REGIONS = [
+    TOP_NAV_USER_MENU_PANEL_REGION,
+    '.xpl-top-nav__user-menu-stash',
+];
+const TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS = [
+    '.xpl-top-nav__user-popover',
+    '.xpl-top-nav__user-menu-stash',
+    '.xpl-top-nav__right-user',
+];
+const TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS = [TOP_NAV_USER_MENU_PANEL_REGION];
 export class TopNav {
     constructor() {
+        this.slotProjectionDirty = false;
         this.userPopoverDrawerSyncHost = null;
         this.brandLogoSlotPresent = false;
         this.open = false;
+        this.slotProjectionNonce = 0;
         this.userMenuSlotPresent = false;
         this.userMenuTriggerSlotPresent = false;
         this.focusNavControlAfterClose = () => {
@@ -11,9 +30,8 @@ export class TopNav {
                 clearTimeout(this.navControlFocusTimeoutId);
             }
             this.navControlFocusTimeoutId = setTimeout(() => {
-                var _a;
                 this.navControlFocusTimeoutId = undefined;
-                (_a = this.el.querySelector('.xpl-top-nav__nav-control')) === null || _a === void 0 ? void 0 : _a.focus();
+                this.el.querySelector('.xpl-top-nav__nav-control')?.focus();
             }, 0);
         };
         this.handleUserPopoverIsOpenChange = (e) => {
@@ -44,6 +62,24 @@ export class TopNav {
             this.navOpen.emit(false);
             this.focusNavControlAfterClose();
         };
+        this.onDocClickOutsideDismiss = (e) => {
+            if (!this.navControl || !this.open) {
+                return;
+            }
+            const target = e.target;
+            if (target == null || this.anyDescendantPopoverIsOpen()) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__left-primary')?.contains(target)) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__nav-control')?.contains(target)) {
+                return;
+            }
+            this.open = false;
+            this.resetMobileCascade();
+            this.navOpen.emit(false);
+        };
         this.onNavToggle = () => {
             const wasOpen = this.open;
             this.open = !this.open;
@@ -59,19 +95,29 @@ export class TopNav {
                 return;
             }
             const inner = host.querySelector('.xpl-popover');
-            if (inner === null || inner === void 0 ? void 0 : inner.classList.contains('xpl-popover--is-open')) {
+            if (inner?.classList.contains('xpl-popover--is-open')) {
                 this.closeMobileDrawerWhenAccountMenuOpens();
             }
         };
         this.syncBrandLogoSlot = () => {
-            const next = this.el.querySelector('[slot="brand-logo"]') != null;
+            const next = hasHostNamedSlot(this.el, 'brand-logo', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_BRAND_LOGO_SLOT_REGIONS,
+            });
             if (next !== this.brandLogoSlotPresent) {
                 this.brandLogoSlotPresent = next;
             }
         };
         this.syncUserMenuSlots = () => {
-            const panel = this.el.querySelector('[slot="user-menu"]') != null;
-            const triggerSlot = this.el.querySelector('[slot="user-menu-trigger"]') != null;
+            const panel = hasHostNamedSlot(this.el, 'user-menu', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_SLOT_REGIONS,
+            });
+            const triggerSlot = hasHostNamedSlot(this.el, 'user-menu-trigger', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS,
+                excludedRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS,
+            });
             if (panel !== this.userMenuSlotPresent) {
                 this.userMenuSlotPresent = panel;
             }
@@ -82,14 +128,15 @@ export class TopNav {
     }
     onNavControlChanged() {
         this.syncOpenFromNavControl();
-        this.syncDocEscapeListener();
+        this.syncDocDismissListeners();
     }
     connectedCallback() {
         this.syncOpenFromNavControl();
-        this.syncDocEscapeListener();
+        this.syncDocDismissListeners();
         this.syncBrandLogoSlot();
         this.syncUserMenuSlots();
         this.connectSlotContentObserver();
+        this.flushPendingSlotProjection();
     }
     disconnectedCallback() {
         if (this.navControlFocusTimeoutId !== undefined) {
@@ -100,7 +147,7 @@ export class TopNav {
             clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
             this.deferredSlotContentObserverSyncTimeoutId = undefined;
         }
-        this.removeDocEscapeListener();
+        this.removeDocDismissListeners();
         this.disconnectSlotContentObserver();
         this.disconnectUserPopoverDrawerSync();
     }
@@ -117,13 +164,11 @@ export class TopNav {
         this.connectUserPopoverDrawerSync();
     }
     get childAccountLabelText() {
-        var _a, _b;
-        return (_b = (_a = this.childAccountLabel) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+        return this.childAccountLabel?.trim() ?? '';
     }
     get hasBrand() {
-        var _a, _b, _c, _d;
-        const name = (_b = (_a = this.brandName) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
-        const logo = (_d = (_c = this.brandLogo) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+        const name = this.brandName?.trim() ?? '';
+        const logo = this.brandLogo?.trim() ?? '';
         return name.length > 0 || logo.length > 0 || this.brandLogoSlotPresent;
     }
     get hasUserMenu() {
@@ -139,7 +184,7 @@ export class TopNav {
         const hosts = this.el.querySelectorAll('xpl-popover');
         for (let i = 0; i < hosts.length; i += 1) {
             const inner = hosts[i].querySelector('.xpl-popover');
-            if (inner === null || inner === void 0 ? void 0 : inner.classList.contains('xpl-popover--is-open')) {
+            if (inner?.classList.contains('xpl-popover--is-open')) {
                 return true;
             }
         }
@@ -157,8 +202,8 @@ export class TopNav {
         if (typeof MutationObserver === 'undefined') {
             return;
         }
-        this.slotContentObserver = new MutationObserver(() => {
-            this.scheduleSlotContentSyncFromObserver();
+        this.slotContentObserver = new MutationObserver((mutations) => {
+            this.scheduleSlotContentSyncFromObserver(mutations);
         });
         this.slotContentObserver.observe(this.el, {
             childList: true,
@@ -193,27 +238,30 @@ export class TopNav {
         }
     }
     disconnectSlotContentObserver() {
-        var _a;
-        (_a = this.slotContentObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.slotContentObserver?.disconnect();
         this.slotContentObserver = undefined;
     }
     disconnectUserPopoverDrawerSync() {
-        var _a;
         if (this.userPopoverDrawerSyncHost) {
             this.userPopoverDrawerSyncHost.removeEventListener('isOpenChange', this.handleUserPopoverIsOpenChange);
             this.userPopoverDrawerSyncHost = null;
         }
-        (_a = this.userPopoverDrawerOpenObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.userPopoverDrawerOpenObserver?.disconnect();
         this.userPopoverDrawerOpenObserver = undefined;
     }
-    removeDocEscapeListener() {
-        this.el.ownerDocument.removeEventListener('keydown', this.onDocKeyDownEscape, false);
+    removeDocDismissListeners() {
+        const doc = this.el.ownerDocument;
+        doc.removeEventListener('keydown', this.onDocKeyDownEscape, false);
+        doc.removeEventListener('click', this.onDocClickOutsideDismiss, true);
     }
     resetMobileCascade() {
         const openItem = this.el.querySelector('.xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open');
-        openItem === null || openItem === void 0 ? void 0 : openItem.closeMenu().catch(() => undefined);
+        openItem?.closeMenu().catch(() => undefined);
     }
-    scheduleSlotContentSyncFromObserver() {
+    scheduleSlotContentSyncFromObserver(mutations) {
+        if (this.mutationsAffectHostSlotting(mutations)) {
+            this.slotProjectionDirty = true;
+        }
         if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
             clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
         }
@@ -224,12 +272,26 @@ export class TopNav {
             }
             this.syncBrandLogoSlot();
             this.syncUserMenuSlots();
+            this.flushPendingSlotProjection();
         }, 0);
     }
-    syncDocEscapeListener() {
-        this.removeDocEscapeListener();
+    flushPendingSlotProjection() {
+        if (this.slotProjectionDirty) {
+            this.slotProjectionDirty = false;
+            this.slotProjectionNonce += 1;
+        }
+    }
+    mutationsAffectHostSlotting(mutations) {
+        return mutations.some((m) => m.type === 'attributes' || (m.type === 'childList' && m.target === this.el));
+    }
+    syncDocDismissListeners() {
+        this.removeDocDismissListeners();
+        if (!isBrowser())
+            return;
         if (this.navControl) {
-            this.el.ownerDocument.addEventListener('keydown', this.onDocKeyDownEscape, false);
+            const doc = this.el.ownerDocument;
+            doc.addEventListener('keydown', this.onDocKeyDownEscape, false);
+            doc.addEventListener('click', this.onDocClickOutsideDismiss, true);
         }
     }
     syncOpenFromNavControl() {
@@ -241,8 +303,7 @@ export class TopNav {
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: 'a1556bcc2dfc2d35b9b9540a3f0e0d162d547923', class: {
+        return (h(Host, { key: '8f9f8e171b2b04706360048965e8e8a40f3f7013', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -250,15 +311,15 @@ export class TopNav {
                 'xpl-top-nav--has-brand': this.hasBrand,
                 'xpl-top-nav--has-user-menu': this.hasUserMenu,
                 dark: true,
-            } }, h("nav", { key: '5531a9157af00cbd8b8d5459801ae00337c5e4ec', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: '5257bb97f7c388358820ae85e872644666538304', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '8e8acb60ee8cac9bf84bb559444fbdcfcee13a10', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, h("xpl-icon", { key: '7bafdf086e9df7d4a2333ea9d2fed86de8466912', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (h("div", { key: '39fc108bfb4b30a98bc06ca8d12331527708d3ef', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: '7c951eb3c0e349170bb017f6e1d375f3b328653f', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
+            } }, h("nav", { key: '2c05b69b2918753c4f928e53d92c6ca737a92b59', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: '1dd5722748946d0adfad6cc40da03c21012d65b2', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '810e68f589ec13b942a78c877fea816407c05287', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, h("xpl-icon", { key: '550653cbd1d61c7b80a31ab48dce59936a107128', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (h("div", { key: '6509a9a42b693b925204a9a42a34c0071d73f485', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: '623cfb95bd0a6581a057ddf37aa3920ee58b5734', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
                 ? this.brandName.trim()
-                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: '16fa404db5c59741ec4a4c8c92c6f43f7502e906', class: {
+                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: '61d8a6d485380c39ffa74cd8cfbea37df32060dd', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-left': true,
-            } }, h("div", { key: 'd5421d83454aadb4252cc244b24c9d3bf9881c69', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'c95fcd2f6365dbc03ee4e4e99db15e3460fd5358', name: "left-aside" })))), h("div", { key: 'fa5afd226b5eed1468ef066fba956852f7f0d65d', class: {
+            } }, h("div", { key: '3aab27091f543a9c6a813043883c218791cfaa4a', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: '93ff48c9bb3e0fa00b23a707da84d222ad74224d', name: "left-aside" })))), h("div", { key: 'd92afdae9ac68d49a370fb41b39aeef2b956af1f', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-right': true,
-            } }, h("div", { key: 'd84a6fc492147429d725b49681637a203fc36c35', class: "xpl-nav-right__list" }, h("div", { key: '63ef2b0eddef28da05d172bb05b2edd64ad173dd', class: "xpl-top-nav__right-rail" }, h("div", { key: '3ead1c8076e1ed51283ec6251c4ed252835457e3', class: "xpl-top-nav__right-lead" }, h("slot", { key: '8076be6d9d726a2b380f41077d114b37cdfe15e9', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
+            } }, h("div", { key: '36fadad47ed2862f88c1f42e1b95530d2e06b046', class: "xpl-nav-right__list" }, h("div", { key: '5b35413cbfcc5fd9af1e491f1a1f14d41ae35c0d', class: "xpl-top-nav__right-rail" }, h("div", { key: '37d00bfe95cdf35345ed9ec273a159255efc31a2', class: "xpl-top-nav__right-lead" }, h("slot", { key: 'b64f92c5886ef929b51fde06d48ea1fbf3660d44', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
                 ? undefined
                 : 'Open account menu' }, this.childAccountLabelText.length > 0
             ? this.childAccountLabelText
@@ -387,6 +448,7 @@ export class TopNav {
         return {
             "brandLogoSlotPresent": {},
             "open": {},
+            "slotProjectionNonce": {},
             "userMenuSlotPresent": {},
             "userMenuTriggerSlotPresent": {}
         };

package/dist/collection/components/xpl-utility-bar/utility-bar.stories.js

@@ -1,5 +1,10 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
 export default {
     title: 'Components/Navigation/Utility Bar',
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
     argTypes: {
         mainSlot: {
             type: { name: 'string', required: false },
@@ -9,7 +14,7 @@ export default {
         },
     },
 };
-const Story = ({ mainSlot, asideSlot }) => `
+const renderUtilityBar = ({ mainSlot, asideSlot }) => `
     <div style="width: 85vw;">
         <xpl-utility-bar>
             <ul slot="main">
@@ -28,10 +33,9 @@ const setAsideSlot = (isMobile) => `
     <li>
         <xpl-button
             type="submit"
-            variant="outline"
             ${isMobile ? 'icon-only' : 'icon-leading'}
-            icon="user-circle"
-            >Find Customer</xpl-button
+            icon="user"
+            >${isMobile ? '' : 'Find Customer'}</xpl-button
         >
     </li>
     <li>
@@ -69,19 +73,22 @@ const globalParams = (args) => ({
         `)(args),
     },
 });
-export const UtilityBarMobile = Story.bind({});
+export const UtilityBarMobile = (args) => renderUtilityBar(args);
 UtilityBarMobile.args = {
     mainSlot: setMainSlot(),
     asideSlot: setAsideSlot(true),
 };
-UtilityBarMobile.parameters = Object.assign(Object.assign({}, globalParams(UtilityBarMobile.args)), { viewport: {
+UtilityBarMobile.parameters = {
+    ...globalParams(UtilityBarMobile.args),
+    viewport: {
         defaultViewport: 'iphone12',
-    } });
+    },
+};
 UtilityBarMobile.storyName = 'Mobile';
-export const UtilityBarDesktop = Story.bind({});
+export const UtilityBarDesktop = (args) => renderUtilityBar(args);
 UtilityBarDesktop.args = {
     mainSlot: setMainSlot(),
     asideSlot: setAsideSlot(false),
 };
-UtilityBarDesktop.parameters = Object.assign({}, globalParams(UtilityBarDesktop.args));
+UtilityBarDesktop.parameters = { ...globalParams(UtilityBarDesktop.args) };
 UtilityBarDesktop.storyName = 'Desktop';

package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js

@@ -11,7 +11,7 @@ export class UtilityBar {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (h(Host, { key: 'e990b6a7176fdb1d48fd1859f359f217a6600015' }, h("nav", { key: '3b331ed5294f208dcededae078659d9b0d7b118f', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: '444363c10471bd6206d39d2da37bafdae6291137', name: "main" }))));
+        return (h(Host, { key: '7ad1182d72a730df69cf714b665a6d02eac2e51a' }, h("nav", { key: 'f0d5ffc31cabc8a075cae2c1ebdaa0e82ca53943', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: 'dfbacf5921308bd6056b8e6d903b31df28613ce0', name: "main" }))));
     }
     static get is() { return "xpl-utility-bar"; }
     static get properties() {

package/dist/collection/utils/floating.js

@@ -0,0 +1,69 @@
+import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
+import { isBrowser } from "./lifecycle";
+export function getSide(placement) {
+    return placement.split('-')[0];
+}
+export function startFloating(reference, floating, options) {
+    if (!isBrowser()) {
+        return {
+            update: async () => { },
+            stop: () => { },
+        };
+    }
+    const { placement, strategy, middleware, onPosition, onReferenceHidden, onError } = options;
+    let generation = 0;
+    let cleanup = null;
+    let active = true;
+    const run = async () => {
+        if (!active) {
+            return;
+        }
+        const myGen = generation;
+        try {
+            const result = await computePosition(reference, floating, {
+                placement,
+                strategy,
+                middleware,
+            });
+            if (!active || myGen !== generation) {
+                return;
+            }
+            if (result.middlewareData.hide?.referenceHidden) {
+                if (onReferenceHidden?.() === true) {
+                    return;
+                }
+            }
+            onPosition(result);
+        }
+        catch (err) {
+            if (!active || myGen !== generation) {
+                return;
+            }
+            onError?.(err);
+        }
+    };
+    cleanup = autoUpdate(reference, floating, run);
+    return {
+        update: run,
+        stop: () => {
+            active = false;
+            generation += 1;
+            if (cleanup) {
+                cleanup();
+                cleanup = null;
+            }
+        },
+    };
+}
+const DEFAULT_DROPDOWN_OFFSET_PX = 4;
+export function dropdownMiddleware(opts) {
+    const { offsetPx = DEFAULT_DROPDOWN_OFFSET_PX, flipFallbackPlacements, sizeApply } = opts;
+    return [
+        offset(offsetPx),
+        flip(flipFallbackPlacements && flipFallbackPlacements.length > 0
+            ? { fallbackPlacements: flipFallbackPlacements }
+            : {}),
+        size({ apply: sizeApply }),
+        hide(),
+    ];
+}

package/dist/collection/utils/layout-ancestors.js

@@ -1,4 +1,8 @@
+import { isBrowser } from "./lifecycle";
 export function isInsideFixedPosition(element) {
+    if (!isBrowser()) {
+        return false;
+    }
     let el = element.parentElement;
     while (el && el !== document.body && el !== document.documentElement) {
         if (getComputedStyle(el).position === 'fixed') {
@@ -9,6 +13,9 @@ export function isInsideFixedPosition(element) {
     return false;
 }
 export function getNearestScrollableAncestor(element) {
+    if (!isBrowser()) {
+        return undefined;
+    }
     let el = element.parentElement;
     while (el && el !== document.body && el !== document.documentElement) {
         const style = getComputedStyle(el);

package/dist/collection/utils/lifecycle.js

@@ -64,34 +64,37 @@ export class TimerManager {
         this.coalesced.clear();
     }
 }
-export function waitForElement(selector, root = document, options) {
-    const existing = root.querySelector(selector);
+export function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+export function waitForElement(selector, root, options) {
+    if (!isBrowser()) {
+        return Promise.resolve(null);
+    }
+    const resolvedRoot = root ?? document;
+    const existing = resolvedRoot.querySelector(selector);
     if (existing) {
         return Promise.resolve(existing);
     }
     return new Promise((resolve) => {
-        var _a, _b;
-        if ((_a = options === null || options === void 0 ? void 0 : options.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+        if (options?.signal?.aborted) {
             resolve(null);
             return;
         }
         const observer = new MutationObserver(() => {
-            const el = root.querySelector(selector);
+            const el = resolvedRoot.querySelector(selector);
             if (el) {
                 observer.disconnect();
                 resolve(el);
             }
         });
-        observer.observe(root instanceof Node ? root : document, {
+        observer.observe(resolvedRoot instanceof Node ? resolvedRoot : document, {
             childList: true,
             subtree: true,
         });
-        (_b = options === null || options === void 0 ? void 0 : options.signal) === null || _b === void 0 ? void 0 : _b.addEventListener('abort', () => {
+        options?.signal?.addEventListener('abort', () => {
             observer.disconnect();
             resolve(null);
         }, { once: true });
     });
 }
-export function isBrowser() {
-    return typeof window !== 'undefined' && typeof document !== 'undefined';
-}

package/dist/collection/utils/light-dom-slots.js

@@ -0,0 +1,15 @@
+export function hasHostNamedSlot(host, slotName, { hostTag, projectionRegionSelectors, excludedRegionSelectors }) {
+    const slotSelector = `[slot="${slotName}"]`;
+    const isOwn = (node) => node.closest(hostTag) === host;
+    const projectsToNamedSlot = (node) => {
+        if (!isOwn(node))
+            return false;
+        if (node.parentElement === host)
+            return true;
+        if (excludedRegionSelectors?.some((selector) => node.closest(selector) !== null)) {
+            return false;
+        }
+        return projectionRegionSelectors.some((selector) => node.closest(selector) !== null);
+    };
+    return Array.from(host.querySelectorAll(slotSelector)).some(projectsToNamedSlot);
+}

package/dist/collection/utils/slot-presence.js

@@ -0,0 +1,6 @@
+export function hostHasNamedSlot(host, slotName) {
+    if (Array.from(host.children).some((child) => child.getAttribute('slot') === slotName)) {
+        return true;
+    }
+    return host.querySelector(`[slot="${slotName}"]`) != null;
+}

package/dist/collection/utils/ssr-known-mismatches.js

@@ -0,0 +1,50 @@
+export const SSR_KNOWN_MISMATCHES = [
+    {
+        tag: 'xpl-input-color',
+        field: 'eyeDropperSupported',
+        kind: 'feature-detection',
+        serverDefault: 'false',
+        reason: 'EyeDropper API availability is detected in componentDidLoad; the eye-dropper icon is omitted on SSR when unsupported.',
+        linearRef: 'XPL-1951',
+    },
+    {
+        tag: 'xpl-top-nav-menu',
+        field: 'isMobileCascade',
+        kind: 'viewport',
+        serverDefault: 'false',
+        reason: 'Synced from matchMedia(TOP_NAV_MOBILE_MQ) in connectedCallback; gates the mobile cascade back row.',
+        linearRef: 'XPL-1965',
+    },
+    {
+        tag: 'xpl-top-nav-item',
+        field: 'isMobileViewport',
+        kind: 'viewport',
+        serverDefault: 'false',
+        reason: 'Synced from matchMedia(TOP_NAV_MOBILE_MQ) in connectedCallback; switches auto trailing chevron between chevron-down and chevron-right.',
+        linearRef: 'XPL-1965',
+    },
+    {
+        tag: 'xpl-select',
+        field: 'visibleChoices',
+        kind: 'layout-measurement',
+        serverDefault: 'Infinity',
+        reason: 'Multi-select tag truncation is measured via canvas text metrics in requestAnimationFrame after mount; SSR renders all selected tags until the client computes the visible count.',
+        linearRef: 'XPL-1965',
+    },
+];
+export function ssrKnownMismatchKey(tag, field) {
+    return `${tag}::${field}`;
+}
+const SSR_KNOWN_MISMATCH_BY_KEY = new Map(SSR_KNOWN_MISMATCHES.map((entry) => [ssrKnownMismatchKey(entry.tag, entry.field), entry]));
+export function isSsrKnownMismatch(tag, field) {
+    return SSR_KNOWN_MISMATCH_BY_KEY.has(ssrKnownMismatchKey(tag, field));
+}
+export function getSsrKnownMismatch(tag, field) {
+    return SSR_KNOWN_MISMATCH_BY_KEY.get(ssrKnownMismatchKey(tag, field));
+}
+export function getSsrKnownMismatchesForTag(tag) {
+    return SSR_KNOWN_MISMATCHES.filter((entry) => entry.tag === tag);
+}
+export function getSsrKnownMismatchKeys() {
+    return SSR_KNOWN_MISMATCHES.map((entry) => ssrKnownMismatchKey(entry.tag, entry.field));
+}

package/dist/collection/utils/tab-a11y-ids.js

@@ -10,9 +10,8 @@ export function sanitizeForHtmlId(value) {
     return s;
 }
 export function getTabGroupInstanceId(hostEl) {
-    var _a;
     const root = hostEl.closest('xpl-tabs');
-    return (_a = root === null || root === void 0 ? void 0 : root.getAttribute('data-tabs-instance-id')) !== null && _a !== void 0 ? _a : 'xpl-tg-orphan';
+    return root?.getAttribute('data-tabs-instance-id') ?? 'xpl-tg-orphan';
 }
 export function tabTriggerId(groupInstanceId, target) {
     return `${groupInstanceId}-tab-${sanitizeForHtmlId(target)}`;

package/dist/components/index.d.ts

@@ -101,8 +101,12 @@ export { Select as XplSelect } from '../types/components/xpl-select/xpl-select';
 export { defineCustomElement as defineCustomElementXplSelect } from './xpl-select';
 export { SideNav as XplSideNav } from '../types/components/xpl-side-nav/xpl-side-nav';
 export { defineCustomElement as defineCustomElementXplSideNav } from './xpl-side-nav';
+export { SideNavHeaderItem as XplSideNavHeaderItem } from '../types/components/xpl-side-nav/xpl-side-nav-header-item/xpl-side-nav-header-item';
+export { defineCustomElement as defineCustomElementXplSideNavHeaderItem } from './xpl-side-nav-header-item';
 export { SideNavItem as XplSideNavItem } from '../types/components/xpl-side-nav/xpl-side-nav-item/xpl-side-nav-item';
 export { defineCustomElement as defineCustomElementXplSideNavItem } from './xpl-side-nav-item';
+export { SideNavSection as XplSideNavSection } from '../types/components/xpl-side-nav/xpl-side-nav-section/xpl-side-nav-section';
+export { defineCustomElement as defineCustomElementXplSideNavSection } from './xpl-side-nav-section';
 export { Skeleton as XplSkeleton } from '../types/components/xpl-skeleton/xpl-skeleton';
 export { defineCustomElement as defineCustomElementXplSkeleton } from './xpl-skeleton';
 export { Slideout as XplSlideout } from '../types/components/xpl-slideout/xpl-slideout';

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BT_Lq3Vd.js";export{XplAccordion,defineCustomElement as defineCustomElementXplAccordion}from"./xpl-accordion.js";export{XplApplicationShell,defineCustomElement as defineCustomElementXplApplicationShell}from"./xpl-application-shell.js";export{XplAvatar,defineCustomElement as defineCustomElementXplAvatar}from"./xpl-avatar.js";export{XplBackdrop,defineCustomElement as defineCustomElementXplBackdrop}from"./xpl-backdrop.js";export{XplBadge,defineCustomElement as defineCustomElementXplBadge}from"./xpl-badge.js";export{XplBanner,defineCustomElement as defineCustomElementXplBanner}from"./xpl-banner.js";export{XplBreadcrumbItem,defineCustomElement as defineCustomElementXplBreadcrumbItem}from"./xpl-breadcrumb-item.js";export{XplBreadcrumbs,defineCustomElement as defineCustomElementXplBreadcrumbs}from"./xpl-breadcrumbs.js";export{XplButton,defineCustomElement as defineCustomElementXplButton}from"./xpl-button.js";export{XplButtonRow,defineCustomElement as defineCustomElementXplButtonRow}from"./xpl-button-row.js";export{XplCalendar,defineCustomElement as defineCustomElementXplCalendar}from"./xpl-calendar.js";export{XplCheckbox,defineCustomElement as defineCustomElementXplCheckbox}from"./xpl-checkbox.js";export{XplChoicelist,defineCustomElement as defineCustomElementXplChoicelist}from"./xpl-choicelist.js";export{XplContentArea,defineCustomElement as defineCustomElementXplContentArea}from"./xpl-content-area.js";export{XplDashboard,defineCustomElement as defineCustomElementXplDashboard}from"./xpl-dashboard.js";export{XplDataCard,defineCustomElement as defineCustomElementXplDataCard}from"./xpl-data-card.js";export{XplDivider,defineCustomElement as defineCustomElementXplDivider}from"./xpl-divider.js";export{XplDropdown,defineCustomElement as defineCustomElementXplDropdown}from"./xpl-dropdown.js";export{XplDropdownGroup,defineCustomElement as defineCustomElementXplDropdownGroup}from"./xpl-dropdown-group.js";export{XplDropdownHeading,defineCustomElement as defineCustomElementXplDropdownHeading}from"./xpl-dropdown-heading.js";export{XplDropdownOption,defineCustomElement as defineCustomElementXplDropdownOption}from"./xpl-dropdown-option.js";export{XplDynamicTable,defineCustomElement as defineCustomElementXplDynamicTable}from"./xpl-dynamic-table.js";export{XplDynamicTableCell,defineCustomElement as defineCustomElementXplDynamicTableCell}from"./xpl-dynamic-table-cell.js";export{XplDynamicTableRow,defineCustomElement as defineCustomElementXplDynamicTableRow}from"./xpl-dynamic-table-row.js";export{XplGrid,defineCustomElement as defineCustomElementXplGrid}from"./xpl-grid.js";export{XplGridItem,defineCustomElement as defineCustomElementXplGridItem}from"./xpl-grid-item.js";export{XplHeaderAccordion,defineCustomElement as defineCustomElementXplHeaderAccordion}from"./xpl-header-accordion.js";export{XplIcon,defineCustomElement as defineCustomElementXplIcon}from"./xpl-icon.js";export{XplInput,defineCustomElement as defineCustomElementXplInput}from"./xpl-input.js";export{XplInputColor,defineCustomElement as defineCustomElementXplInputColor}from"./xpl-input-color.js";export{XplInputDate,defineCustomElement as defineCustomElementXplInputDate}from"./xpl-input-date.js";export{XplInputFile,defineCustomElement as defineCustomElementXplInputFile}from"./xpl-input-file.js";export{XplInputPhone,defineCustomElement as defineCustomElementXplInputPhone}from"./xpl-input-phone.js";export{XplInputSearch,defineCustomElement as defineCustomElementXplInputSearch}from"./xpl-input-search.js";export{XplInputTime,defineCustomElement as defineCustomElementXplInputTime}from"./xpl-input-time.js";export{XplLargeCard,defineCustomElement as defineCustomElementXplLargeCard}from"./xpl-large-card.js";export{XplList,defineCustomElement as defineCustomElementXplList}from"./xpl-list.js";export{XplListItem,defineCustomElement as defineCustomElementXplListItem}from"./xpl-list-item.js";export{XplMainNav,defineCustomElement as defineCustomElementXplMainNav}from"./xpl-main-nav.js";export{XplModal,defineCustomElement as defineCustomElementXplModal}from"./xpl-modal.js";export{XplNavHeaderMenu,defineCustomElement as defineCustomElementXplNavHeaderMenu}from"./xpl-nav-header-menu.js";export{XplNavItem,defineCustomElement as defineCustomElementXplNavItem}from"./xpl-nav-item.js";export{XplPagination,defineCustomElement as defineCustomElementXplPagination}from"./xpl-pagination.js";export{XplPanel,defineCustomElement as defineCustomElementXplPanel}from"./xpl-panel.js";export{XplPopover,defineCustomElement as defineCustomElementXplPopover}from"./xpl-popover.js";export{XplProgressBar,defineCustomElement as defineCustomElementXplProgressBar}from"./xpl-progress-bar.js";export{XplProgressIndicator,defineCustomElement as defineCustomElementXplProgressIndicator}from"./xpl-progress-indicator.js";export{XplRadio,defineCustomElement as defineCustomElementXplRadio}from"./xpl-radio.js";export{XplSecondaryNav,defineCustomElement as defineCustomElementXplSecondaryNav}from"./xpl-secondary-nav.js";export{XplSelect,defineCustomElement as defineCustomElementXplSelect}from"./xpl-select.js";export{XplSideNav,defineCustomElement as defineCustomElementXplSideNav}from"./xpl-side-nav.js";export{XplSideNavItem,defineCustomElement as defineCustomElementXplSideNavItem}from"./xpl-side-nav-item.js";export{XplSkeleton,defineCustomElement as defineCustomElementXplSkeleton}from"./xpl-skeleton.js";export{XplSlideout,defineCustomElement as defineCustomElementXplSlideout}from"./xpl-slideout.js";export{XplSpotlight,defineCustomElement as defineCustomElementXplSpotlight}from"./xpl-spotlight.js";export{XplTab,defineCustomElement as defineCustomElementXplTab}from"./xpl-tab.js";export{XplTabPanel,defineCustomElement as defineCustomElementXplTabPanel}from"./xpl-tab-panel.js";export{XplTable,defineCustomElement as defineCustomElementXplTable}from"./xpl-table.js";export{XplTableHeader,defineCustomElement as defineCustomElementXplTableHeader}from"./xpl-table-header.js";export{XplTableHeaderCell,defineCustomElement as defineCustomElementXplTableHeaderCell}from"./xpl-table-header-cell.js";export{XplTabs,defineCustomElement as defineCustomElementXplTabs}from"./xpl-tabs.js";export{XplTag,defineCustomElement as defineCustomElementXplTag}from"./xpl-tag.js";export{XplToast,defineCustomElement as defineCustomElementXplToast}from"./xpl-toast.js";export{XplToggle,defineCustomElement as defineCustomElementXplToggle}from"./xpl-toggle.js";export{XplToolbar,defineCustomElement as defineCustomElementXplToolbar}from"./xpl-toolbar.js";export{XplTooltip,defineCustomElement as defineCustomElementXplTooltip}from"./xpl-tooltip.js";export{XplTopNav,defineCustomElement as defineCustomElementXplTopNav}from"./xpl-top-nav.js";export{XplTopNavItem,defineCustomElement as defineCustomElementXplTopNavItem}from"./xpl-top-nav-item.js";export{XplTopNavMenu,defineCustomElement as defineCustomElementXplTopNavMenu}from"./xpl-top-nav-menu.js";export{XplUtilityBar,defineCustomElement as defineCustomElementXplUtilityBar}from"./xpl-utility-bar.js";
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BSHdGbmH.js";export{XplAccordion,defineCustomElement as defineCustomElementXplAccordion}from"./xpl-accordion.js";export{XplApplicationShell,defineCustomElement as defineCustomElementXplApplicationShell}from"./xpl-application-shell.js";export{XplAvatar,defineCustomElement as defineCustomElementXplAvatar}from"./xpl-avatar.js";export{XplBackdrop,defineCustomElement as defineCustomElementXplBackdrop}from"./xpl-backdrop.js";export{XplBadge,defineCustomElement as defineCustomElementXplBadge}from"./xpl-badge.js";export{XplBanner,defineCustomElement as defineCustomElementXplBanner}from"./xpl-banner.js";export{XplBreadcrumbItem,defineCustomElement as defineCustomElementXplBreadcrumbItem}from"./xpl-breadcrumb-item.js";export{XplBreadcrumbs,defineCustomElement as defineCustomElementXplBreadcrumbs}from"./xpl-breadcrumbs.js";export{XplButton,defineCustomElement as defineCustomElementXplButton}from"./xpl-button.js";export{XplButtonRow,defineCustomElement as defineCustomElementXplButtonRow}from"./xpl-button-row.js";export{XplCalendar,defineCustomElement as defineCustomElementXplCalendar}from"./xpl-calendar.js";export{XplCheckbox,defineCustomElement as defineCustomElementXplCheckbox}from"./xpl-checkbox.js";export{XplChoicelist,defineCustomElement as defineCustomElementXplChoicelist}from"./xpl-choicelist.js";export{XplContentArea,defineCustomElement as defineCustomElementXplContentArea}from"./xpl-content-area.js";export{XplDashboard,defineCustomElement as defineCustomElementXplDashboard}from"./xpl-dashboard.js";export{XplDataCard,defineCustomElement as defineCustomElementXplDataCard}from"./xpl-data-card.js";export{XplDivider,defineCustomElement as defineCustomElementXplDivider}from"./xpl-divider.js";export{XplDropdown,defineCustomElement as defineCustomElementXplDropdown}from"./xpl-dropdown.js";export{XplDropdownGroup,defineCustomElement as defineCustomElementXplDropdownGroup}from"./xpl-dropdown-group.js";export{XplDropdownHeading,defineCustomElement as defineCustomElementXplDropdownHeading}from"./xpl-dropdown-heading.js";export{XplDropdownOption,defineCustomElement as defineCustomElementXplDropdownOption}from"./xpl-dropdown-option.js";export{XplDynamicTable,defineCustomElement as defineCustomElementXplDynamicTable}from"./xpl-dynamic-table.js";export{XplDynamicTableCell,defineCustomElement as defineCustomElementXplDynamicTableCell}from"./xpl-dynamic-table-cell.js";export{XplDynamicTableRow,defineCustomElement as defineCustomElementXplDynamicTableRow}from"./xpl-dynamic-table-row.js";export{XplGrid,defineCustomElement as defineCustomElementXplGrid}from"./xpl-grid.js";export{XplGridItem,defineCustomElement as defineCustomElementXplGridItem}from"./xpl-grid-item.js";export{XplHeaderAccordion,defineCustomElement as defineCustomElementXplHeaderAccordion}from"./xpl-header-accordion.js";export{XplIcon,defineCustomElement as defineCustomElementXplIcon}from"./xpl-icon.js";export{XplInput,defineCustomElement as defineCustomElementXplInput}from"./xpl-input.js";export{XplInputColor,defineCustomElement as defineCustomElementXplInputColor}from"./xpl-input-color.js";export{XplInputDate,defineCustomElement as defineCustomElementXplInputDate}from"./xpl-input-date.js";export{XplInputFile,defineCustomElement as defineCustomElementXplInputFile}from"./xpl-input-file.js";export{XplInputPhone,defineCustomElement as defineCustomElementXplInputPhone}from"./xpl-input-phone.js";export{XplInputSearch,defineCustomElement as defineCustomElementXplInputSearch}from"./xpl-input-search.js";export{XplInputTime,defineCustomElement as defineCustomElementXplInputTime}from"./xpl-input-time.js";export{XplLargeCard,defineCustomElement as defineCustomElementXplLargeCard}from"./xpl-large-card.js";export{XplList,defineCustomElement as defineCustomElementXplList}from"./xpl-list.js";export{XplListItem,defineCustomElement as defineCustomElementXplListItem}from"./xpl-list-item.js";export{XplMainNav,defineCustomElement as defineCustomElementXplMainNav}from"./xpl-main-nav.js";export{XplModal,defineCustomElement as defineCustomElementXplModal}from"./xpl-modal.js";export{XplNavHeaderMenu,defineCustomElement as defineCustomElementXplNavHeaderMenu}from"./xpl-nav-header-menu.js";export{XplNavItem,defineCustomElement as defineCustomElementXplNavItem}from"./xpl-nav-item.js";export{XplPagination,defineCustomElement as defineCustomElementXplPagination}from"./xpl-pagination.js";export{XplPanel,defineCustomElement as defineCustomElementXplPanel}from"./xpl-panel.js";export{XplPopover,defineCustomElement as defineCustomElementXplPopover}from"./xpl-popover.js";export{XplProgressBar,defineCustomElement as defineCustomElementXplProgressBar}from"./xpl-progress-bar.js";export{XplProgressIndicator,defineCustomElement as defineCustomElementXplProgressIndicator}from"./xpl-progress-indicator.js";export{XplRadio,defineCustomElement as defineCustomElementXplRadio}from"./xpl-radio.js";export{XplSecondaryNav,defineCustomElement as defineCustomElementXplSecondaryNav}from"./xpl-secondary-nav.js";export{XplSelect,defineCustomElement as defineCustomElementXplSelect}from"./xpl-select.js";export{XplSideNav,defineCustomElement as defineCustomElementXplSideNav}from"./xpl-side-nav.js";export{XplSideNavHeaderItem,defineCustomElement as defineCustomElementXplSideNavHeaderItem}from"./xpl-side-nav-header-item.js";export{XplSideNavItem,defineCustomElement as defineCustomElementXplSideNavItem}from"./xpl-side-nav-item.js";export{XplSideNavSection,defineCustomElement as defineCustomElementXplSideNavSection}from"./xpl-side-nav-section.js";export{XplSkeleton,defineCustomElement as defineCustomElementXplSkeleton}from"./xpl-skeleton.js";export{XplSlideout,defineCustomElement as defineCustomElementXplSlideout}from"./xpl-slideout.js";export{XplSpotlight,defineCustomElement as defineCustomElementXplSpotlight}from"./xpl-spotlight.js";export{XplTab,defineCustomElement as defineCustomElementXplTab}from"./xpl-tab.js";export{XplTabPanel,defineCustomElement as defineCustomElementXplTabPanel}from"./xpl-tab-panel.js";export{XplTable,defineCustomElement as defineCustomElementXplTable}from"./xpl-table.js";export{XplTableHeader,defineCustomElement as defineCustomElementXplTableHeader}from"./xpl-table-header.js";export{XplTableHeaderCell,defineCustomElement as defineCustomElementXplTableHeaderCell}from"./xpl-table-header-cell.js";export{XplTabs,defineCustomElement as defineCustomElementXplTabs}from"./xpl-tabs.js";export{XplTag,defineCustomElement as defineCustomElementXplTag}from"./xpl-tag.js";export{XplToast,defineCustomElement as defineCustomElementXplToast}from"./xpl-toast.js";export{XplToggle,defineCustomElement as defineCustomElementXplToggle}from"./xpl-toggle.js";export{XplToolbar,defineCustomElement as defineCustomElementXplToolbar}from"./xpl-toolbar.js";export{XplTooltip,defineCustomElement as defineCustomElementXplTooltip}from"./xpl-tooltip.js";export{XplTopNav,defineCustomElement as defineCustomElementXplTopNav}from"./xpl-top-nav.js";export{XplTopNavItem,defineCustomElement as defineCustomElementXplTopNavItem}from"./xpl-top-nav-item.js";export{XplTopNavMenu,defineCustomElement as defineCustomElementXplTopNavMenu}from"./xpl-top-nav-menu.js";export{XplUtilityBar,defineCustomElement as defineCustomElementXplUtilityBar}from"./xpl-utility-bar.js";