@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/collection/components/xpl-side-nav/xpl-side-nav-header-item/xpl-side-nav-header-item.js

@@ -0,0 +1,201 @@
+import { Host, h } from "@stencil/core";
+export class SideNavHeaderItem {
+    constructor() {
+        this.hasLeadingSlot = false;
+        this.hasTrailingSlot = false;
+        this.selected = false;
+        this.type = 'product-label';
+        this.handleClick = () => {
+            if (this.type !== 'sub-account')
+                return;
+            this.navigate.emit();
+        };
+    }
+    connectedCallback() {
+        this.syncSlots();
+        this.connectSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.slotSyncTimeoutId !== undefined) {
+            clearTimeout(this.slotSyncTimeoutId);
+            this.slotSyncTimeoutId = undefined;
+        }
+        this.disconnectSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncSlots();
+    }
+    componentWillRender() {
+        this.disconnectSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleSlotSync();
+    }
+    connectSlotObserver() {
+        this.disconnectSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.slotObserver = new MutationObserver(() => {
+            this.scheduleSlotSync();
+        });
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectSlotObserver() {
+        this.slotObserver?.disconnect();
+        this.slotObserver = undefined;
+    }
+    scheduleSlotSync() {
+        if (this.slotSyncTimeoutId !== undefined) {
+            clearTimeout(this.slotSyncTimeoutId);
+        }
+        this.slotSyncTimeoutId = setTimeout(() => {
+            this.slotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncSlots();
+            this.connectSlotObserver();
+        }, 0);
+    }
+    syncSlots() {
+        const isOwn = (node) => node.closest('xpl-side-nav-header-item') === this.el;
+        const hasLeading = Array.from(this.el.querySelectorAll('[slot="leading"]')).some(isOwn);
+        const hasTrailing = Array.from(this.el.querySelectorAll('[slot="trailing"]')).some(isOwn);
+        if (hasLeading !== this.hasLeadingSlot) {
+            this.hasLeadingSlot = hasLeading;
+        }
+        if (hasTrailing !== this.hasTrailingSlot) {
+            this.hasTrailingSlot = hasTrailing;
+        }
+    }
+    render() {
+        const isSubAccount = this.type === 'sub-account';
+        const showLeading = !!this.icon || this.hasLeadingSlot;
+        const subAccountFallbackLabel = isSubAccount && !this.label?.trim() ? 'Sub-account' : undefined;
+        const showAutoChevron = isSubAccount && !this.hasTrailingSlot;
+        const showTrailing = this.hasTrailingSlot || showAutoChevron;
+        const leading = showLeading ? (h("span", { class: "xpl-side-nav-header-item__leading" }, h("slot", { name: "leading" }, this.icon ? h("xpl-icon", { icon: this.icon, size: 16 }) : null))) : null;
+        const trailing = showTrailing ? (h("span", { class: "xpl-side-nav-header-item__trailing", "aria-hidden": showAutoChevron ? 'true' : undefined }, h("slot", { name: "trailing" }, showAutoChevron ? (h("xpl-icon", { icon: "chevron-expand-y", size: 16 })) : null))) : null;
+        const content = (h("span", { key: '0e94b81665c43c6dad594f6d78f153863cb0a5dd', class: "xpl-side-nav-header-item__content" }, leading, h("span", { key: '556354c3df994e36b803326e88bada417f20f2a4', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
+        return (h(Host, { key: 'f596403c230bcdf1aa35283f5943204d8a16debb', class: {
+                'xpl-side-nav-header-item': true,
+                'xpl-side-nav-header-item--product-label': !isSubAccount,
+                'xpl-side-nav-header-item--sub-account': isSubAccount,
+                'xpl-side-nav-header-item--selected': isSubAccount && this.selected,
+            } }, isSubAccount ? (h("button", { type: "button", class: "xpl-side-nav-header-item__header", "aria-current": this.selected ? 'true' : undefined, "aria-label": subAccountFallbackLabel, onClick: this.handleClick }, content)) : (h("div", { class: "xpl-side-nav-header-item__header" }, content))));
+    }
+    static get is() { return "xpl-side-nav-header-item"; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon name; renders as the default content for `slot=\"leading\"`.\nWhen `slot=\"leading\"` content is present, this prop is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The display label for the header item (e.g. the product name or sub-account name)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently in a selected state. Only meaningful when\n`type` is `sub-account` \u2014 applies the information-surface pill around the\nlabel + trailing chevron."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'product-label' | 'sub-account'",
+                    "resolved": "\"product-label\" | \"sub-account\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The header item variant. `product-label` is a static, non-interactive\nlabel. `sub-account` is an interactive button that emits `navigate`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'product-label'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLeadingSlot": {},
+            "hasTrailingSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navigate",
+                "name": "navigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a `sub-account` item is activated (pointer click or keyboard\nactivation of the native `<button>`). Not emitted for `product-label`\n(static, no interaction)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { hasHostSlottedContent } from "../side-nav-slot-utils";
 export class SideNavItem {
     constructor() {
         this.hasTrailingSlot = false;
@@ -16,7 +17,7 @@ export class SideNavItem {
                 this.expandedChange.emit(this.expanded);
             }
             else {
-                this.navClick.emit();
+                this.navigate.emit();
             }
         };
     }
@@ -61,8 +62,7 @@ export class SideNavItem {
         });
     }
     disconnectTrailingSlotObserver() {
-        var _a;
-        (_a = this.trailingSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.trailingSlotObserver?.disconnect();
         this.trailingSlotObserver = undefined;
     }
     scheduleTrailingSlotSync() {
@@ -79,7 +79,7 @@ export class SideNavItem {
         }, 0);
     }
     syncTrailingSlot() {
-        const next = Array.from(this.el.querySelectorAll('[slot="trailing"]')).some((node) => node.closest('xpl-side-nav-item') === this.el);
+        const next = hasHostSlottedContent(this.el, 'trailing', 'xpl-side-nav-item');
         if (next !== this.hasTrailingSlot) {
             this.hasTrailingSlot = next;
         }
@@ -95,21 +95,20 @@ export class SideNavItem {
         }
     }
     render() {
-        var _a;
         const showAutoChevron = this.hasChildren && !this.hasTrailingSlot;
         const buttonClass = {
             'xpl-side-nav-item__link': true,
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (h(Host, { key: 'd20950311a1dd97fff43eac3908a64a43aa2a332', class: {
+        return (h(Host, { key: '173aa913d77c88522069cb4beef76d5b04b9beb1', class: {
                 'xpl-side-nav-item': true,
                 'xpl-side-nav-item--link-disabled': this.link && this.disabled,
-            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: buttonClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, h("span", { class: "xpl-side-nav-item__leading" }, h("slot", { name: "leading" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null)), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''), (this.hasTrailingSlot || this.hasChildren) && (h("span", { class: {
+            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: buttonClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, h("span", { class: "xpl-side-nav-item__leading" }, h("slot", { name: "leading" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null)), h("span", { class: "xpl-side-nav-item__label" }, this.label ?? ''), (this.hasTrailingSlot || this.hasChildren) && (h("span", { class: {
                 'xpl-side-nav-item__trailing': true,
                 'xpl-side-nav-item__trailing--chevron': showAutoChevron,
                 expanded: showAutoChevron && this.expanded,
-            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, h("slot", { name: "trailing" }, showAutoChevron ? (h("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (h("div", { key: 'b3aa86bdacae535dae31b93fa6f5013614f682bc', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '91be28afd11a250696e003d0a8abf70f6e8b35c6', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: '1536a898b39fd1f30c26d9d71f79726e377ee8f2' }))))));
+            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, h("slot", { name: "trailing" }, showAutoChevron ? (h("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (h("div", { key: '7611d4a00248e27f0e5d38fb4890950854e5023e', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '79676aa8d5f3d9396629cf7b9d9f5ebc142fc2ad', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: '42bcc845f6b7f9085f0095f1337c2cf3f4be6698' }))))));
     }
     static get is() { return "xpl-side-nav-item"; }
     static get properties() {
@@ -296,14 +295,14 @@ export class SideNavItem {
                     "references": {}
                 }
             }, {
-                "method": "navClick",
-                "name": "navClick",
+                "method": "navigate",
+                "name": "navigate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a leaf item is clicked. Expandable parents use `expandedChange` instead."
+                    "text": "Emitted when a leaf item is activated (pointer click or keyboard\nactivation of the native `<button>`). Expandable parents use\n`expandedChange` instead."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/xpl-side-nav/xpl-side-nav-section/xpl-side-nav-section.js

@@ -0,0 +1,186 @@
+import { Host, h } from "@stencil/core";
+import { ensureSideNavSectionChildrenId, getHostSlottedElements, hasHostSlottedContent, } from "../side-nav-slot-utils";
+export class SideNavSection {
+    constructor() {
+        this.hasBadgeSlot = false;
+        this.hasNamedBadgeSlot = false;
+        this.collapsible = true;
+        this.expanded = false;
+        this.handleHeaderClick = () => {
+            if (!this.collapsible)
+                return;
+            this.expanded = !this.expanded;
+            this.expandedChange.emit(this.expanded);
+        };
+    }
+    connectedCallback() {
+        this.syncBadgeSlot();
+        this.connectBadgeSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+            this.badgeSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectBadgeSlotObserver();
+    }
+    componentWillLoad() {
+        this.childrenId = ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        this.syncBadgeSlot();
+    }
+    componentWillRender() {
+        this.disconnectBadgeSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleBadgeSlotSync();
+    }
+    connectBadgeSlotObserver() {
+        this.disconnectBadgeSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.badgeSlotObserver = new MutationObserver(() => {
+            this.scheduleBadgeSlotSync();
+        });
+        this.badgeSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectBadgeSlotObserver() {
+        this.badgeSlotObserver?.disconnect();
+        this.badgeSlotObserver = undefined;
+    }
+    scheduleBadgeSlotSync() {
+        if (this.badgeSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.badgeSlotSyncTimeoutId);
+        }
+        this.badgeSlotSyncTimeoutId = setTimeout(() => {
+            this.badgeSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncBadgeSlot();
+            this.connectBadgeSlotObserver();
+        }, 0);
+    }
+    syncBadgeSlot() {
+        const badges = getHostSlottedElements(this.el, 'badge', 'xpl-side-nav-section');
+        const hasBadgeSlot = hasHostSlottedContent(this.el, 'badge', 'xpl-side-nav-section');
+        const hasNamedBadgeSlot = badges.some((badge) => badge.textContent?.trim() || badge.getAttribute('aria-label')?.trim());
+        if (hasBadgeSlot !== this.hasBadgeSlot) {
+            this.hasBadgeSlot = hasBadgeSlot;
+        }
+        if (hasNamedBadgeSlot !== this.hasNamedBadgeSlot) {
+            this.hasNamedBadgeSlot = hasNamedBadgeSlot;
+        }
+    }
+    render() {
+        const showChildren = !this.collapsible || this.expanded;
+        const hasHeading = !!this.heading?.trim();
+        const childrenId = this.childrenId ?? ensureSideNavSectionChildrenId(this.el, this.childrenId);
+        const titleRow = [
+            h("span", { key: 'c39c7044ae5ae1238df9aaf644a73b192dfd7f2b', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
+            h("span", { key: 'a47fcc5b501f01d735cd2b9035063a2fa2c97a91', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, h("slot", { key: '06785bbb8eeb928b9ee7e04198df20fcf5bd739e', name: "badge" })),
+            this.collapsible ? (h("span", { class: "xpl-side-nav-section__chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: this.expanded ? 'chevron-down' : 'chevron-right', size: 16 }))) : null,
+        ];
+        return (h(Host, { key: '4ce2adbf830659bb0803d477386a004d47aa4335', class: {
+                'xpl-side-nav-section': true,
+                'xpl-side-nav-section--static': !this.collapsible,
+            } }, this.collapsible ? (h("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (h("div", { class: "xpl-side-nav-section__header" }, titleRow)), h("div", { key: '2ccafafd7d73fc8eaf367e718e9c2681ece0e936', id: childrenId, class: {
+                'xpl-side-nav-section__children': true,
+                expanded: showChildren,
+            }, inert: !showChildren ? true : undefined }, h("div", { key: 'eaac1a443982eeca891d676511fe5bdb3f78db19', class: "xpl-side-nav-section__children-inner" }, h("slot", { key: '67143e298920cff3b28a6db4fd2a2ac18935b991' })))));
+    }
+    static get is() { return "xpl-side-nav-section"; }
+    static get properties() {
+        return {
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section can be collapsed/expanded. When `false`, renders a static\ntitle (no chevron, not a button) and children are always shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsible",
+                "defaultValue": "true"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is currently expanded. Only meaningful when `collapsible` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The section title text. Optional, but when `collapsible` is true and both\n`heading` and `slot=\"badge\"` lack an accessible name, the toggle `<button>`\nfalls back to `aria-label=\"Toggle section\"` so it always has an accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBadgeSlot": {},
+            "hasNamedBadgeSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the expanded state changes (collapsible sections only). Detail is the new expanded value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -1,8 +1,10 @@
 import { Host, h, } from "@stencil/core";
+import { isBrowser } from "../../utils/lifecycle";
 import { SIDE_NAV_CLOSE_ANIMATION_MS, SIDE_NAV_MOBILE_MQ } from "./side-nav-constants";
 export class SideNav {
     constructor() {
         this.drawerClosing = false;
+        this.hasHeaderSlot = false;
         this.open = false;
         this.onViewportChange = () => {
             this.clearCloseTransition();
@@ -15,9 +17,8 @@ export class SideNav {
                 clearTimeout(this.toggleFocusTimeoutId);
             }
             this.toggleFocusTimeoutId = setTimeout(() => {
-                var _a;
                 this.toggleFocusTimeoutId = undefined;
-                (_a = this.el.querySelector('.xpl-side-nav__toggle button')) === null || _a === void 0 ? void 0 : _a.focus();
+                this.el.querySelector('.xpl-side-nav__toggle button')?.focus();
             }, 0);
         };
         this.focusDrawerOnOpen = () => {
@@ -27,14 +28,13 @@ export class SideNav {
                 clearTimeout(this.drawerFocusTimeoutId);
             }
             this.drawerFocusTimeoutId = setTimeout(() => {
-                var _a;
                 this.drawerFocusTimeoutId = undefined;
                 const wrapper = this.el.querySelector('.xpl-side-nav__wrapper');
                 const first = wrapper
                     ? this.getFocusableElements().find((el) => wrapper.contains(el))
                     : undefined;
                 const fallback = this.el.querySelector('.xpl-side-nav__toggle button');
-                (_a = (first !== null && first !== void 0 ? first : fallback)) === null || _a === void 0 ? void 0 : _a.focus();
+                (first ?? fallback)?.focus();
             }, 0);
         };
         this.onBackdropClick = () => this.setOpenState(false);
@@ -87,11 +87,22 @@ export class SideNav {
             this.focusDrawerOnOpen();
     }
     connectedCallback() {
-        if (typeof window !== 'undefined') {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
             this.mobileMq = window.matchMedia(SIDE_NAV_MOBILE_MQ);
             this.mobileMq.addEventListener('change', this.onViewportChange);
         }
         this.syncDocKeyDownListener();
+        this.syncHeaderSlot();
+        this.connectHeaderSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncHeaderSlot();
+    }
+    componentWillRender() {
+        this.disconnectHeaderSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleHeaderSlotSync();
     }
     componentDidLoad() {
         if (this.open) {
@@ -100,7 +111,6 @@ export class SideNav {
         }
     }
     disconnectedCallback() {
-        var _a;
         if (this.toggleFocusTimeoutId !== undefined) {
             clearTimeout(this.toggleFocusTimeoutId);
             this.toggleFocusTimeoutId = undefined;
@@ -110,9 +120,14 @@ export class SideNav {
             this.drawerFocusTimeoutId = undefined;
         }
         this.clearCloseTransition();
-        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq?.removeEventListener('change', this.onViewportChange);
         this.mobileMq = undefined;
         this.removeDocKeyDownListener();
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+            this.headerSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectHeaderSlotObserver();
     }
     async toggle() {
         this.setOpenState(!this.open);
@@ -130,8 +145,7 @@ export class SideNav {
         }
     }
     isBelowMdBreakpoint() {
-        var _a, _b;
-        return (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+        return this.mobileMq?.matches ?? false;
     }
     isMobileDrawerActive() {
         return (this.open || this.drawerClosing) && this.isBelowMdBreakpoint();
@@ -153,7 +167,7 @@ export class SideNav {
         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;
             }
         }
@@ -193,11 +207,55 @@ export class SideNav {
             first.focus();
         }
     }
+    connectHeaderSlotObserver() {
+        this.disconnectHeaderSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.headerSlotObserver = new MutationObserver(() => {
+            this.scheduleHeaderSlotSync();
+        });
+        this.headerSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectHeaderSlotObserver() {
+        this.headerSlotObserver?.disconnect();
+        this.headerSlotObserver = undefined;
+    }
+    scheduleHeaderSlotSync() {
+        if (this.headerSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.headerSlotSyncTimeoutId);
+        }
+        this.headerSlotSyncTimeoutId = setTimeout(() => {
+            this.headerSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncHeaderSlot();
+            this.connectHeaderSlotObserver();
+        }, 0);
+    }
+    syncHeaderSlot() {
+        const projectsToHeader = (node) => {
+            if (node.closest('xpl-side-nav') !== this.el) {
+                return false;
+            }
+            return node.parentElement === this.el || node.closest('.xpl-side-nav__header') !== null;
+        };
+        const next = Array.from(this.el.querySelectorAll('[slot="nav-header"]')).some(projectsToHeader);
+        if (next !== this.hasHeaderSlot) {
+            this.hasHeaderSlot = next;
+        }
+    }
     render() {
-        return (h(Host, { key: 'fe3b0b9e5f9facf3f7fa469a8928d7ed8971e6f5', class: {
+        return (h(Host, { key: '3cb4a93f442dcbdea0acf45159022b06f35af657', class: {
                 'xpl-side-nav': true,
                 'xpl-side-nav--open': this.open,
-            } }, h("xpl-button", { key: '09d0de65b9a40446a4801087e91c1bf3e1d3989a', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), h("div", { key: '3274980b1cb4867d163e83c80520e44bcc8d0121', class: "xpl-side-nav__wrapper" }, h("nav", { key: '06ce207917af66ff8f238c6cc85e8a8d5f47efbc', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: 'ce08165951c7b40fc21e846f6dfe7ca44b57326d', class: "xpl-side-nav__section" }, h("slot", { key: 'da65836d8006756b3a0d408d343b445a3bccb271', name: "section" })), h("div", { key: '93b522d531086a914d2cd53fe859da2436df9552', class: "xpl-side-nav__footer" }, h("slot", { key: 'a2cce3bec1d5269316388ede23934d2cfb835cf9', name: "nav-footer" })))), h("xpl-backdrop", { key: 'e98662f2e022d9d9edfa16b2c62d3ca40755b829', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
+            } }, h("xpl-button", { key: 'e79ef7af139c6ba1321e060713fdf18ab3ea3cd9', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), h("div", { key: '99858cfceab9a2ac92b4f8a81a987b2a3e80713c', class: "xpl-side-nav__wrapper" }, h("nav", { key: 'f47e3f61c810d2186d5ba29691b34106a7ca8f3f', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '57a14d8b5dd3771134f2f624ae2c781efc2e06e1', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (h("div", { key: '9ab9401928d3dee69d6fb62662ee6b02fc43b149', class: "xpl-side-nav__header" }, h("slot", { key: 'f1c0014d095bb70b0008d4ded191fae0f31f4395', name: "nav-header" }))), h("div", { key: 'a68ffd32329d32c19414f0853a6c6b9a011e7d94', class: "xpl-side-nav__section" }, h("slot", { key: '897aadd37f865fbea5a2f69b87c6d491b21ca8fd', name: "section" }))), h("div", { key: 'a6ef338238ed7b8d083d0553aa7e7b35c842100b', class: "xpl-side-nav__footer" }, h("slot", { key: '332d1e28d9567a2293586ad6ab7d1955e533a7c8', name: "nav-footer" })))), h("xpl-backdrop", { key: 'd593316822b8d8974a0a94ebf6c9eda84c1d6836', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
     }
     static get is() { return "xpl-side-nav"; }
     static get properties() {
@@ -243,6 +301,11 @@ export class SideNav {
             }
         };
     }
+    static get states() {
+        return {
+            "hasHeaderSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "openChange",

package/dist/collection/components/xpl-skeleton/skeleton.stories.js

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Skeleton',
     component: 'xpl-skeleton',
@@ -29,7 +31,13 @@ export default {
             control: 'text',
         },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
 };
 export const Simple = ({ shape, size, width, height }) => {
     const attributes = {
@@ -58,6 +66,7 @@ Simple.args = {
 };
 Simple.parameters = {
     layout: 'centered',
+    htmlSnippet: { mode: 'auto' },
     'web-component': {
         render: Simple(Simple.args),
     },