@xplortech/apollo-core 2.9.0 → 2.10.0

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

@@ -1,6 +1,7 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 export class SideNavItem {
     constructor() {
+        this.hasTrailingSlot = false;
         this.disabled = false;
         this.expanded = false;
         this.hasChildren = false;
@@ -22,11 +23,66 @@ export class SideNavItem {
     syncLinkHasChildrenExclusivity() {
         this.enforceLinkExcludesHasChildren();
     }
+    connectedCallback() {
+        this.syncTrailingSlot();
+        this.connectTrailingSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+            this.trailingSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectTrailingSlotObserver();
+    }
     componentWillLoad() {
         this.syncLinkHasChildrenExclusivity();
+        this.syncTrailingSlot();
     }
     componentWillRender() {
         this.syncLinkHasChildrenExclusivity();
+        this.disconnectTrailingSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleTrailingSlotSync();
+    }
+    connectTrailingSlotObserver() {
+        this.disconnectTrailingSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.trailingSlotObserver = new MutationObserver(() => {
+            this.scheduleTrailingSlotSync();
+        });
+        this.trailingSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectTrailingSlotObserver() {
+        var _a;
+        (_a = this.trailingSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.trailingSlotObserver = undefined;
+    }
+    scheduleTrailingSlotSync() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+        }
+        this.trailingSlotSyncTimeoutId = setTimeout(() => {
+            this.trailingSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncTrailingSlot();
+            this.connectTrailingSlotObserver();
+        }, 0);
+    }
+    syncTrailingSlot() {
+        const next = Array.from(this.el.querySelectorAll('[slot="trailing"]')).some((node) => node.closest('xpl-side-nav-item') === this.el);
+        if (next !== this.hasTrailingSlot) {
+            this.hasTrailingSlot = next;
+        }
     }
     enforceLinkExcludesHasChildren() {
         if (!this.link)
@@ -40,15 +96,20 @@ export class SideNavItem {
     }
     render() {
         var _a;
-        const linkClass = {
+        const showAutoChevron = this.hasChildren && !this.hasTrailingSlot;
+        const buttonClass = {
             'xpl-side-nav-item__link': true,
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (h(Host, { key: 'a621f4f9c04d79de708a34a4f4eab06e523a299a', class: {
+        return (h(Host, { key: 'd20950311a1dd97fff43eac3908a64a43aa2a332', 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: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, 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.hasChildren && !this.link && (h("div", { key: '3e22894c0bd9427f568b86bba00cdab822921997', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '41486a4241e4402232531d140e972b39d863ffd9', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'd334c6ecac7dd1dd12602a461db444cd1ccefc86' }))))));
+            } }, 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: {
+                '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' }))))));
     }
     static get is() { return "xpl-side-nav-item"; }
     static get properties() {
@@ -65,7 +126,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the component is disabled"
+                    "text": "Whether the item is currently disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -85,7 +146,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the item is currently expanded (only applies when hasChildren is true)"
+                    "text": "Whether the item is currently expanded (only applies when `has-children` is true)."
                 },
                 "getter": false,
                 "setter": false,
@@ -105,7 +166,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with <code>link</code>. If <code>link</code> is already true, setting\n<code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>,\n<code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS."
+                    "text": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with `link`. If `link` is already true, setting `has-children` is reverted."
                 },
                 "getter": false,
                 "setter": false,
@@ -125,7 +186,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the component is hidden"
+                    "text": "Whether the component is hidden."
                 },
                 "getter": false,
                 "setter": false,
@@ -145,7 +206,7 @@ export class SideNavItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional icon name; default content for <code>slot=\"icon\"</code> (leaf and footer rows only).\nExpandable parents (<code>has-children</code>) do not show an icon column \u2014 only the chevron and label.\nOmit for nested children under a <code>has-children</code> parent \u2014 the icon column is hidden for sub-items."
+                    "text": "Optional icon name; renders as the default content for `slot=\"leading\"`.\nWhen `slot=\"leading\"` content is present, this prop is ignored.\nIn v2, this prop applies to all item types including parent rows (`has-children`)."
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +225,7 @@ export class SideNavItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode)."
+                    "text": "The display label for the navigation item (button / expandable rows; omit in `link` mode)."
                 },
                 "getter": false,
                 "setter": false,
