@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -1,71 +1,102 @@
 import { Host, h } from "@stencil/core";
+let dismissablePropDeprecationWarned = false;
+function warnDismissableDeprecation() {
+    if (dismissablePropDeprecationWarned)
+        return;
+    dismissablePropDeprecationWarned = true;
+    console.warn('[xpl-toast] The "dismissable" prop is deprecated (misspelled). Use "dismissible" instead.');
+}
 export class Toast {
     constructor() {
-        this.variant = 'neutral';
+        this.caption = '';
+        this.dismissible = true;
         this.showIcon = true;
-        this.dismissable = true;
         this.timeout = 8000;
+        this.variant = 'neutral';
         this.handleAnimationEnd = () => {
-            var _a, _b;
-            if ((_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.contains('xpl-toast--dismissed'))
-                (_b = this.el) === null || _b === void 0 ? void 0 : _b.remove();
+            if (this.el?.classList.contains('xpl-toast--dismissed'))
+                this.el?.remove();
         };
         this.getIcon = () => {
             switch (this.variant) {
                 case 'warning':
-                    return h("xpl-icon", { size: 24, icon: "alert-hex" });
+                    return h("xpl-icon", { size: 24, icon: "octagon-warning" });
                 case 'success':
-                    return h("xpl-icon", { size: 24, icon: "check-circle" });
+                    return h("xpl-icon", { size: 24, icon: "circle-check" });
                 default:
-                    return h("xpl-icon", { size: 24, icon: "comment-alt" });
+                    return h("xpl-icon", { size: 24, icon: "message-writing" });
             }
         };
         this.dismiss = () => {
-            var _a;
-            (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('xpl-toast--dismissed');
+            this.el?.classList.add('xpl-toast--dismissed');
         };
     }
+    handleDismissableChange() {
+        if (this.dismissable !== undefined) {
+            warnDismissableDeprecation();
+        }
+    }
+    handleTimeoutChange() {
+        this.scheduleAutoDismiss();
+    }
+    disconnectedCallback() {
+        this.clearAutoDismissTimer();
+    }
+    componentWillLoad() {
+        this.handleDismissableChange();
+    }
     componentDidLoad() {
-        const actionCount = this.actionSlot.children.length;
-        if (actionCount < 1) {
-            setTimeout(() => {
+        this.scheduleAutoDismiss();
+    }
+    get isDismissible() {
+        return this.dismissable ?? this.dismissible;
+    }
+    clearAutoDismissTimer() {
+        if (this.dismissTimerId !== undefined) {
+            clearTimeout(this.dismissTimerId);
+            this.dismissTimerId = undefined;
+        }
+    }
+    scheduleAutoDismiss() {
+        this.clearAutoDismissTimer();
+        const actionCount = this.actionSlot?.children?.length ?? 0;
+        if (actionCount < 1 && this.timeout > 0) {
+            this.dismissTimerId = setTimeout(() => {
                 this.dismiss();
             }, this.timeout);
         }
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
-                this.actionSlot = el;
-            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
+        return (h(Host, { key: '8628e33a84d0ca36d5b99c791cf7860cadae6fb8', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: 'd1ea50362731f7cef97152eac2962f4d4084c514', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7eab4f78d0f8a2f5af12eeb1d74b14c300914841', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: '335be6f702b7300498d2960cb7184fe1fec059b4', class: "xpl-toast__notification" }, h("p", { key: '1178d039190352d0482ae7486711ab2adfd2cc8f', class: "xpl-toast__title" }, h("slot", { key: '75a98536db36c7a140b3d908cbd8f3d2e201ca81', name: "title" })), this.caption !== '' && (h("p", { key: '009bba836fe9abbf34edf4618dd172961e9440fa', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), h("div", { key: '4f47e498ea0c7627d9041a7a2e898fcecff9f59c', class: "xpl-toast__action", ref: (el) => {
+                if (el) {
+                    this.actionSlot = el;
+                }
+            } }, h("slot", { key: '6ad3199d265b1298ea8200ba53690dcc92bdbf92', name: "action" })), this.isDismissible && (h("div", { key: 'b1a1a790a592f5e4c7573c819b0c997a210bd68a', class: "xpl-toast__close" }, h("xpl-button", { key: '2d9ad71fc8f8233f2fc12453ca8268fd5f1d8f74', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
     }
     static get is() { return "xpl-toast"; }
     static get properties() {
         return {
-            "variant": {
+            "caption": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'neutral' | 'warning' | 'success'",
-                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - The variant of the toast"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The caption of the toast, limited to 85 characters."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'neutral'"
+                "attribute": "caption",
+                "defaultValue": "''"
             },
-            "showIcon": {
+            "dismissable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -77,40 +108,37 @@ export class Toast {
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "property",
-                            "text": "{boolean} - Whether or not to show the icon"
+                            "name": "deprecated",
+                            "text": "Misspelled. Use `dismissible` instead. When both are set, `dismissable` wins so\nexisting markup keeps working; `dismissable` is removed in the next major version."
                         }],
-                    "text": ""
+                    "text": "Whether the toast shows a dismiss (close) button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-icon",
-                "defaultValue": "true"
+                "attribute": "dismissable"
             },
-            "caption": {
-                "type": "string",
+            "dismissible": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - The caption of the toast, limited to 85 characters"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Whether the toast shows a dismiss (close) button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "caption"
+                "attribute": "dismissible",
+                "defaultValue": "true"
             },
-            "dismissable": {
+            "showIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -119,18 +147,15 @@ export class Toast {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{boolean} - Whether or not the toast is dismissible"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Whether to show the leading sentiment icon."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dismissable",
+                "attribute": "show-icon",
                 "defaultValue": "true"
             },
             "timeout": {
@@ -144,19 +169,45 @@ export class Toast {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{number} - The timeout for the toast to dismiss in ms, default 8 seconds"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "How long the toast waits before auto-dismissing, in ms. Set to `0` to disable auto-dismiss.\nIgnored when the `action` slot has content."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "timeout",
                 "defaultValue": "8000"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'warning' | 'success'",
+                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The sentiment of the toast."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dismissable",
+                "methodName": "handleDismissableChange"
+            }, {
+                "propName": "timeout",
+                "methodName": "handleTimeoutChange"
+            }];
+    }
 }

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

@@ -16,13 +16,13 @@ export class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'c57e1813c72cba62eed2927763277341bb0d3f77', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '00ba33da343a47681982f6437f1cb45060d70ae9', class: {
+        return (h(Host, { key: '20b5e00613ac0f2567224d3ff2bcd7b7f761a8fc', class: containerClassName }, (this.heading || this.description) && (h("label", { key: 'a41dfe6403c629ef05792ba8dc7f0632fca9ca37', class: {
                 'xpl-label': true,
-                'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '8ec4104abdb16ca405577f061c4cb68580317bc4', class: {
+                'xpl-label--disabled': !!this.disabled,
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'b0e1d30a0f5b358a7f588d3f8f0bc32f440b69df', class: {
                 'xpl-description': true,
-                'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'face83ccc22985b6d0a4c8b9e4c8dcf1d9d6b72a', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: 'aa89637f4b60b050a168fcf02e6702d9ed9bd186', htmlFor: this.id }, this.label)));
+                'xpl-description--disabled': !!this.disabled,
+            } }, this.description)))), h("input", { key: 'a59406c7cccf8a43349841bb060496ce0832823f', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '276ce3ec937627fd9d21f2b3771d9c779c5f91f1', htmlFor: this.id }, this.label)));
     }
     static get is() { return "xpl-toggle"; }
     static get properties() {

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

@@ -12,11 +12,11 @@ export class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
+        return (h(Host, { key: 'd834b3f68a399f33c02e2a7d85623d9fbe2a21e2', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
+            } }, h("div", { key: '54c4638e003685ade49f243f688e3ff5997f8759', class: "toolbar" }, h("p", { key: '92815a7d1b10582742906aefa0ee9ef81311c459', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'dc1b9ee686a57bd7bca45785f90586751770f556', class: "actions" }, h("slot", { key: '2cc26af5467e9ad44962bd1ac65f0b1087f86f7f', name: "actions-left" }), h("slot", { key: 'f5f46662191f52c79f81ffd1ce47a492041c10ad', name: "actions-right" })))));
     }
     static get is() { return "xpl-toolbar"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: '53668e28af956a2293c36eb4991782aee8542378', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'ebbbf0e6b2a848af99d14ddecdb70723bff5181b' })))))));
