@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -0,0 +1,114 @@
+import { Host, h } from "@stencil/core";
+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 = () => {
+            this.isMobileCascade = this.mobileMq?.matches ?? false;
+        };
+        this.handleBackClick = async () => {
+            const parent = this.el.closest('xpl-top-nav-item');
+            if (!parent) {
+                return;
+            }
+            await parent.closeMenu();
+            parent.querySelector('.xpl-top-nav-item__inner')?.focus();
+        };
+    }
+    connectedCallback() {
+        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;
+        }
+        this.connectParentOpenObserver();
+    }
+    disconnectedCallback() {
+        this.timers.dispose();
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.disconnectParentOpenObserver();
+    }
+    connectParentOpenObserver() {
+        this.disconnectParentOpenObserver();
+        const parent = this.el.parentElement;
+        if (!parent || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.parentOpenObserver = new MutationObserver(() => {
+            this.scheduleParentOpenCheck();
+        });
+        this.parentOpenObserver.observe(parent, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    disconnectParentOpenObserver() {
+        this.parentOpenObserver?.disconnect();
+        this.parentOpenObserver = undefined;
+    }
+    scheduleParentOpenCheck() {
+        this.timers.scheduleCoalesced('parentOpenCheck', () => {
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.focusBackRowIfJustOpenedOnMobile();
+        });
+    }
+    focusBackRowIfJustOpenedOnMobile() {
+        if (!this.isMobileCascade) {
+            return;
+        }
+        const parent = this.el.parentElement;
+        if (!parent?.classList.contains('xpl-top-nav-item--dropdown-open')) {
+            return;
+        }
+        this.el
+            .querySelector('.xpl-top-nav-menu__back .xpl-top-nav-item__inner')
+            ?.focus();
+    }
+    renderBackRow() {
+        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: 'e71631c4d9d4b653247d13c7b182f722bf1e52cc', class: {
+                'xpl-top-nav-menu': true,
+                dark: true,
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), h("slot", { key: 'c6e38f4f78ab65dad030076aebf97c40dbce651b' })));
+    }
+    static get is() { return "xpl-top-nav-menu"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile\ncascade back row when drilling back out of this group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobileCascade": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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,11 +62,30 @@ 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;
             this.navOpen.emit(this.open);
             if (wasOpen && !this.open) {
+                this.resetMobileCascade();
                 this.focusNavControlAfterClose();
             }
         };
@@ -58,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;
             }
@@ -81,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) {
@@ -99,7 +147,7 @@ export class TopNav {
             clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
             this.deferredSlotContentObserverSyncTimeoutId = undefined;
         }
-        this.removeDocEscapeListener();
+        this.removeDocDismissListeners();
         this.disconnectSlotContentObserver();
         this.disconnectUserPopoverDrawerSync();
     }
@@ -116,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() {
@@ -138,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;
             }
         }
@@ -156,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,
@@ -192,23 +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?.closeMenu().catch(() => undefined);
     }
-    scheduleSlotContentSyncFromObserver() {
+    scheduleSlotContentSyncFromObserver(mutations) {
+        if (this.mutationsAffectHostSlotting(mutations)) {
+            this.slotProjectionDirty = true;
+        }
         if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
             clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
         }
@@ -219,24 +272,38 @@ 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() {
         const wasOpen = this.open;
         this.open = false;
         if (wasOpen && !this.navControl) {
+            this.resetMobileCascade();
             this.navOpen.emit(false);
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: '6b22351e62f90d5fec04c0dafa5208d9a495b67b', 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,
@@ -244,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: '5f29a00b93b1affda6aaf900e42cc6ff33f1b90c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: 'fbe9cb0b1bc7d9bf9be1f04e64cb93ff24866879', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: 'b22532e39a57f9a250617aa09e6e0dde6dfeb9e5', 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: 'a9f7dbb6287d3e11ea5b839bedb8d808c67bcd8e', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (h("div", { key: 'c702fc39d186f37901c8c6b4e5d378eaee2faa99', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: '980b470563ee3d4e3e388cd089622041f307cd0b', 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: '0740be056833bd15c798a44c5c3dbe80ed5e15fd', 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: 'ff4f4534944dc54df40c289e65a4ab7d75bd572e', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'fdec30ffc838d7e73788932aa6fef46fac2fe0ab', name: "left-aside" })))), h("div", { key: '69d5b669744ff3aeb0c4316f4d5b27b9c461652f', 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: '7ae70d39f31243b77f09af7b0e4327d0bb1b1dfd', class: "xpl-nav-right__list" }, h("div", { key: '7bafc8eab226ba0ff77ae98281d4665eb6b75fbe', class: "xpl-top-nav__right-rail" }, h("div", { key: '9914028435faebbd3d539d763b71500643017ebc', class: "xpl-top-nav__right-lead" }, h("slot", { key: '974117684ec371dc87264bfbc0da5e456adeec9b', 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
@@ -381,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: '965003722d536d4b9b7acd326ed7ae0cc2ac302a' }, h("nav", { key: '25d4348939fd65e00ce7bec962a31d65ff9473c3', "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: '3cb1d9038135c1892a3780c9242bbd544f6f0f5f', 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

@@ -3,6 +3,7 @@ export class TimerManager {
         this.timeouts = new Set();
         this.intervals = new Set();
         this.rafs = new Set();
+        this.coalesced = new Map();
     }
     setTimeout(callback, delay) {
         const id = setTimeout(() => {
@@ -37,6 +38,21 @@ export class TimerManager {
         cancelAnimationFrame(id);
         this.rafs.delete(id);
     }
+    scheduleCoalesced(key, callback, delay = 0) {
+        this.clearCoalesced(key);
+        const id = setTimeout(() => {
+            this.coalesced.delete(key);
+            callback();
+        }, delay);
+        this.coalesced.set(key, id);
+    }
+    clearCoalesced(key) {
+        const id = this.coalesced.get(key);
+        if (id !== undefined) {
+            clearTimeout(id);
+            this.coalesced.delete(key);
+        }
+    }
     dispose() {
         this.timeouts.forEach((id) => clearTimeout(id));
         this.timeouts.clear();
@@ -44,36 +60,41 @@ export class TimerManager {
         this.intervals.clear();
         this.rafs.forEach((id) => cancelAnimationFrame(id));
         this.rafs.clear();
+        this.coalesced.forEach((id) => clearTimeout(id));
+        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;
+}