@@ -183,7 +244,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, <code>label</code> and <code>icon</code> props should not be used.\nLink mode does not support <code>has-children</code>; use the default button mode for expandable items.\nWhen <code>link</code> is true, <code>hasChildren</code> is always false (enforced by\n<code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and\n<code>componentWillRender</code>)."
+                    "text": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, `label` and `icon` props should not be used.\nLink mode does not support `has-children`; use the default button mode for expandable items.\nWhen `link` is true, `hasChildren` is always false."
                 },
                 "getter": false,
                 "setter": false,
@@ -203,7 +264,7 @@ export class SideNavItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the item is currently in a selected state"
+                    "text": "Whether the item is currently in a selected state."
                 },
                 "getter": false,
                 "setter": false,
@@ -213,6 +274,11 @@ export class SideNavItem {
             }
         };
     }
+    static get states() {
+        return {
+            "hasTrailingSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "expandedChange",
@@ -222,7 +288,7 @@ export class SideNavItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value."
+                    "text": "Emitted when the expanded state changes (`has-children` items only). Detail is the new expanded value."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -237,7 +303,7 @@ export class SideNavItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a leaf item is clicked. Expandable parents use expandedChange instead."
+                    "text": "Emitted when a leaf item is clicked. Expandable parents use `expandedChange` instead."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1,9 +1,203 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
+import { SIDE_NAV_CLOSE_ANIMATION_MS, SIDE_NAV_MOBILE_MQ } from "./side-nav-constants";
 export class SideNav {
+    constructor() {
+        this.drawerClosing = false;
+        this.open = false;
+        this.onViewportChange = () => {
+            this.clearCloseTransition();
+            this.syncDocKeyDownListener();
+        };
+        this.focusToggleAfterClose = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.toggleFocusTimeoutId !== undefined) {
+                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();
+            }, 0);
+        };
+        this.focusDrawerOnOpen = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.drawerFocusTimeoutId !== undefined) {
+                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();
+            }, 0);
+        };
+        this.onBackdropClick = () => this.setOpenState(false);
+        this.onDocKeyDown = (e) => {
+            if (!this.isMobileDrawerActive())
+                return;
+            if (this.shouldYieldFocusToExternalModal())
+                return;
+            switch (e.key.toLowerCase()) {
+                case 'escape': {
+                    if (!this.open)
+                        return;
+                    if (this.anyDescendantPopoverIsOpen())
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.setOpenState(false);
+                    return;
+                }
+                case 'tab': {
+                    this.trapTabKey(e);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        };
+        this.onToggleClick = () => this.setOpenState(!this.open);
+    }
+    onOpenChanged(newValue, oldValue) {
+        if (oldValue && !newValue && this.isBelowMdBreakpoint()) {
+            this.drawerClosing = true;
+            if (this.closeTransitionTimeoutId !== undefined) {
+                clearTimeout(this.closeTransitionTimeoutId);
+            }
+            this.closeTransitionTimeoutId = setTimeout(() => {
+                this.closeTransitionTimeoutId = undefined;
+                this.drawerClosing = false;
+                this.syncDocKeyDownListener();
+            }, SIDE_NAV_CLOSE_ANIMATION_MS);
+        }
+        else {
+            this.clearCloseTransition();
+        }
+        this.syncDocKeyDownListener();
+        if (oldValue && !newValue)
+            this.focusToggleAfterClose();
+        if (!oldValue && newValue)
+            this.focusDrawerOnOpen();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            this.mobileMq = window.matchMedia(SIDE_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onViewportChange);
+        }
+        this.syncDocKeyDownListener();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.syncDocKeyDownListener();
+            this.focusDrawerOnOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.toggleFocusTimeoutId !== undefined) {
+            clearTimeout(this.toggleFocusTimeoutId);
+            this.toggleFocusTimeoutId = undefined;
+        }
+        if (this.drawerFocusTimeoutId !== undefined) {
+            clearTimeout(this.drawerFocusTimeoutId);
+            this.drawerFocusTimeoutId = undefined;
+        }
+        this.clearCloseTransition();
+        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.removeDocKeyDownListener();
+    }
+    async toggle() {
+        this.setOpenState(!this.open);
+    }
+    async setOpen(open) {
+        this.setOpenState(open);
+    }
+    removeDocKeyDownListener() {
+        this.el.ownerDocument.removeEventListener('keydown', this.onDocKeyDown, false);
+    }
+    syncDocKeyDownListener() {
+        this.removeDocKeyDownListener();
+        if (this.isMobileDrawerActive()) {
+            this.el.ownerDocument.addEventListener('keydown', this.onDocKeyDown, false);
+        }
+    }
+    isBelowMdBreakpoint() {
+        var _a, _b;
+        return (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+    }
+    isMobileDrawerActive() {
+        return (this.open || this.drawerClosing) && this.isBelowMdBreakpoint();
+    }
+    clearCloseTransition() {
+        if (this.closeTransitionTimeoutId !== undefined) {
+            clearTimeout(this.closeTransitionTimeoutId);
+            this.closeTransitionTimeoutId = undefined;
+        }
+        this.drawerClosing = false;
+    }
+    shouldYieldFocusToExternalModal() {
+        const active = this.el.ownerDocument.activeElement;
+        if (!active || this.el.contains(active))
+            return false;
+        return active.closest('[aria-modal="true"]') !== null;
+    }
+    anyDescendantPopoverIsOpen() {
+        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')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    setOpenState(open) {
+        const wasOpen = this.open;
+        if (open === wasOpen)
+            return;
+        this.open = open;
+        this.openChange.emit(open);
+        if (wasOpen && !open)
+            this.focusToggleAfterClose();
+    }
+    getFocusableElements() {
+        const selector = 'button:not([disabled]), a[href]:not([tabindex="-1"]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const active = this.el.ownerDocument.activeElement;
+        return Array.from(this.el.querySelectorAll(selector)).filter((node) => !node.closest('[inert]') && (node.offsetParent !== null || node === active));
+    }
+    trapTabKey(e) {
+        if (this.shouldYieldFocusToExternalModal())
+            return;
+        const focusable = this.getFocusableElements();
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.el.ownerDocument.activeElement;
+        if (e.shiftKey) {
+            if (active === first || !this.el.contains(active)) {
+                e.preventDefault();
+                last.focus();
+            }
+        }
+        else if (active === last || !this.el.contains(active)) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
+        return (h(Host, { key: 'fe3b0b9e5f9facf3f7fa469a8928d7ed8971e6f5', class: {
                 'xpl-side-nav': true,
-            } }, h("div", { key: '92c9f31fa0d9d564164cde99d17e30562c30abb7', class: "xpl-side-nav__wrapper" }, h("nav", { key: '5ddd8b18d4f74bb752b747ec4e1c48780a0738de', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '8b830945bf6ec1da8ab2e2c955c10a1077652590', class: "xpl-side-nav__section" }, h("slot", { key: '66e5cd33c23bdc8963d661e0741d34f80a0640fb', name: "section" })), h("div", { key: 'f0da4e3c25822453efcbfb3c6f8ea7ec328e717d', class: "xpl-side-nav__footer" }, h("slot", { key: '76b829e978361be9fd62bd412489ea4559852c3f', name: "nav-footer" }))))));
+                '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 })));
     }
     static get is() { return "xpl-side-nav"; }
     static get properties() {
@@ -26,7 +220,94 @@ export class SideNav {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the mobile drawer is open. Reflected to the `open` attribute so CSS and\nhost state stay in sync. Controlled (consumer owns `open`) or uncontrolled\n(built-in toggle flips it). Has no visible effect above the `md` breakpoint,\nwhere the sidebar always renders inline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mobile drawer open state changes: toggle activation, Escape,\nor a backdrop click. Detail is the new open state (`true` = open, `false` = closed)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the mobile drawer open/closed. Emits `openChange`.",
+                    "tags": []
+                }
+            },
+            "setOpen": {
+                "complexType": {
+                    "signature": "(open: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "open",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically set the mobile drawer open state. Emits `openChange` when it changes.",
+                    "tags": []
+                }
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChanged"
+            }];
+    }
 }

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

