@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -1,13 +1,33 @@
 import { v4 as uuid } from "uuid";
 import { Fragment, h, Host, } from "@stencil/core";
 import throttle from "lodash.throttle";
+import { isBrowser } from "../../utils/lifecycle";
+let measureContext;
+function getMeasureContext() {
+    if (!isBrowser()) {
+        return null;
+    }
+    if (measureContext === undefined) {
+        measureContext = document.createElement('canvas').getContext('2d');
+        if (measureContext) {
+            measureContext.font =
+                "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+        }
+    }
+    return measureContext;
+}
 function tagWidth(text) {
-    const context = document.createElement('canvas').getContext('2d');
-    context.font = "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+    const context = getMeasureContext();
+    if (!context) {
+        return 0;
+    }
     return context.measureText(text).width + 44;
 }
 function getDisplayValue(choice) {
-    return choice.label || choice.value;
+    return choice.label || choice.value || '';
+}
+function choiceKey(choice) {
+    return choice.value || choice.label || '';
 }
 function flattenChoices(choices) {
     return choices.flatMap((choice) => choice.groupName && choice.options ? choice.options : [choice]);
@@ -36,15 +56,23 @@ export class Select {
                 this.keepFocus = true;
         };
         this.handleTagRemove = (tagToRemove) => {
-            const isItemMatch = (item) => ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.value) && item.value === tagToRemove.value) ||
-                ((tagToRemove === null || tagToRemove === void 0 ? void 0 : tagToRemove.label) && item.label === tagToRemove.label);
-            this.choicesState = this.choicesState.map((choice) => {
-                var _a;
-                return (Object.assign(Object.assign({}, choice), { isSelected: isItemMatch(choice) ? false : choice.isSelected, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: isItemMatch(option) ? false : option.isSelected }))) }));
-            });
+            const isItemMatch = (item) => (tagToRemove?.value && item.value === tagToRemove.value) ||
+                (tagToRemove?.label && item.label === tagToRemove.label);
+            this.choicesState = this.choicesState.map((choice) => ({
+                ...choice,
+                isSelected: isItemMatch(choice) ? false : choice.isSelected,
+                options: choice.options?.map((option) => ({
+                    ...option,
+                    isSelected: isItemMatch(option) ? false : option.isSelected,
+                })),
+            }));
         };
         this.handleDropdownScroll = (e) => {
-            const { scrollTop, scrollHeight, clientHeight } = this.dropdown.querySelector('.xpl-dropdown-list');
+            const list = this.dropdown?.querySelector('.xpl-dropdown-list');
+            if (!list) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = list;
             const atTop = scrollTop === 0;
             const atBottom = scrollTop + clientHeight >= scrollHeight;
             if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
@@ -63,7 +91,7 @@ export class Select {
     }
     handleValueStateChange(newValue) {
         this.selectChange.emit(newValue);
-        this.changeEvent.emit(this.mode === 'single' ? newValue : !(newValue === null || newValue === void 0 ? void 0 : newValue.length) ? [] : newValue.split('|'));
+        this.changeEvent.emit(this.mode === 'single' ? newValue : !newValue?.length ? [] : newValue.split('|'));
         if (this.customDisplayValue && this.container !== null) {
             const customDisplayElements = this.container.querySelectorAll('.custom-display-value');
             customDisplayElements.forEach((el) => {
@@ -80,28 +108,35 @@ export class Select {
         this.dropdownStateChange.emit(newValue);
     }
     initializeChoicesState() {
-        return this.choices.map((choice) => {
-            var _a;
+        return (this.choices ?? []).map((choice) => {
             const valueToCompare = typeof this.selectedValues === 'string'
                 ? [this.selectedValues]
                 : this.selectedValues;
-            return Object.assign(Object.assign({}, choice), { isSelected: choice.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(choice.value || choice.label)), options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: option.isSelected || (valueToCompare === null || valueToCompare === void 0 ? void 0 : valueToCompare.includes(option.value || option.label)) }))) });
+            return {
+                ...choice,
+                isSelected: choice.isSelected || valueToCompare?.includes(choiceKey(choice)) === true,
+                options: choice.options?.map((option) => ({
+                    ...option,
+                    isSelected: option.isSelected || valueToCompare?.includes(choiceKey(option)) === true,
+                })),
+            };
         });
     }
     maybeTruncateChoices() {
-        var _a, _b;
+        if (!isBrowser())
+            return;
         if (this.mode === 'single' || !this.truncate)
             return;
-        const containerWidth = (_a = this.container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        const containerWidth = this.container?.getBoundingClientRect().width;
         let visibleChoices = 0;
         let visibleChoicesWidth = 0;
-        const actualNumList = (_b = flattenChoices(this.choicesState)) === null || _b === void 0 ? void 0 : _b.filter((a) => a.isSelected);
+        const actualNumList = flattenChoices(this.choicesState)?.filter((a) => a.isSelected);
         if (!actualNumList.length)
             return;
         const actualNumSelected = actualNumList.length;
         actualNumList.forEach((_, i) => {
             visibleChoicesWidth += tagWidth(getDisplayValue(actualNumList[i]));
-            if (visibleChoicesWidth > containerWidth - 140) {
+            if (visibleChoicesWidth > (containerWidth ?? 0) - 140) {
                 return null;
             }
             visibleChoices += 1;
@@ -114,8 +149,7 @@ export class Select {
         this.visibleChoices = visibleChoices;
     }
     closeDropdown() {
-        var _a;
-        if (!((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+        if (!this.dropdown?.isOpen) {
             return;
         }
         this.dropdown.isOpen = false;
@@ -127,9 +161,9 @@ export class Select {
             return '';
         }
         if (this.mode === 'single') {
-            return selectedChoices[0].value || selectedChoices[0].label;
+            return choiceKey(selectedChoices[0]);
         }
-        return selectedChoices.map((choice) => choice.value || choice.label).join('|');
+        return selectedChoices.map((choice) => choiceKey(choice)).join('|');
     }
     update() {
         this.value = this.calculateValue();
@@ -140,10 +174,10 @@ export class Select {
             return null;
         return (h("label", { class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
+                'xpl-label--disabled': !!this.disabled,
             }, htmlFor: this.id }, this.label, this.description && (h("small", { class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
+                'xpl-description--disabled': !!this.disabled,
             } }, this.description))));
     }
     renderSelectedTags() {
@@ -163,7 +197,7 @@ export class Select {
     renderError() {
         if (!this.error)
             return null;
-        return (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("xpl-icon", { icon: "alert-circle" }), this.error));
+        return (h("label", { class: "xpl-input-error", htmlFor: this.id }, h("xpl-icon", { icon: "circle-warning" }), this.error));
     }
     componentWillLoad() {
         this.choicesState = this.initializeChoicesState();
@@ -176,9 +210,8 @@ export class Select {
         }
     }
     handleKeyDown(e) {
-        var _a;
         if (e.key === 'Escape' &&
-            (this.active || ((_a = this.container) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)))) {
+            (this.active || this.container?.contains(document.activeElement))) {
             this.closeDropdown();
         }
     }
@@ -186,20 +219,26 @@ export class Select {
         this.handleResizeThrottled();
     }
     componentDidLoad() {
-        requestAnimationFrame(() => {
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+        }
+        this.truncateRafId = requestAnimationFrame(() => {
+            this.truncateRafId = undefined;
             this.maybeTruncateChoices();
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.handleResizeThrottled) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.handleResizeThrottled?.cancel();
+        if (this.truncateRafId !== undefined) {
+            cancelAnimationFrame(this.truncateRafId);
+            this.truncateRafId = undefined;
+        }
     }
     handleDropdownTrigger() {
-        var _a, _b;
         if (this.disabled) {
             return;
         }
-        const prevState = (_b = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
+        const prevState = this.dropdown?.isOpen ?? false;
         const nextState = !prevState;
         const e = this.triggerDropdown.emit({
             prevState,
@@ -214,35 +253,38 @@ export class Select {
     }
     async reset() {
         this.closeDropdown();
-        this.choicesState = this.choicesState.map((choice) => {
-            var _a;
-            return (Object.assign(Object.assign({}, choice), { isSelected: false, options: (_a = choice.options) === null || _a === void 0 ? void 0 : _a.map((option) => (Object.assign(Object.assign({}, option), { isSelected: false }))) }));
-        });
+        this.choicesState = this.choicesState.map((choice) => ({
+            ...choice,
+            isSelected: false,
+            options: choice.options?.map((option) => ({
+                ...option,
+                isSelected: false,
+            })),
+        }));
     }
     render() {
-        var _a, _b, _c, _d;
         const selectedChoices = flattenChoices(this.choicesState).filter((choice) => choice.isSelected);
-        const displayedValue = ((_a = selectedChoices[0]) === null || _a === void 0 ? void 0 : _a.label) || ((_b = selectedChoices[0]) === null || _b === void 0 ? void 0 : _b.value);
+        const displayedValue = selectedChoices[0]?.label || selectedChoices[0]?.value;
         const isTextTruncated = selectedChoices.length > 1 &&
             this.visibleChoices < Infinity &&
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (h(Host, { key: '1428590871e33aa2b506904114caa4b36d08e9f9', class: {
+        return (h(Host, { key: 'b080c68630c2c0c6bfeffb6ce27c9b9363898ecc', class: {
                 'xpl-select': true,
-                'xpl-select--disabled': this.disabled,
+                'xpl-select--disabled': !!this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
-                [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
+                [this.classNames ?? '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), h("div", { key: '02766a897e7e1152fc7e0a65c561ac8b25cd2ce4', class: {
+            } }, this.renderLabel(), h("div", { key: 'c2913a9da7988d4e24fd788718637bcebd93fcb6', class: {
                 'xpl-input': true,
-                'xpl-input--disabled': this.disabled,
-                'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: 'd18740165a8c8a3334603500ad4b633783274935', class: "xpl-input-wrapper" }, h("button", { key: 'a54e65c565ace5276a72d1f1cb6ac9cccbcf3f2e', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+                'xpl-input--disabled': !!this.disabled,
+                'xpl-input--error': this.error !== undefined,
+            } }, h("div", { key: '58ea7fdb31c591b2726258d786ca5550219bcd89', class: "xpl-input-wrapper" }, h("button", { key: 'c4c2b2f0a90cd4ef407b8797fd65b86062387678', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, h("div", { key: 'fca29be85e2655a50f9ed0e1619c7de9b7220321', class: {
+            }, type: "button" }, h("div", { key: '7ddc58167d4363991c92d90ee6e0881f04bc725f', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -262,8 +304,8 @@ export class Select {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: 'c58b026d3e2831c832c3bc54489525119af70e8f', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: 'c0f1a6e4be933f05c5ba88ed20a3ccebeaf895c5', ref: (el) => {
-                this.dropdown = el;
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '8640f1e46263c802edf0e9b18f53d2eb6b2a78a3', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (h("xpl-dropdown", { key: '6fb8d97e175894715a6dbc6ed17bc5b15829ed13', ref: (el) => {
+                this.dropdown = el ?? null;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
                 if (options && options.length > 0) {
@@ -271,7 +313,7 @@ export class Select {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: '48958ae33322efe0e3de08eb9da2baac981e58a2', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: '734ef739b61de3320ce777994853cb90ab8271d2', type: "hidden", name: this.name, value: this.value })));
     }
     static get is() { return "xpl-select"; }
     static get properties() {

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

@@ -0,0 +1,35 @@
+export function getHostSlottedElements(host, slotName, hostTagName) {
+    const direct = Array.from(host.children).filter((child) => child.getAttribute('slot') === slotName);
+    if (direct.length > 0) {
+        return direct;
+    }
+    const relocated = Array.from(host.querySelectorAll(`[slot="${slotName}"]`)).filter((node) => node.closest(hostTagName) === host);
+    if (relocated.length > 0) {
+        return relocated;
+    }
+    const slotEl = Array.from(host.querySelectorAll(`slot[name="${slotName}"]`)).find((s) => s.closest(hostTagName) === host);
+    if (slotEl && typeof slotEl.assignedNodes === 'function') {
+        return slotEl
+            .assignedNodes({ flatten: true })
+            .filter((node) => node.nodeType === Node.ELEMENT_NODE);
+    }
+    return [];
+}
+export function hasHostSlottedContent(host, slotName, hostTagName) {
+    return getHostSlottedElements(host, slotName, hostTagName).length > 0;
+}
+let sectionChildrenIdCounter = 0;
+export function ensureSideNavSectionChildrenId(host, existing) {
+    if (existing) {
+        return existing;
+    }
+    const fromDom = host.querySelector('.xpl-side-nav-section__children')?.id;
+    if (fromDom) {
+        return fromDom;
+    }
+    if (host.id) {
+        return `${host.id}-children`;
+    }
+    sectionChildrenIdCounter += 1;
+    return `xpl-side-nav-section-children-${sectionChildrenIdCounter}`;
+}

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: 'ff3b2d318760011f01eb6fc3f2a7aefb8e4ff216', class: "xpl-side-nav-header-item__content" }, leading, h("span", { key: '8675686f88cba081281fa76ffcbd9b1b9f121cac', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
+        return (h(Host, { key: '1a35eb9ef7530a17b3adc06ebe8b06dc1adc6fa9', 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: '9aa4038c1fd52b62a0ea393b4cd60f94dc299beb', class: {
+        return (h(Host, { key: '33de33212fc2c0fe5ed3ae6cd8aba38178052a03', 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: '3e8f5a31a9d65ba35b699cee901795f733a915d9', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '30d431f2d0cc3286421815e1fe0b43b59cbb56a2', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'b5e24e70a35121b27a853d5178017927ebbf4baf' }))))));
+            }, "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: 'd9e6ea08b992177a943eb43e64702deee74a95d8', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '7a5709e3c20d569fbc7ab1425280096dc21cb40f', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: '883d0336ad81eb78b52dab740440191e57f92618' }))))));
     }
     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",