@xplortech/apollo-core 2.11.0 → 3.0.0

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

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

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: '00d598070bc4cee97d311206f48bf5cd873dcc8e', 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: '0b42d835c3aa211fa1686d3611ace212d69f1921', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: 'b55f526eca470d1d50b19bf1694f66991d369ad7', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '37589314adb7f9cc4a33dd4bc421b2473ece5b54', 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: 'acbdd20739df23cf49ff6542605513159cffe1da', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (h("div", { key: '148ba3e7114ce3f1edbf0618a231d94c4cc3c04f', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: 'cda2c5f5dca554b7b61d95b941bd0b969f871dd0', 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: 'abca8522fe239fe207a291d7bd8bdfd1cab0ffc3', 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: 'f2fde6503e8bc319fbd60a4d5000d93644999d9a', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'ebbb61cf32cf5b0246cecc3d967f93f1834b9e11', name: "left-aside" })))), h("div", { key: '18c8d5990551ee655190aabb8ee85ad8d772b54e', 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: '3120cb36425177943c3a52345396b5b2de9cc028', class: "xpl-nav-right__list" }, h("div", { key: '6fde79b8b6d87bfdb617c591530307382bdff243', class: "xpl-top-nav__right-rail" }, h("div", { key: '7e69e3e660887b7b39db058fb7e8cf42679a730e', class: "xpl-top-nav__right-lead" }, h("slot", { key: 'c198ab94307d3d126b5902890de73b434cb583b1', 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/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: '3ed4e8e9214075b9062b221a05f1b27aa0b0bfbf' }, h("nav", { key: 'c809f6f649965d0b60d35c2bda31f721d67ccca1', "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: '99e22823c94e66c5dce24815485c7513b11e9267', 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';
@@ -115,10 +119,18 @@ export { TabPanel as XplTabPanel } from '../types/components/xpl-tab-panel/xpl-t
 export { defineCustomElement as defineCustomElementXplTabPanel } from './xpl-tab-panel';
 export { Table as XplTable } from '../types/components/xpl-table/xpl-table';
 export { defineCustomElement as defineCustomElementXplTable } from './xpl-table';
+export { XplTableBody as XplTableBody } from '../types/components/xpl-table/xpl-table-body/xpl-table-body';
+export { defineCustomElement as defineCustomElementXplTableBody } from './xpl-table-body';
+export { XplTableFooter as XplTableFooter } from '../types/components/xpl-table/xpl-table-footer/xpl-table-footer';
+export { defineCustomElement as defineCustomElementXplTableFooter } from './xpl-table-footer';
+export { XplTableFooterCell as XplTableFooterCell } from '../types/components/xpl-table/xpl-table-footer-cell/xpl-table-footer-cell';
+export { defineCustomElement as defineCustomElementXplTableFooterCell } from './xpl-table-footer-cell';
 export { TableHeader as XplTableHeader } from '../types/components/xpl-table-header/xpl-table-header';
 export { defineCustomElement as defineCustomElementXplTableHeader } from './xpl-table-header';
 export { TableHeaderCell as XplTableHeaderCell } from '../types/components/xpl-table-header-cell/xpl-table-header-cell';
 export { defineCustomElement as defineCustomElementXplTableHeaderCell } from './xpl-table-header-cell';
+export { XplTableRow as XplTableRow } from '../types/components/xpl-table/xpl-table-row/xpl-table-row';
+export { defineCustomElement as defineCustomElementXplTableRow } from './xpl-table-row';
 export { Tabs as XplTabs } from '../types/components/xpl-tabs/xpl-tabs';
 export { defineCustomElement as defineCustomElementXplTabs } from './xpl-tabs';
 export { Tag as XplTag } from '../types/components/xpl-tag/xpl-tag';