+        return (h(Host, { key: '834ba80f410bd7ed079b674b6f1d110235aaf826' }, h("div", { key: 'e45a7048339ce835ecabf5ef832a5ef2df6ded70', class: "xpl-tooltip-container" }, h("slot", { key: 'f56272df982aa6dc72ba2bf9776017235223de95' }), h("div", { key: 'c5b1054301d08e1b83da61b565f0116f83f395c7', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (h("div", { key: 'e6a833629cf409644969d9c4da461a2016f2986b', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '7a5893a25978635864ada200aea48660ca90d33c' })))))));
     }
     static get is() { return "xpl-tooltip"; }
     static get properties() {

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

@@ -1,4 +1,8 @@
 import { Host, h } from "@stencil/core";
+import { hasHostNamedSlot } from "../../../utils/light-dom-slots";
+const NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS = [
+    '.xpl-nav-header-menu__right-aside-mobile',
+];
 export class NavHeaderMenu {
     constructor() {
         this.rightAsideMobilePresent = false;
@@ -52,23 +56,25 @@ export class NavHeaderMenu {
         });
     }
     disconnectRightAsideMobileSlotObserver() {
-        var _a;
-        (_a = this.rightAsideMobileSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.rightAsideMobileSlotObserver?.disconnect();
         this.rightAsideMobileSlotObserver = undefined;
     }
     syncRightAsideMobileSlotPresent() {
-        const has = this.el.querySelector('[slot="right-aside-mobile"]') != null;
+        const has = hasHostNamedSlot(this.el, 'right-aside-mobile', {
+            hostTag: 'xpl-nav-header-menu',
+            projectionRegionSelectors: NAV_HEADER_MENU_RIGHT_ASIDE_MOBILE_REGIONS,
+        });
         if (has !== this.rightAsideMobilePresent) {
             this.rightAsideMobilePresent = has;
         }
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (h(Host, { key: 'c2a9e2904ae2cd06462f7e2d4407ac3e34ded34e', class: {
+        return (h(Host, { key: '36df50ceb427be007b8da6c4e6154ab0267e7e6b', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (h("div", { key: '0b7c1b081ac1e73b95bf36724e83511c27e522be', class: "xpl-nav-header-menu__profile" }, h("div", { key: '77ac13de474f5508b5bae03aba09f782a0a05cbc', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '58722b17d64c8cffe7a38b81f30f885a26b0b19e', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'ad7aa885518ee8c205cc3f0e1c84a24b3e486335', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e8c6cdb4e57b02d8b9591eef07a9f0458b73acaa', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'bb884eeb89b4de9d45cb4a7466cc2d7aac90cf6f', name: "right-aside-mobile" })), h("div", { key: '4fa5347923a9f9db10e8875e9ec00407b843263c', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '694d33b2fe8b1cfa302de845a15aa24fdb33fc62' }))));
+            } }, hasProfile && (h("div", { key: '5906352d9c6580f96cb3e1ba3ae841b04c136a27', class: "xpl-nav-header-menu__profile" }, h("div", { key: '38ad80fe95f2ea56e12f3dfeea32af734f31aafd', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: 'a58f2ab162da92c5afbfaf01234748a6478a61db', class: "xpl-nav-header-menu__username", title: this.username }, this.username)), this.email && (h("div", { key: 'd91f764a3b4278937d1bac6ed670f1e2abf899b0', class: "xpl-nav-header-menu__email", title: this.email }, this.email))))), h("div", { key: '78fade2c6cc2ec049b40ca3093f77855b46ee7db', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: '9715e86a06f642f1b0455e43f12fc83c1fdc20f8', name: "right-aside-mobile" })), h("div", { key: 'c1893f276e93629ff8dd96f807579b2b991ea884', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: '23218885442af87a956216af71b598c2eb478eff' }))));
     }
     static get is() { return "xpl-nav-header-menu"; }
     static get properties() {

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

@@ -1,5 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { TimerManager } from "../../../utils/lifecycle";
+import { TimerManager, isBrowser } from "../../../utils/lifecycle";
+import { TOP_NAV_MOBILE_MQ } from "../top-nav-constants";
 import { TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS, TOP_NAV_ITEM_HOVER_OPEN_MQ, } from "./top-nav-item-constants";
 const TIMER = {
     hasDropdownSync: 'hasDropdownSync',
@@ -15,6 +16,7 @@ export class TopNavItem {
         this.hasActiveDescendant = false;
         this.hasDropdown = false;
         this.isLeadingIconSlotPresent = false;
+        this.isMobileViewport = false;
         this.hostListitemRole = false;
         this.isTrailingIconSlotPresent = false;
         this.active = false;
@@ -59,9 +61,12 @@ export class TopNavItem {
             if (isLinkMode && e.key === ' ') {
                 e.preventDefault();
                 const anchor = this.el.querySelector('.xpl-top-nav-item__inner');
-                anchor === null || anchor === void 0 ? void 0 : anchor.click();
+                anchor?.click();
             }
         };
+        this.onMobileViewportChange = () => {
+            this.isMobileViewport = this.mobileMq?.matches ?? false;
+        };
         this.handleMouseEnter = () => {
             if (!this.hasDropdown || !this.hoverModeActive()) {
                 return;
@@ -97,8 +102,11 @@ export class TopNavItem {
             this.broadcastCloseOtherDropdownHosts();
     }
     connectedCallback() {
-        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        if (isBrowser() && typeof window.matchMedia === 'function') {
             this.hoverOpenMq = window.matchMedia(TOP_NAV_ITEM_HOVER_OPEN_MQ);
+            this.mobileMq = window.matchMedia(TOP_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onMobileViewportChange);
+            this.isMobileViewport = this.mobileMq.matches;
         }
         this.syncHostListitemRole();
         this.syncHasDropdownFromDom();
@@ -108,6 +116,8 @@ export class TopNavItem {
     disconnectedCallback() {
         this.timers.dispose();
         this.hoverOpenMq = undefined;
+        this.mobileMq?.removeEventListener('change', this.onMobileViewportChange);
+        this.mobileMq = undefined;
         this.disconnectDropdownSlotObserver();
         this.disconnectListitemContextObservers();
         const doc = this.el.ownerDocument;
@@ -117,7 +127,6 @@ export class TopNavItem {
     componentWillLoad() {
         this.syncHostListitemRole();
         this.syncHasDropdownFromDom();
-        this.syncDropdownDocListeners();
     }
     componentWillRender() {
         this.disconnectDropdownSlotObserver();
@@ -171,15 +180,13 @@ export class TopNavItem {
         });
     }
     disconnectDropdownSlotObserver() {
-        var _a;
-        (_a = this.dropdownSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.dropdownSlotObserver?.disconnect();
         this.dropdownSlotObserver = undefined;
     }
     disconnectListitemContextObservers() {
-        var _a, _b;
-        (_a = this.parentListitemContextObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentListitemContextObserver?.disconnect();
         this.parentListitemContextObserver = undefined;
-        (_b = this.selfListitemContextObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.selfListitemContextObserver?.disconnect();
         this.selfListitemContextObserver = undefined;
     }
     connectListitemContextObservers() {
@@ -204,7 +211,7 @@ export class TopNavItem {
             const leftPrimaryListHost = isTopNavLeftAside
                 ? parent.querySelector('.xpl-top-nav__left-primary')
                 : null;
-            const observeTarget = leftPrimaryListHost !== null && leftPrimaryListHost !== void 0 ? leftPrimaryListHost : parent;
+            const observeTarget = leftPrimaryListHost ?? parent;
             this.parentListitemContextObserver.observe(observeTarget, {
                 attributes: true,
                 attributeFilter: ['role'],
@@ -224,6 +231,9 @@ export class TopNavItem {
         });
     }
     syncDropdownDocListeners() {
+        if (!isBrowser()) {
+            return;
+        }
         const doc = this.el.ownerDocument;
         doc.removeEventListener('click', this.onDocClickCapture, true);
         doc.removeEventListener('keydown', this.onDocKeyDownCapture, true);
@@ -258,8 +268,10 @@ export class TopNavItem {
         }
     }
     getNavDropdownBroadcastRoot() {
-        var _a, _b, _c;
-        return ((_c = (_b = (_a = this.el.closest('xpl-top-nav-menu')) !== null && _a !== void 0 ? _a : this.el.closest('xpl-nav-header-menu')) !== null && _b !== void 0 ? _b : this.el.closest('xpl-top-nav')) !== null && _c !== void 0 ? _c : this.el.ownerDocument);
+        return (this.el.closest('xpl-top-nav-menu') ??
+            this.el.closest('xpl-nav-header-menu') ??
+            this.el.closest('xpl-top-nav') ??
+            this.el.ownerDocument);
     }
     broadcastCloseOtherDropdownHosts() {
         const root = this.getNavDropdownBroadcastRoot();
@@ -271,16 +283,14 @@ export class TopNavItem {
         });
     }
     hoverModeActive() {
-        var _a, _b;
-        return this.openMode === 'hover' && ((_b = (_a = this.hoverOpenMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false);
+        return this.openMode === 'hover' && (this.hoverOpenMq?.matches ?? false);
     }
     focusTriggerAfterEscape() {
         this.timers.scheduleCoalesced(TIMER.focusTriggerAfterEscape, () => {
-            var _a;
             if (!this.el.isConnected) {
                 return;
             }
-            (_a = this.el.querySelector('.xpl-top-nav-item__inner')) === null || _a === void 0 ? void 0 : _a.focus();
+            this.el.querySelector('.xpl-top-nav-item__inner')?.focus();
         });
     }
     static isInternalRenderedHostChild(el) {
@@ -289,9 +299,8 @@ export class TopNavItem {
     }
     hasNonDropdownLightDomChild() {
         return Array.from(this.el.childNodes).some((node) => {
-            var _a;
             if (node.nodeType === Node.TEXT_NODE) {
-                return Boolean((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+                return Boolean(node.textContent?.trim());
             }
             if (node.nodeType === Node.ELEMENT_NODE) {
                 const child = node;
@@ -305,15 +314,14 @@ export class TopNavItem {
         });
     }
     getInnerAriaLabel() {
-        var _a, _b, _c;
-        if ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())
+        if (this.label?.trim())
             return undefined;
         if (this.hasNonDropdownLightDomChild())
             return undefined;
-        const custom = (_b = this.itemAriaLabel) === null || _b === void 0 ? void 0 : _b.trim();
+        const custom = this.itemAriaLabel?.trim();
         if (custom)
             return custom;
-        if (((_c = this.icon) === null || _c === void 0 ? void 0 : _c.trim()) || this.isLeadingIconSlotPresent)
+        if (this.icon?.trim() || this.isLeadingIconSlotPresent)
             return 'Navigation item';
         return undefined;
     }
@@ -324,7 +332,7 @@ export class TopNavItem {
         if (el.getAttribute('slot') === 'right-aside-mobile')
             return false;
         const parent = el.parentElement;
-        if ((parent === null || parent === void 0 ? void 0 : parent.getAttribute('role')) === 'list')
+        if (parent?.getAttribute('role') === 'list')
             return true;
         if (parent != null && parent.tagName.toLowerCase() === 'xpl-nav-header-menu') {
             return true;
@@ -333,7 +341,7 @@ export class TopNavItem {
             return true;
         }
         if (el.getAttribute('slot') === 'left-aside' &&
-            (parent === null || parent === void 0 ? void 0 : parent.tagName.toLowerCase()) === 'xpl-top-nav' &&
+            parent?.tagName.toLowerCase() === 'xpl-top-nav' &&
             parent.querySelector('.xpl-top-nav__left-primary[role="list"]') != null) {
             return true;
         }
@@ -345,11 +353,10 @@ export class TopNavItem {
             this.hostListitemRole = next;
     }
     renderLabelContent() {
-        var _a;
         if (!this.label) {
             return h("slot", null);
         }
-        const description = (_a = this.description) === null || _a === void 0 ? void 0 : _a.trim();
+        const description = this.description?.trim();
         if (!description) {
             return (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label));
         }
@@ -369,7 +376,7 @@ export class TopNavItem {
             return (h("span", { class: "xpl-top-nav-item__trailing" }, h("slot", { name: "trailing-icon" })));
         }
         if (this.hasDropdown) {
-            return (h("span", { class: "xpl-top-nav-item__trailing" }, h("xpl-icon", { icon: "chevron-down" })));
+            return (h("span", { class: "xpl-top-nav-item__trailing" }, h("xpl-icon", { icon: this.isMobileViewport ? 'chevron-right' : 'chevron-down' })));
         }
         return null;
     }
@@ -378,15 +385,25 @@ export class TopNavItem {
         const ariaCurrent = this.selected ? 'page' : undefined;
         const ariaExpanded = this.hasDropdown ? (this.open ? 'true' : 'false') : undefined;
         const ariaLabel = this.getInnerAriaLabel();
-        const shared = Object.assign(Object.assign({ class: 'xpl-top-nav-item__inner', tabIndex, 'aria-current': ariaCurrent, 'aria-expanded': ariaExpanded, 'aria-haspopup': this.hasDropdown ? 'true' : undefined, 'aria-controls': this.hasDropdown ? this.dropdownPanelId : undefined }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), { onClick: this.handleClick, onKeyDown: this.handleKeyDown });
+        const shared = {
+            class: 'xpl-top-nav-item__inner',
+            tabIndex,
+            'aria-current': ariaCurrent,
+            'aria-expanded': ariaExpanded,
+            'aria-haspopup': this.hasDropdown ? 'true' : undefined,
+            'aria-controls': this.hasDropdown ? this.dropdownPanelId : undefined,
+            ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+            onClick: this.handleClick,
+            onKeyDown: this.handleKeyDown,
+        };
         const useAnchor = this.href != null && !this.hasDropdown;
         if (useAnchor) {
-            return (h("a", Object.assign({}, shared, { href: this.href }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+            return (h("a", { ...shared, href: this.href }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
         }
-        return (h("button", Object.assign({}, shared, { type: "button" }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
+        return (h("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
     }
     render() {
-        return (h(Host, Object.assign({ key: '5de7a361dd1f3e0aaa3f98ebb8013118cb5c1a22', class: {
+        return (h(Host, { key: 'f895d73fc0f4c07150e9cd1c34d7b78a338a2032', class: {
                 'xpl-top-nav-item': true,
                 'xpl-top-nav-item--active': this.active,
                 'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
@@ -394,7 +411,7 @@ export class TopNavItem {
                 'xpl-top-nav-item--has-dropdown': this.hasDropdown,
                 'xpl-top-nav-item--selected': this.selected,
                 dark: true,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: 'e076a46dab0d877fdac2eadf09c1fa1bdc97b9bd', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '3a6c88fe606672b09b45bb5d8a22d05b26e84e30', name: "dropdown" })))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (h("div", { key: '3ec121421a45b3e5ef00f3fe76be80c910759f02', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '715393a7ba3474c1afc9e0aa29276335537021e5', name: "dropdown" })))));
     }
     static get is() { return "xpl-top-nav-item"; }
     static get properties() {
@@ -582,6 +599,7 @@ export class TopNavItem {
             "hasActiveDescendant": {},
             "hasDropdown": {},
             "isLeadingIconSlotPresent": {},
+            "isMobileViewport": {},
             "hostListitemRole": {},
             "isTrailingIconSlotPresent": {}
         };