@@ -5,7 +5,7 @@ export class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', class: {
+        return (h(Host, { key: '2cb86d68bd14f87ab1a6467716ec456cc1bfd6a2', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,

package/dist/collection/components/xpl-slideout/xpl-slideout.js

@@ -26,7 +26,7 @@ export class Slideout {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '8a3f7af854b35469bf4a383cc4cb1fcfcaa15748', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '7033d78efa9ac2642a99d2b2dca278a3e9a44368', onClick: this.handleClose })), h("aside", { key: '2999e4119a0dbaac5125c7a1ef5f03761f445a0e', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4', class: "header" }, h("div", { key: '88172efe113b56a533761b975605a44ef52c5174', class: "title" }, h("slot", { key: 'c8f13168f62f96374250b11814ace756fa680503', name: "title" }), h("xpl-button", { key: '8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '110cbd50e31b51319745d6fed61188c1c885b8b3', icon: "x" }))), h("div", { key: '96e6cddf4b078736201116f220f27ddf34b90b44', class: "subtitle" }, h("slot", { key: 'eb02b4fce6ff5e658ec51c83819a5257f452d3a1', name: "subtitle" })), h("div", { key: 'ac8dfe1f99428cdf728027aa5a04d58d497f34f0', class: "search" }, h("slot", { key: '28deb70ef99f4880fba55beb2d2b4b1d3136a240', name: "search" }))), h("xpl-divider", { key: '928d20ef8e74eed4e06351c5dab0c0af9934d2b8', tier: 0, class: "divider top" }), h("article", { key: 'd6460cb29abb33f6676d2e4f517c1f2befa57148', class: "content", tabIndex: 0 }, h("slot", { key: 'b415af9cadedc61407623773fd6b2b1130caf5df', name: "content" })), this.showFooter && (h("footer", { key: 'db6a58277112f134dc150266446cc67c79bc6bc5' }, h("xpl-divider", { key: '129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6', tier: 0, class: "divider bottom" }), h("div", { key: '6c81348acf8ee2bb4c12c2f3207daae564e78aa2', class: "footer" }, h("slot", { key: '8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b', name: "tertiary" }), h("slot", { key: 'e66e45e2d090f45305f818c6496541b737c96aeb', name: "secondary" }), h("slot", { key: '8892bdf075a38237a5c858bfd951e1203fc3c892', name: "primary" })))))));
+        return (h(Host, { key: 'f42f8f576d4e8387511d0cd5e5a24913606dce5e', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '5e80a7f340487ee653d266edc8d7cbd7a1ae5a52', onClick: this.handleClose })), h("aside", { key: 'beb647a98119f53d01a911af9df5ea97babad7c1', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'ef3ba3c61fd5542696c271d0d3d3d40214a2605e', class: "header" }, h("div", { key: 'ed343a1553fb5da4d5db9f6a746f89eadf258f68', class: "title" }, h("slot", { key: '0793234025cb9ed92e45805f74ad85928c71f585', name: "title" }), h("xpl-button", { key: 'b9049478a5ac330b6439fc5a71440db634d51b5e', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '1dad5a0fc6d0b1888a450639b9f40d694b9942db', icon: "x" }))), h("div", { key: 'c5f3f124e81ce4b916af4dd114c8ce9b45d567c7', class: "subtitle" }, h("slot", { key: '41d10f0742562a8dc824b45b2987d45dda76abb4', name: "subtitle" })), h("div", { key: '5a60f3f9e9c5fd86d8262f47eea7b83f64e149a2', class: "search" }, h("slot", { key: '80f950ece315afe975aed51ac8a10804670eb8fe', name: "search" }))), h("xpl-divider", { key: '02e53e01c2f148c8bbd54b086bac669ee65014ba', tier: 0, class: "divider top" }), h("article", { key: '5425462fe1ef6104c5d8c7d5c4c892cf77349d38', class: "content", tabIndex: 0 }, h("slot", { key: '370dd088e84a33112f7f3e1c46341f521430485a', name: "content" })), this.showFooter && (h("footer", { key: 'becd0aea10f8a35af12cedae53814b1c9db92669' }, h("xpl-divider", { key: '5f53e23fbd9330d1b28ba705a7b9438ba098a6a7', tier: 0, class: "divider bottom" }), h("div", { key: '00c0c39b04999a12b47d5fe35bceae2ac8dc1def', class: "footer" }, h("slot", { key: '024d1c72ac7ab44b93608020ef20619b504d6725', name: "tertiary" }), h("slot", { key: '199910e96905946e393fcd600ddc7878701be5fb', name: "secondary" }), h("slot", { key: '55f351a5bb4c18833c5db4408ce01b01c1853fe3', name: "primary" })))))));
     }
     static get is() { return "xpl-slideout"; }
     static get properties() {

package/dist/collection/components/xpl-spotlight/xpl-spotlight.js

@@ -150,6 +150,7 @@ export class Spotlight {
         this.hasFloatingPosition = false;
         this.hasImageSlotContent = false;
         this.hasTitleSlotContent = false;
+        this.dialogLabelId = undefined;
         this.isVisible = false;
         this.resolvedAnchorPosition = 'top-left';
         this.actionLayout = 'default';
@@ -326,6 +327,7 @@ export class Spotlight {
         this.hasBodySlotContent = this.hasSlottedContent('body');
         this.hasImageSlotContent = this.hasSlottedContent('image');
         this.hasTitleSlotContent = this.hasSlottedContent('title');
+        this.dialogLabelId = this.getDialogLabelId();
         if (this.isOpenEnabled) {
             this.previousFocus =
                 document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -356,6 +358,10 @@ export class Spotlight {
         if (this.isOpenEnabled) {
             this.syncTitleSlotIds();
         }
+        const nextLabelId = this.getDialogLabelId();
+        if (this.dialogLabelId !== nextLabelId) {
+            this.dialogLabelId = nextLabelId;
+        }
         if (this.pendingEnterVisible && this.isOpenEnabled) {
             this.pendingEnterVisible = false;
             this.enterVisibleFrameId = requestAnimationFrame(() => {
@@ -524,10 +530,13 @@ export class Spotlight {
             return fromHost;
         }
         const slot = this.el.querySelector('slot[name="title"]');
-        if (!slot) {
-            return null;
+        if (slot && typeof slot.assignedNodes === 'function') {
+            const assigned = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (assigned) {
+                return assigned;
+            }
         }
-        return ((_a = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE)) !== null && _a !== void 0 ? _a : null);
+        return (_a = this.el.querySelector('[slot="title"]')) !== null && _a !== void 0 ? _a : null;
     }
     getDialogLabelId() {
         if (this.hasTitleSlotContent) {
@@ -680,7 +689,7 @@ export class Spotlight {
                 'xpl-spotlight--only-primary-action': showActions && showPrimaryAction && !showSecondaryAction,
                 'xpl-spotlight--only-secondary-action': showActions && showSecondaryAction && !showPrimaryAction,
                 'xpl-spotlight--visible': this.isVisible,
-            }, role: "dialog", "aria-modal": "false", "aria-label": this.getDialogLabelId() ? undefined : 'Tour step', "aria-labelledby": this.getDialogLabelId(), tabindex: -1 }, h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, h("div", { class: "xpl-spotlight__target-outer" }), h("div", { class: "xpl-spotlight__target-inner" })), this.isDismissibleEnabled && (h("div", { class: "xpl-spotlight__dismiss" }, h("xpl-button", { variant: "secondary", size: "sm", iconOnly: true, "aria-label": "Dismiss tour step", onClick: this.handleDismissClick }, h("xpl-icon", { icon: "xmark", size: 16 })))), h("div", { class: "xpl-spotlight__frame" }, h("div", { class: {
+            }, role: "dialog", "aria-modal": "false", "aria-label": this.dialogLabelId ? undefined : 'Tour step', "aria-labelledby": this.dialogLabelId, tabindex: -1 }, h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, h("div", { class: "xpl-spotlight__target-outer" }), h("div", { class: "xpl-spotlight__target-inner" })), this.isDismissibleEnabled && (h("div", { class: "xpl-spotlight__dismiss" }, h("xpl-button", { variant: "secondary", size: "sm", iconOnly: true, "aria-label": "Dismiss tour step", onClick: this.handleDismissClick }, h("xpl-icon", { icon: "xmark", size: 16 })))), h("div", { class: "xpl-spotlight__frame" }, h("div", { class: {
                 'xpl-spotlight__image-container': true,
                 'xpl-spotlight__image-container--empty': !this.hasImageSlotContent,
                 'xpl-spotlight__image-container--hidden': !showImage,
@@ -993,6 +1002,7 @@ export class Spotlight {
             "hasFloatingPosition": {},
             "hasImageSlotContent": {},
             "hasTitleSlotContent": {},
+            "dialogLabelId": {},
             "isVisible": {},
             "resolvedAnchorPosition": {}
         };

package/dist/collection/components/xpl-tab-panel/xpl-tab-panel.js

@@ -10,10 +10,10 @@ export class TabPanel {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: '90f81b56f9d1d482ebe9bfb3e11a9b796bdbc5d2', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: 'b2de2e79c06bde4bde5c99cc3d91045b1e73b72e' })));
     }
     static get is() { return "xpl-tab-panel"; }
     static get properties() {