@xplortech/apollo-core 2.10.0 → 2.11.0

package/dist/cjs/xpl-avatar_54.cjs.entry.js

@@ -3,6 +3,7 @@
 var index = require('./index-BaXVr8ux.js');
 var v4 = require('./v4-_2BfiRUa.js');
 var index$1 = require('./index-BvmWjxWc.js');
+var lifecycle = require('./lifecycle-Bf3QwiVa.js');
 
 const LEGACY_STATUS_TO_BADGE = {
     active: 'green',
@@ -169,7 +170,7 @@ const Backdrop = class {
         this.relative = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b2d74c6cd60e419b212078d16258a9cbd5716149', class: {
+        return (index.h(index.Host, { key: '7d5a73e7d7927828e0cb1a7cdca6648c4512cc5a', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,
@@ -206,7 +207,7 @@ const Badge = class {
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (index.h(index.Host, { key: 'c9595f3e4d3d9e60567818b393eed6523167ebca' }, index.h("div", { key: '725533575abf1cc96546f4c0beb9c7d02fca435e', class: className }, index.h("span", { key: 'd8f32af9c1b05b07d72ec9fa60f0039899a7863e', class: "xpl-badge__label" }, index.h("slot", { key: '848e2bb6d6755cca1ab7060023a81e115f6d4a48' })))));
+        return (index.h(index.Host, { key: '3a2ab519bb627a1e46bc7686c6aafdcb3c789822' }, index.h("div", { key: 'e9ebf0d6a9a6a6f516065ceb969aca5f68cbb3ee', class: className }, index.h("span", { key: '1bd6735a1a67a9720424833a213fcde9e5e6db46', class: "xpl-badge__label" }, index.h("slot", { key: '397cb4768204c4b4a2dd7cd85534270a165776d8' })))));
     }
 };
 
@@ -271,13 +272,13 @@ const Banner = class {
         const actionState = this.getActionButtonState();
         const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
         const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
-        return (index.h(index.Host, { key: '9d4ced7103ad43590be34ae643e90e998d826d2c', class: {
+        return (index.h(index.Host, { key: '6d137a4577f93942bcb41b3b2f67f3d851bee454', class: {
                 'xpl-banner': true,
                 'xpl-banner--section': this.isSection,
                 [`xpl-banner--${this.appearance}`]: true,
                 'xpl-banner--truncate-desc': this.truncateDesc,
                 'xpl-banner--no-icon': this.isSection && !this.hasIcon,
-            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (index.h("div", { key: 'd7c698d6da5711ef23d624b6cae03e9a0764b8c7', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: '01e3c3cd3e28a09943754972112f5ecef61c2e42', icon: this.getIcon(), size: 24 }))), index.h("div", { key: 'b95abb8d1609a97d869fbd7b88124a5e5e1b45df', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'a792cda8b66f549522d6288330005ff60e5cca3f', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: '6529492113bd3f893ec0cfb8387dbd58701d99c4', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: '14b20dc26f2cf98acd8baac75802dba11eaa84da', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '44bf1a434eaa7d8a629beb64ffc9d097118d8c09', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: '958284fccbb12b89192d3211476bbaceb31ee16a', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: 'a59aaf2f9b48db433f699877a2259c8587f7aa9a', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '3a374616b00743d3ee66e9f2fce50027e21ebb25', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (index.h("div", { key: 'e854bc2ca363a23e3e6cb9eb512886c325e09362', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: '14a0916310e6e0b68f9a36b4e1714cee015ad22f', icon: this.getIcon(), size: 24 }))), index.h("div", { key: 'bea8f5cafe66e649926aa0ee634b71ffa0f1b73e', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'f18ae9e7d4014211eea3a160fb05945149705832', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: 'e36c00dadf6bd0d35b88c9a091d140573e6b6677', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: 'dda19df805050c93d5c5ea8214f97084a5b0c0eb', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '5bd3047d1b8250ed28a7720fb09f316a3b45bae1', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: 'c0f0a32b69384194e4033ae85eebc788e005a8af', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: '721faa946e9fc896a6bafafd8450d81f50e982ed', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '4c27dbd8b394839ed98f5b4e2d4720eba1b0184f', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
 };
 
@@ -290,7 +291,7 @@ const BreadcrumbItem = class {
     `;
     }
     render() {
-        return (index.h(index.Host, { key: '183fd6614da5188a84d5dc7ce9d9f2d5144e7f4b', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: '416621372ac59874f8d136ba3194f097f487eae2', role: "none" }, index.h("slot", { key: 'a0fcee52d63596c6e96a94ebd9e069f4275cf996' })), index.h("span", { key: 'b076324da264cfbf9efd97c92a73b12517dd6429', innerHTML: this.chevron })));
+        return (index.h(index.Host, { key: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, index.h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), index.h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', innerHTML: this.chevron })));
     }
 };
 
@@ -299,7 +300,7 @@ const Breadcrumbs = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'dc04f3dbc02d0e52efd258ed653e236e3a3ef8c0' }, index.h("nav", { key: '87a8ae67ad49e7eff110dac3b98f818aa7bc7bbd', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '80122b0a41e6b9542e1560de325266a3f27ddc86', role: "list" }, index.h("slot", { key: '7aa415c279281b0566aaf0e6f943afc5ff698e8a' })))));
+        return (index.h(index.Host, { key: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, index.h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, index.h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
     }
 };
 
@@ -356,7 +357,7 @@ const Button = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '2f4d6c6964aee895a81cff28401c3e48895954e8', class: {
+        return (index.h(index.Host, { key: '4fa90ae10b235af3fbfadb40097c5cc238e40dc6', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -389,14 +390,14 @@ const Checkbox = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'a0eae3b6c390a83ddc1eacea1b0d98a08df9d614', class: {
+        return (index.h(index.Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'bbe0a186b0184229ac1090bbb7d0354c01cb7b62', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), index.h("label", { key: 'ab9374abf1c8578df2e1177755afd495f245dcb2', class: {
+            } }, index.h("input", { key: 'badfc1e403ba5b51b757823354c4cec86f678116', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), index.h("label", { key: 'b56888525a7b3d9544d8595b71d1ffe36f00e7b8', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, index.h("slot", { key: '28ef92d6f0cd46c50a797131fc3f0ea1dcaaa751' }), this.description && (index.h("small", { key: '87e25deaad3fd000b4dd313e07f7317365f8db07', class: {
+            }, htmlFor: this.id }, index.h("slot", { key: 'a5f06411725e10f5e5fafc33ff5e8f4adfec9e5b' }), this.description && (index.h("small", { key: '16ac47d9316e4a78f732cb3c0851efd8eaf903f2', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -442,7 +443,7 @@ const Choicelist = class {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (index.h(index.Host, { key: 'b2a2b4630df394470daa56346215ad1193727557', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: 'd2329582e74d40946d23ae522b40130b1d780522', class: {
+        return (index.h(index.Host, { key: 'a5ced1a4f1e3e5323dbc247c66ddf5ad489edc5f', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: '70f4738e8f5d1e1a72858d139eb4a3b531973449', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {
@@ -471,7 +472,7 @@ const ContentArea = class {
         this.size = 'wide';
     }
     render() {
-        return (index.h(index.Host, { key: '9ae6e297af2b7cf5b40ae9848a1479d6e87b6a3e' }, index.h("main", { key: '2ca4359f4090262b7186689207b4725883e5378e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '6e4e1e2947eb4e7e8d5d9201b48074cd9cb102ed', class: "xpl-content-area" }, index.h("slot", { key: 'bf8de84eb947b3ce40fd5df93169f382d3a896cf' })))));
+        return (index.h(index.Host, { key: '926cdfb1b6e52baabfb46bac6d837c5f1ba45183' }, index.h("main", { key: '71dacea3a70c90ae0471a1ec3c39add237faa119', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '5e53fe46cf9dc459d4a9d1f0540464b8bd695d8a', class: "xpl-content-area" }, index.h("slot", { key: '2f74936219cf75dccd583ee01a173807f0f80079' })))));
     }
 };
 
@@ -480,7 +481,7 @@ const Dashboard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e3736f9e707de77addac539a4e7f0950133d0e08' }, index.h("dl", { key: 'de1add10d2f37c0a541d2f60f7156cf920eabd69', class: "xpl-dashboard" }, index.h("slot", { key: 'acd2becab0a555bf2599d0b2db4ebe0c9d744744' }))));
+        return (index.h(index.Host, { key: '1eb93f83a05cfe198aed91b0d8771bdbe6e7aaee' }, index.h("dl", { key: 'bdb8f39b30d318ae25a203ac75966f12a9299b35', class: "xpl-dashboard" }, index.h("slot", { key: 'caf043e38777ac0a397782957f0936bb34436f63' }))));
     }
 };
 
@@ -517,8 +518,8 @@ const DataCard = class {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (index.h(index.Host, { key: '6220a2a6ba1ac0744ba62e701c015964c05bdea9', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '44da16abf81bc72a9c777f19d7c22ab998f55e94', class: headerClasses }, index.h("header", { key: '4ac3524629d31f3e74a245eef3e4ed6fc3a6832a' }, !!this.leadingIcon && this.icon && (index.h("span", { key: '53f7476c16eee3432e43a6bdebf744caeb9f9829', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: 'af9ed04389ba00e4d0c79f978c1364a0530b1db7', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: '164396b94252374a1978cadf336ca74685fe9ba4', name: "title" }, this.name)), this.link && (index.h("span", { key: '31ce9874f295b1fef5705a28d81365d66a67a18b', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f5d169eeb150ed2eaa663ca1388e1075e61f6b7b', icon: "chevron-right", size: 16 })))), index.h("dd", { key: '59711740ae613b61ab5ae463cbfc2aaed500fdc9', class: "xpl-data-card__body" }, index.h("div", { key: '35571a65469ba1c413114a50233340057f5df200', class: "xpl-data-card__left" }, index.h("span", { key: 'b1409661fc43dea4126e423d5dc74fe4b0a5ef5f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: '634b386799ed06de06ca212005d20e6f79c54124', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: '9e88749b9c2efd65d22ec92881eaf316103ddb97', class: "xpl-data-card__right" }, index.h("slot", { key: '467388943d1c8a6bbfb334e6ab763dc7e92e59c8', name: contentSlot }))))));
+        return (index.h(index.Host, { key: 'cbf0c9eb79fbd3e66c683e821e9b992d46d5ec1a', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '92bc8a02b1acfa3c080a2a975d43118be54f10d5', class: headerClasses }, index.h("header", { key: 'f6a0baa73ab0e9d3a6eb9252acba54677a1083dc' }, !!this.leadingIcon && this.icon && (index.h("span", { key: 'dad99548c0ded82140b345e9887747c31ee9f6c7', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: 'd591758d2ce1647ea67f03a27e4ae2efd29e4652', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: '07760d38b11971d96d7841c9897aa13481ea234c', name: "title" }, this.name)), this.link && (index.h("span", { key: '6ac3587f2ab1375cee605b22fe515e2c9a489e72', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '160ebeeedc59a31e0ea3480dd393ec4623afb831', icon: "chevron-right", size: 16 })))), index.h("dd", { key: 'dcf0703823e9f58f71a112a83de3d65cd43e1ae1', class: "xpl-data-card__body" }, index.h("div", { key: 'd7551579d17cfebed3dac59d32b56eb166afb530', class: "xpl-data-card__left" }, index.h("span", { key: 'c5c412c76f9785de5ff8686db3dcb71540b79b1f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: 'b33a9a133cf0a18deaccf6e3772ab1a797f9fa1f', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: 'e9dc031341b49ebf121cbe8cc081df6978aa13ad', class: "xpl-data-card__right" }, index.h("slot", { key: '37c8414e9dc60052f1d5a69d86ece17b7cdbc1da', name: contentSlot }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -538,7 +539,7 @@ const Divider = class {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (index.h(index.Host, { key: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, index.h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, index.h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
+        return (index.h(index.Host, { key: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, index.h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, index.h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
     }
 };
 
@@ -2636,7 +2637,7 @@ const Dropdown = class {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = index.h("slot", { key: '859e13193ab2db2f10197aaf8b9699a177d480c6', name: "options" });
+            listContent = index.h("slot", { key: '7a604ed002d4c412eb709aa7c3ef1a9e80f614ed', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -2644,18 +2645,18 @@ const Dropdown = class {
             const start = Math.min(this.virtualStart, total);
             const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
             const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
-            listContent = (index.h("li", { key: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+            listContent = (index.h("li", { key: 'd7730538dfae58a6efc6a8971e0078b28fc5b9de', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
         }
         else {
             listContent = options.map((option) => renderOption(option));
         }
-        return (index.h(index.Host, { key: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (index.h(index.Host, { key: '282d3bc09a8ce0e63d55bbc9707936afe0efae01', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
                 'xpl-dropdown--virtualized': shouldVirtualize,
-            }, role: "listbox" }, index.h("slot", { key: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), index.h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, index.h("slot", { key: '977cfb27b24bcecaf22587bd2e6350ad52743cad', name: "header" }), index.h("ul", { key: '46274999327ffdb9749a012b839ef124df4d72d2', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
@@ -2709,7 +2710,7 @@ const DropdownGroup = class {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (index.h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (index.h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (index.h(index.Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, index.h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), index.h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
+        return (index.h(index.Host, { key: 'e6326e88bf725b9f3f9c2701dbb6e62a185ad2e7', role: "group", "aria-label": groupName }, index.h("li", { key: '92b0a065e228bf368fc8a6214d7d3d86c986f4dd', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '60cda98e80262dfd23b5fe0b18370d8b6245d39a', label: groupName }), index.h("ul", { key: '7a7c186e05a04286650d7292e156deb41638f703', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'da798e46d297ec28a0880cf04e4f0e20220ab28a', name: "options" })))));
     }
 };
 
@@ -2718,7 +2719,7 @@ const DropdownHeading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || index.h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
+        return (index.h(index.Host, { key: 'e4444b617fe160dbf259f4ecc2aafd6166859dce', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '1e1e37499c0add5b53fcd0a836f97fa5b9e1a9bd' }, this.label || index.h("slot", { key: 'c310120a37646452e989db2ead01d77a89b96f0d', name: "heading" }))));
     }
 };
 
@@ -2775,11 +2776,11 @@ const DropdownOptionCpnt = class {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (index.h(index.Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
+        return (index.h(index.Host, { key: '66ffacb152e80f270877a189488048ef6b36b7af', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && index.h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { key: '274fa639d506ef3feb5bafc3f0b21ed8bf80e95a', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: 'e7f63ede84adca57d99baa06dc1555d3afacd02c', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: 'cc0874abba079616e8516d366981a38ddef550b1', name: "option" }), subtitle && index.h("span", { key: '37cd186edb0de3f4c33b9faa2dfa983424a011bd', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -2854,7 +2855,7 @@ const HeaderAccordion = class {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (index.h(index.Host, { key: 'ec426d05bbf030c8e782e7e74fda505bc8b9011a', class: "xpl-header-accordion" }, index.h("div", { key: 'b9da9063757f65ab682f542dd138f3f8f8dc471f', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '8b97b3e36f49549dcd18978628bfde93f75a084e', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '7bdf4043d478bb1c04f44de14717ac3753236e1a', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '0a6197fd9b5dabff14f1da4137d8a99c7a4cbc93', name: "title" }), index.h("xpl-icon", { key: '5a74ba13feb88a46df377f255eb134d5b609be53', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: '8d048d3480f0185ed34440c3e6d84befb3cf4dee', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'fa374cd9feba5ef3eb72d50f027651dc84f80ec8', name: "content" }))));
+        return (index.h(index.Host, { key: '5a1f1085ff8351162fc87a30e939035ec81795fc', class: "xpl-header-accordion" }, index.h("div", { key: 'dd3e3b0a441b380e28fb898283e93d53d7347866', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '6550eb878d0f55262beb1ee114ea54801037ad16', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '80e0b49c5d52866293eac2aef91bbe97d4a8ad96', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '9a29e3496f29f6179aae2c122e17db09943e2067', name: "title" }), index.h("xpl-icon", { key: 'c3fddf66a6c41353240adb706da7faf6231caa57', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: 'e1ffea5a3a456b5556d67f42326ec17eb80fe305', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: '7c4e2677463ad9bbd1adcafc95692bdd95a09c0b', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -16853,10 +16854,10 @@ const Icon = class {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (index.h(index.Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, index.h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, index.h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (index.h(index.Host, { key: '81c2fcdfacbdb3cc34b1bd870a13041a3b3720c8' }, index.h("figure", { key: 'd8bc04651492fb705fdc6a10cc44a19013da078b', class: wrapperClasses }, index.h("span", { key: '8c9d18ade708bbf3caf4e1fce9779680ee9f6892', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), index.h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), index.h("figcaption", { key: 'd26da1d1df59a9aa414c50bcfb9861d860a6ae65' }, this.icon, " icon"))));
     }
 };
 Icon.style = xplIconCss();
@@ -17014,13 +17015,13 @@ const Input = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (index.h(index.Host, { key: '6a032f3ec4c23c85bb9f34606beff282ce35d762', class: {
+        return (index.h(index.Host, { key: '909cf5bbf56456a5bc27e5a3cb6a662ada8df1a7', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (index.h("label", { key: 'd4462b1d843acafd2f8762610ba77c638c072407', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '0f351ea2720977c299b4f166d12a6315ea6ee54b' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: '05603b97ba86ee23e52a726f31b8c51630e5e703', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: 'd411dee63f5754c6f56992412d9f671979e8bdc9', icon: "alert-circle", size: 16 }), index.h("span", { key: '39d3b5c9c853bc8986e4854542056d018c649a8a' }, this.error)))));
+            } }, this.label && (index.h("label", { key: '0391385b4f19a7a4e36e0a42f4bac9e0400fd7df', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '5724a1710c660297a31cbc37b46b68a0e837e583' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: 'ea1f4fe026d00c4119df392df786648f46e21e4b', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: '42c279d5e037da8178c4db4e4b934150ddc43a42', icon: "alert-circle", size: 16 }), index.h("span", { key: '461f9c09aaa8642df9645e856fa10a312572054c' }, this.error)))));
     }
     get el() { return index.getElement(this); }
 };
@@ -17390,16 +17391,16 @@ const InputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (index.h(index.Host, { key: 'eb7a6f1f77a5d184c05a7825f9f20829b8112d49', class: "xpl-input-color" }, index.h("xpl-popover", { key: '5f1588d21649cbbdfcadb0ab2bd46f848c7fc2d8', disabled: this.disabled, display: "menu" }, index.h("div", { key: 'cecec4d250e2c3b26fc364436f2d16fb97162dff', slot: "trigger" }, index.h("div", { key: '02a4945abec58618cb116eb04bca1c4672f16a4f', class: {
+        return (index.h(index.Host, { key: '9700bba0a5c9b7cd11135a21167e5e06463483b5', class: "xpl-input-color" }, index.h("xpl-popover", { key: '486c2fc5660d7e7c60b7922fa4363174baa7892e', disabled: this.disabled, display: "menu" }, index.h("div", { key: 'c51bd4c77381c46726bf32c319f69611eba845d1', slot: "trigger" }, index.h("div", { key: '9a78cf317854ce56532d49c551d1e1041daf1484', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, index.h("span", { key: '622be07c8fe6de7c5d714a8961146ff53160247d', class: "xpl-input-color__color", style: {
+            } }, index.h("span", { key: 'a78d2b771ad17897820805f1f5d1e265cdd6cbfa', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: 'fd14c6b7aad4e33977008cf11b5cbff2352aab80', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (index.h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (index.h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (index.h("xpl-icon", { key: '2a176659e06f5f971b1de14c9e6f2978a766dd35', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), index.h("div", { key: 'ad85b32a641a3bf0face2efa81fe14de17777fdf', class: "xpl-input-color__menu" }, index.h("div", { key: 'caaee0b4bf18c0c3dbc72745167df475b0cc91cc', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), index.h("div", { key: '4cfadf2209a0d453f8a1ecc74a343d63b48c5b36', class: "xpl-input-color__menu" }, index.h("div", { key: '5acdd216cf4e1714ec493a53c0a974d6d25e0c49', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -17407,9 +17408,9 @@ const InputColor = class {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '34867bf1cbca3e4d56552e02ba99a112c061be64', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '3070aa4d152d18944a7942dc7298538be432fb2c', class: "xpl-input-color__grid" }, index.h("input", { key: '557445a1167af6ebfb786fbe390b63167ac0c2bf', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, index.h("div", { key: '519a19802a049f1c47fe9acd8ca074c9679cb667', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '4c6cc466a3ba89897f0b59cce99835f9a2bc842a', class: "xpl-input-color__grid" }, index.h("input", { key: 'e32fa17e45e231c5d3492c8900feb643ab36f206', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), index.h("input", { key: '86cabdd053207c6073592b46a85fe74ca74942fb', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), index.h("input", { key: '52ca6f9ae33a4129b0b050b7c2c2b8f74616fe5d', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -17419,9 +17420,9 @@ const InputColor = class {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), index.h("div", { key: 'bb9ee49e36d78441380248bdb021443f9abbb250', class: "xpl-input-color__preview", style: {
+            } }), index.h("div", { key: 'a1cf7bde4bd0d2fc7b19b60cff878f56aeb70e2e', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), index.h("div", { key: '08bc820781d2de091036289b50f9f5f3810db61b', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), index.h("div", { key: '3a82739b45a8ac2be0e732ea27cff2a583503eaf', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (index.h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;
@@ -17544,16 +17545,16 @@ const InputDate = class {
         parent.removeChild(wrapper);
     }
     render() {
-        return (index.h(index.Host, { key: 'c2707549e3285693ce4c7e0449e047be90640504', class: {
+        return (index.h(index.Host, { key: 'c038443e47f6b246c2c91ff27a5eb6afcf1c1967', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
                 'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
-            } }, index.h("div", { key: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '125e566456a2de4d75fe38fee50a78de886b8009', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+            } }, index.h("div", { key: '45b9b4ebc53293dcc4c0d527df6d2ef234ac2509', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'b112ce85a056e1090391ee9e626c66da47cac750', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: 'e3f218c1b205660ec7eb153396aa358e0769e829', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), index.h("xpl-icon", { key: '34c346be1a3c66d4e5eab1882426ef0691c8b6cd', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: '1d2ab5b80daad9964e364a069f548d5250067f84', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), index.h("xpl-icon", { key: 'f20a83ef7b788aae76ebb6f76ba786eff4c71aeb', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: '0aad7e2ec12c88b27e94de978580f6b35b318fce', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17602,18 +17603,18 @@ const InputFile = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '579d1ec1094bc5b1aeec622996694728fb1facca', class: {
+        return (index.h(index.Host, { key: '42d8f9897e024eb89dc7568f3b99f5a395131294', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, index.h("span", { key: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', class: {
+            } }, index.h("span", { key: '90d5962d5c72ed675cfb18444d814d26a231e4a6', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-text-callout" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: 'ad648187fbd71bdccd99db542460e85715507f76', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: 'edf302f553f738ecc35e0ce64f73e4b6713b76e7', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-text-callout" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (index.h("span", { key: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (index.h("span", { key: '56f627241c314b9018cd963ea55a997364b63abf', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: '47180dbed43ab7f3291faeadbe0ddce261d75f25', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -18101,21 +18102,21 @@ const InputPhone = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '894f6acde4dea6d5640d4e51bc4e9bbe82d9d3ea', class: {
+        return (index.h(index.Host, { key: '1b29d31aca23d7047c36a910bfce85aa54784377', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, index.h("div", { key: 'c3f32f61ea3d344932721d0ef166db91a18110dc', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: '4896e1dfa9e2fd2b0ff7472d45999b8aa36dd5f0', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (index.h("xpl-icon", { key: '1a321bb5d7c82b6e9f7a3028ef68543de7b4180e', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '8820c57560cd5874eed4da9bbd4aeb77cba0e1cc', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '36bdd356e1a396927e8c2791f0d826970b08fed1', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '4557ddea12cc4dcf0f8d992b97fd89b3d799591e', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: '6dbff61ee5fdc564f685f112f7cc3659b3687490', ref: (el) => {
+            } }, index.h("div", { key: '6b7fa8dab343d6236a5de65b73cb731da1997695', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: 'cb785ee5ad4da9ea7ee316b7895bf2ca3992a6ae', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (index.h("xpl-icon", { key: '0edbeee2da23758c9335f30b01b2a5f24ece73a3', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '310ae67c8eb2fc30c550782011921051492fae54', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '84abb24d097c61bfd76be3e5bbe1ea7bd9718d30', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '29975e649c40580f7e126bfc2f72be2a07f6c813', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: '55c85bc4fd439a9913b5b58a8fbbc3f1a328cac9', ref: (el) => {
                 this.inputEl = el;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (index.h("button", { key: 'c7ca36fdc2cee73de3a29f6019c8a35a74bba654', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: '4e5aad566c1052e72f6e7ba10ca9a98f97421626', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '0f81b1d30e3f0b52bfd9085ffb37b6c5733c6e8b', ref: (el) => {
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (index.h("button", { key: '2b05b045d36937e3c85ff93308a75bededd56f4e', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: '0834f75780e6cba9e5fef6e4f8613d89dad42216', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '1e19c6663b14de3f5fd9f740417fc6f342a47177', ref: (el) => {
                 this.dropdownRef = el;
             }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
                 this.dropdownOpen = e.detail;
-            }, "aria-label": "Country" }, index.h("div", { key: '8a73a67eba2d6a02b6f828f21c451c843782a0c8', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '1cef63c8fdb66aa8288af0a0fafe72701573a82a', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, index.h("div", { key: '910ee42b45fcfea4b5670ca300c6cd7d9a15c709', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: 'd7b79cd82d6f1dcd4ed57938f7c4389925426b0c', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 var _a;
                 this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
-            } }, index.h("xpl-icon", { key: 'fa51061eb3617c3f55485cff16dbc1e307d98f08', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, index.h("xpl-icon", { key: '7e8a462d8c0949421d0668b3b289a7c7e7169dbe', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -18234,7 +18235,7 @@ const InputSearch = class {
         return shell;
     }
     render() {
-        return (index.h(index.Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
+        return (index.h(index.Host, { key: 'bbbcb91c290fec3f0ad0f7df9cb9e43c699f3ab2', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,
@@ -18418,11 +18419,11 @@ const InputTime = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '6ed0e8da81a96e0e4e7078a7477c9a4ee92532ba', class: {
+        return (index.h(index.Host, { key: 'aef2e65955381ed89dd800e889bd20469a201172', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, index.h("xpl-input", { key: 'bae0f7e9b9e3f14b5d780a0300ef672da9301596', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (index.h("xpl-dropdown", { key: 'cd8ae7e4c7d130bdbf44aeb2f806b3c9a490d8bb', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, index.h("xpl-input", { key: '90f85f631d876714e65134e964ec521bce1d7948', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (index.h("xpl-dropdown", { key: 'f42c653946921b15cb0c1b24db01d299c22406c1', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }
@@ -18436,55 +18437,6 @@ const InputTime = class {
     }; }
 };
 
-class TimerManager {
-    constructor() {
-        this.timeouts = new Set();
-        this.intervals = new Set();
-        this.rafs = new Set();
-    }
-    setTimeout(callback, delay) {
-        const id = setTimeout(() => {
-            this.timeouts.delete(id);
-            callback();
-        }, delay);
-        this.timeouts.add(id);
-        return id;
-    }
-    clearTimeout(id) {
-        clearTimeout(id);
-        this.timeouts.delete(id);
-    }
-    setInterval(callback, delay) {
-        const id = setInterval(callback, delay);
-        this.intervals.add(id);
-        return id;
-    }
-    clearInterval(id) {
-        clearInterval(id);
-        this.intervals.delete(id);
-    }
-    requestAnimationFrame(callback) {
-        const id = requestAnimationFrame((time) => {
-            this.rafs.delete(id);
-            callback(time);
-        });
-        this.rafs.add(id);
-        return id;
-    }
-    cancelAnimationFrame(id) {
-        cancelAnimationFrame(id);
-        this.rafs.delete(id);
-    }
-    dispose() {
-        this.timeouts.forEach((id) => clearTimeout(id));
-        this.timeouts.clear();
-        this.intervals.forEach((id) => clearInterval(id));
-        this.intervals.clear();
-        this.rafs.forEach((id) => cancelAnimationFrame(id));
-        this.rafs.clear();
-    }
-}
-
 let xplListItemsPropDeprecationWarned = false;
 function getListItemFromComposedPath(e) {
     var _a, _b;
@@ -18501,7 +18453,7 @@ const List = class {
         this.listItems = [];
         this.nextAutoItemIdSeq = 0;
         this.radioName = `xpl-list-radio-${Math.random().toString(36).slice(2, 11)}`;
-        this.timers = new TimerManager();
+        this.timers = new lifecycle.TimerManager();
         this.keyboardReorderItemId = null;
         this.reorderLiveMessage = '';
         this.items = [];
@@ -18856,12 +18808,12 @@ const List = class {
         var _a, _b, _c;
         const ariaLabelledBy = ((_a = this.labelledBy) === null || _a === void 0 ? void 0 : _a.trim()) ? this.labelledBy.trim() : undefined;
         const ariaLabel = !ariaLabelledBy && ((_b = this.label) === null || _b === void 0 ? void 0 : _b.trim()) ? this.label.trim() : undefined;
-        return (index.h(index.Host, { key: '4290084c30b164abb653943a81783c35531d6316', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
+        return (index.h(index.Host, { key: '66c41bf0c252a6ae1e61aea6d8c1c40fc594d8c7', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
             _c.map((item, index$1) => {
                 var _a;
                 const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index$1}`;
                 return (index.h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-            }), index.h("slot", { key: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), this.reorderable ? (index.h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+            }), index.h("slot", { key: '922088a7fe36e8bb2ee905ac79ac845eff101707' }), this.reorderable ? (index.h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -19387,7 +19339,7 @@ const Modal = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b6d5d1c4b2fd755b74d2b138e937cb8f70256e17', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: '972f5031f80eb1c394f7e5be5dc04a604bb91a34' }), index.h("dialog", { key: '544203fa98a61f4f1e41cbffca3c1048fab8e236', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: 'f37cc41033d765577ae3280d2b4969e71aabe369', class: "xpl-modal__header" }, index.h("div", { key: '356a2ba82b16bd1c47813d6589b45a901a108d10', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: '4144c0f94f9760b7ed3379b2a2e7f69e31ef0829', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: 'fd2c48017a620ec83ce0f79d13d18aa2aae57b14', name: "title" }), index.h("xpl-button", { key: 'd6c816ff2a44911333196531641d620a0cafafaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: 'b7c7b6754d0a94f3aa927d390c35faf165b1b776', icon: "x" }))), index.h("div", { key: 'fb96c212c96648434f821c2ec4169fb6499f1230', class: "xpl-modal__subtitle" }, index.h("slot", { key: 'b838fbe968ffdec5f5d71cffde42c02b6bf085f1', name: "subtitle" }))), index.h("div", { key: '7d9230791de065bdbf9703821021ce6230c8b568', class: "xpl-modal__body" }, index.h("slot", { key: '60449861f56680023c79139eb5dc04a2cfe5fbd5', name: "body" })), index.h("div", { key: 'adb79ff548bb3475c7b8bd4fe9bd3b9f2a454f89', class: "xpl-modal__footer" }, index.h("slot", { key: '32148fd7cabc15deb2f40b6706a5e1761dab4cde', name: "tertiary" }), index.h("slot", { key: 'bbacc31d2b03825ab14fb08e0307ac70767c3ebd', name: "secondary" }), index.h("slot", { key: '89f492273b1d71772551c2454bd4bbb56899fe3b', name: "primary" })))));
+        return (index.h(index.Host, { key: 'd1457065d1448b866f21a5a7a903fbc8504567a5', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: '05807b08500c1ba557c9dabe04ca059f3638f36c' }), index.h("dialog", { key: '14f78e63f6e19f83fd159604175381b054848ad6', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: '54cbd855c642bad93f74d8f6f875c32728d8539a', class: "xpl-modal__header" }, index.h("div", { key: 'd0ae962e9ddb8df05eeefd2cd083c0aaf6253814', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: '896dbc9e4c614b456f2b22626c294f86e655f811', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: '859b27499e4ae644c06d376225f56d47b0081dc2', name: "title" }), index.h("xpl-button", { key: '288822a0310d17b13360acb7d358e7b5711fa79f', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: '14181eec31afd43bf07a21f6ae65664ea12f789a', icon: "x" }))), index.h("div", { key: '4d23417d83bdb3312f1c883a367687e1d4fdfa7c', class: "xpl-modal__subtitle" }, index.h("slot", { key: '5db4d5c7997a4a27f7195cdd0ff56d81238835e1', name: "subtitle" }))), index.h("div", { key: 'e17d7805f75d00422d6eaa8148a1f0f3297369df', class: "xpl-modal__body" }, index.h("slot", { key: 'f1f43ce5fce6c1567bf856071b5d283c28a64bbe', name: "body" })), index.h("div", { key: 'c7757cabc4d718a19ee8c91020f20e4437b73d6d', class: "xpl-modal__footer" }, index.h("slot", { key: 'bdcf1d5ca962025e7cdd2368b1dd6117b5dc190a', name: "tertiary" }), index.h("slot", { key: '483ce3eb24f84d4c08a84e97e6e6a9af9829b007', name: "secondary" }), index.h("slot", { key: '7c7ec707d80fecb81a21c997c84a1622370285b0', name: "primary" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -19463,11 +19415,11 @@ const NavHeaderMenu = class {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (index.h(index.Host, { key: '605d14e70deb43e79834d39cb3a078b3298e853a', class: {
+        return (index.h(index.Host, { key: 'c2a9e2904ae2cd06462f7e2d4407ac3e34ded34e', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (index.h("div", { key: '4d7f4ffc4d0391fb3b20db6be3a1c32126f02dfe', class: "xpl-nav-header-menu__profile" }, index.h("div", { key: 'f79f233a7dd322329b4f571b6858d5f6954eb972', class: "xpl-nav-header-menu__info" }, this.username && (index.h("div", { key: '5672342ae08198b52525ca2fe75d0d489e678c6b', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (index.h("div", { key: '90f13a468d30f939b3e99f932dc96746d99c4196', class: "xpl-nav-header-menu__email" }, this.email))))), index.h("div", { key: '70ae77baf3570e700639e7d8d387c5e4df7739c4', class: "xpl-nav-header-menu__right-aside-mobile" }, index.h("slot", { key: 'e9e1170bc8648f3676e083c7aa5c03d16e09b2ed', name: "right-aside-mobile" })), index.h("div", { key: '225c538dc72259da900406eb3fc6f222f93292e1', class: "xpl-nav-header-menu__slot", role: "list" }, index.h("slot", { key: '7631ce2ee1e6acdf4fdc9d54671e186de597de63' }))));
+            } }, hasProfile && (index.h("div", { key: '0b7c1b081ac1e73b95bf36724e83511c27e522be', class: "xpl-nav-header-menu__profile" }, index.h("div", { key: '77ac13de474f5508b5bae03aba09f782a0a05cbc', class: "xpl-nav-header-menu__info" }, this.username && (index.h("div", { key: '58722b17d64c8cffe7a38b81f30f885a26b0b19e', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (index.h("div", { key: 'ad7aa885518ee8c205cc3f0e1c84a24b3e486335', class: "xpl-nav-header-menu__email" }, this.email))))), index.h("div", { key: 'e8c6cdb4e57b02d8b9591eef07a9f0458b73acaa', class: "xpl-nav-header-menu__right-aside-mobile" }, index.h("slot", { key: 'bb884eeb89b4de9d45cb4a7466cc2d7aac90cf6f', name: "right-aside-mobile" })), index.h("div", { key: '4fa5347923a9f9db10e8875e9ec00407b843263c', class: "xpl-nav-header-menu__slot", role: "list" }, index.h("slot", { key: '694d33b2fe8b1cfa302de845a15aa24fdb33fc62' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -19484,11 +19436,11 @@ const NavItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1653225a63a82d72768a162430f11918d3b57810', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (index.h(index.Host, { key: 'f7494edb113b4eccf244c312447e69248af495ba', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, index.h("slot", { key: 'c04f946780264be513575537ee1041b576e1834f', name: "link" }, index.h("slot", { key: 'cd415288c4caf0c7ffd4906531f858a0e21cbb93', name: "icon" }), index.h("slot", { key: 'a1678415d40e459597738013500a715396b5b759' }))));
+            } }, index.h("slot", { key: 'acde5d80edbead75a558b964954caa18e1cc0c5f', name: "link" }, index.h("slot", { key: '66838cf7e6610e48d7102475cc6463aa65f4651b', name: "icon" }), index.h("slot", { key: 'de185eaab42a425cf82eaaf6883b1472fecb9754' }))));
     }
 };
 
@@ -19574,19 +19526,19 @@ const Pagination = class {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (index.h(index.Host, { key: '48dc3bfd2f81b621c0c4cacd5e8aa43e974a3c2b', class: {
+        return (index.h(index.Host, { key: '7ee32b9506487555cf9c96b8204bc06acff20614', class: {
                 'xpl-pagination': true,
                 'xpl-pagination__with-page-control': this.withPageControl,
                 'xpl-pagination__no-page-control': !this.withPageControl,
-            } }, this.withPageControl && (index.h("div", { key: 'a8eb321da956ac31d62ee6a8e776a9949733310b', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '42688af51596e843faec89c04b99eef0569b9289', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: '276646a15894d4434d72bbe3a9e74fe4ec151d09', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+            } }, this.withPageControl && (index.h("div", { key: 'd0b77c50e30c046df37e806912d9d144066ce8ea', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '5a596a7f2e440f007cc51ffb965f8c6da057bd11', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: '3592c6c2b8efa704536e64bf6ae085f228921573', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
                 this.rowsPerPageSelectRef = el;
-            } }))), index.h("div", { key: '808b1a352b4500e593e9887b9957a292bbc64b18', class: "xpl-pagination__pager" }, index.h("button", { key: '9a18f0e6843deeb1c4efcb3cbb29e8c22ebee923', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: 'd761379de5063bf5739c92f90d1a795ccda03b5f', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: 'cd18e7c9a1d15a6b4a353b32f90bfe646ab321ee', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
+            } }))), index.h("div", { key: '0c4e020f133b9bff31e185fb3ea11d3e98f0ac00', class: "xpl-pagination__pager" }, index.h("button", { key: 'add5b2b91bb1c1d08637bc7e8cf907274126765c', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: 'ca29bdc9acb1f220afb7cbb5a2f1bfc8602c07c9', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: '89244ec17d7e8f10188a6b7b25dde30f9885aef2', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el;
-            } }, index.h("div", { key: '117fa90e904994b44fe86055aea62af0a404904e', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: 'dbd3c30917758594d41fec4a313e204ccbd56e16', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: '4ca90e03195972c79a9a6b09027d8cf594a1dacc', icon: "arrow-right", size: 20 })))));
+            } }, index.h("div", { key: '916de27d7e201ba0920c265109edf2a6e9bd0620', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: '7ddaf9be0ab94e8e0e1fdbdca20e76294d7d2706', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: '37703d9e35a8288bf24c8675e4e973a400f7a0e9', icon: "arrow-right", size: 20 })))));
     }
     static get watchers() { return {
         "currentPage": [{
@@ -19609,11 +19561,11 @@ const XplPanel = class {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (index.h(index.Host, { key: 'e028327c45513aed4bdaf60f230292c3ca427abb', class: {
+        return (index.h(index.Host, { key: 'f7216acfba4419e26d171a24aa64153991841701', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && index.h("div", { key: '131b41a89c2d34ee7e1c9313a8659bc62c5a882a', "aria-hidden": "true", class: "xpl-panel__accent" }), index.h("div", { key: '67e1dae738eb616fa024fda3f64fcf8008c4fbce', class: "xpl-panel__content" }, index.h("slot", { key: '39ec3513aaab2138ae1c7b45dea4e3bc7ef9a9d1' }))));
+            } }, hasAccent && index.h("div", { key: '18f1ed385cb4d29dbe18e7272e779a40a2ead05e', "aria-hidden": "true", class: "xpl-panel__accent" }), index.h("div", { key: 'd0a13066c9c4b472b505ffd7592f882bb886b9a2', class: "xpl-panel__content" }, index.h("slot", { key: '0c8c6495afcbd3a897a6f118e17df75dc7328363' }))));
     }
 };
 
@@ -20276,16 +20228,16 @@ const Popover = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'e6c2991b7550ee3d49d0e6389f0e5734873d2ec9' }, index.h("div", { key: '5feb4134506e40be7f1485913f197b5e976a22eb', class: {
+        return (index.h(index.Host, { key: 'fd4ba66077f4909fe71a47b719fc76e8b0970bcc' }, index.h("div", { key: 'f54d27275be2e332ae72e225197eb76350803db3', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, index.h("span", { key: '0fd0c9ecf34e28f05b1c74cd54b259af985a8f48', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, index.h("span", { key: 'a45378d297636bcb6eddd0ea2927703291f27571', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, index.h("slot", { key: '036625c11df6140ae5e66c5b07d48034d4f85a8c', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: 'dc701c9b71dfc1ac2cd5397928366c807ec12680', class: "xpl-popover__arrow" }, index.h("svg", { key: '714129740bb1ced6b465636e85fa006733d03e20', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'aa489883a369f713b6f04093ed39fe4f91088213', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '1e341b0b3f7be9c4387c3b2560d31f023090b5d8', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: 'fb1ca2715f2bbb0bd32ed532e61da5f2a8aa8b63', class: {
+            } }, index.h("slot", { key: 'e40f33425dede71e45fefca68eed6231f569b6f4', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: '4c6dbd56d3b6c782bdd25c9674df29b92866e55c', class: "xpl-popover__arrow" }, index.h("svg", { key: '6492c5f9ffd7609ed0fb334f515bf5448db9b837', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'e1e92c7c65caece9b89b9b23f6031409cd67312c', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '496097d86300cdd3a09732e3fb5492e8b3e4a292', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: 'ed12d8116e9c230dbe166b4479b19d640849b873', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '365e7a91de4254cc8f8423b1e832d5adeff1490a' })))));
+            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: 'ad827a2a95546d4e3c975cd410ba4067fd69ad04' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -20325,12 +20277,12 @@ const ProgressBar = class {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (index.h(index.Host, { key: '25abe25b042ab5fb4d81246275538abaad3c4086', class: {
+        return (index.h(index.Host, { key: 'bae4b080ca10ce596b7f889fc50b41199bcee67b', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, index.h("div", { key: '926c1407043a98c265dffbaa616b640624671352', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: '78ece9b7848541236ce2ad4309b664204bfb370e', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: '9b673b4ae9aeebb7bebd9a72dc4384383e15227d', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: 'a144dba46c7ae48ad54e9655b4335a253b1bc1bb', class: "xpl-progress-bar__icon" }, this.isError ? (index.h("xpl-icon", { icon: "circle-xmark-1" })) : (index.h("xpl-icon", { icon: "circle-check-1" })))))), index.h("div", { key: 'cf0f7a209c2278e4d1ccf00577457d175abb78bc', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (index.h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, index.h("div", { class: "xpl-progress-bar__indeterminate" }))) : (index.h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (index.h("div", { key: 'ff5b336a3b3a14cb4e0531688705983350f9812f', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, index.h("div", { key: '3e13c35002888a7ea5b4710ec96ea72ab6e8811c', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: 'c41d0c11ef55fc3be48b8007716439a0791245c5', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: 'c680eb355e174bfa3a17b29e64d5d9e8d3699718', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: 'a4d541ee3fa68549dbfa8f371b8d3e5a5d9dcfd0', class: "xpl-progress-bar__icon" }, this.isError ? (index.h("xpl-icon", { icon: "circle-xmark-1" })) : (index.h("xpl-icon", { icon: "circle-check-1" })))))), index.h("div", { key: '24aa03523c672a1604b91da88dae9a58895a412b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (index.h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, index.h("div", { class: "xpl-progress-bar__indeterminate" }))) : (index.h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (index.h("div", { key: '67a687ba35eb5208286833834b1a4e75d64ca47d', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
 };
 
@@ -20391,7 +20343,7 @@ const ProgressIndicator = class {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (index.h(index.Host, { key: '1c545195c093b97f72d81801efc686eb98fec787', class: hostClasses, role: "group", "aria-label": ariaLabel }, index.h("div", { key: '754af5ed292fb0d34c61aec88ccb87f52e2076bf', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (index.h(index.Host, { key: '267a70a3c6ceffe23390abb57a524d5ddb2b53a6', class: hostClasses, role: "group", "aria-label": ariaLabel }, index.h("div", { key: 'd34a875d04fb035cc5cda9c8194135d173f7ebae', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get watchers() { return {
         "steps": [{
@@ -20425,14 +20377,14 @@ const Radio = class {
         return Boolean(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'a8c73f86c07a42b9d44e7778fcac685b6d6ea476', class: {
+        return (index.h(index.Host, { key: 'b25d59aa55a08aa7264e1dadc670b540d3740dfc', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'c63e056408613a586a18e6dac90cd576c604114f', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), index.h("label", { key: 'd2c64304f89a583cae05c111b1a82524c2f130b3', class: {
+            } }, index.h("input", { key: 'df724428d276baf063679829f2b1ffcdcbfbf2b2', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), index.h("label", { key: 'd521ca252872494ed28826721dde6270e441a3a3', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, index.h("slot", { key: '12970b242bb30cf2fd68a73db5c6f3f252262355' }), this.description && (index.h("small", { key: '1224b9d9f183d46a95535216d24150c1141b6cfe', class: {
+            }, htmlFor: this.id }, index.h("slot", { key: '5093a78e1fb18908b700cb90cf932de06a3ce76d' }), this.description && (index.h("small", { key: '8806e9374a812df4db6fa8a9a9e1672abd282299', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -20444,7 +20396,7 @@ const SecondaryNav = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, index.h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, index.h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
+        return (index.h(index.Host, { key: '8137a8f7ecc1682f1b7e64d41f12c70b9030dd4d', class: "xpl-secondary-nav" }, index.h("nav", { key: 'f2f65911a356c4265ee583f37ffeb9f78f12d9b4', "aria-label": "Secondary Nav" }, index.h("slot", { key: '972a51f6d4d59f17a88681f1fbd537ff0dc9fe0b' }))));
     }
 };
 
@@ -20680,21 +20632,21 @@ const Select = class {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (index.h(index.Host, { key: '72887e1c0864e77cf43e502d30a796e32942f643', class: {
+        return (index.h(index.Host, { key: '1428590871e33aa2b506904114caa4b36d08e9f9', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [(_c = this.classNames) !== null && _c !== void 0 ? _c : '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), index.h("div", { key: '2d1aa67dcf1fa9aaa5b51b1eb944958a1741ee45', class: {
+            } }, this.renderLabel(), index.h("div", { key: '02766a897e7e1152fc7e0a65c561ac8b25cd2ce4', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, index.h("div", { key: 'bc34bf6bb4c306753030ec05d011dfe80377256d', class: "xpl-input-wrapper" }, index.h("button", { key: 'f9a1c1ce4014e780cf866f75f8852d0b234e5ccd', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, index.h("div", { key: 'd18740165a8c8a3334603500ad4b633783274935', class: "xpl-input-wrapper" }, index.h("button", { key: 'a54e65c565ace5276a72d1f1cb6ac9cccbcf3f2e', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, index.h("div", { key: '1dbd694fb71a136f578382c7d70e2a2c6077c62c', class: {
+            }, type: "button" }, index.h("div", { key: 'fca29be85e2655a50f9ed0e1619c7de9b7220321', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -20714,7 +20666,7 @@ const Select = class {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: '5fd8e1d7b0be5b3daf4c2daecbb5d6e4f02d7493', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: '312b8917cd407224c0802b8cfc285168c26a8de6', ref: (el) => {
+        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: 'c58b026d3e2831c832c3bc54489525119af70e8f', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: 'c0f1a6e4be933f05c5ba88ed20a3ccebeaf895c5', ref: (el) => {
                 this.dropdown = el;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -20723,7 +20675,7 @@ const Select = class {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), index.h("input", { key: '3c88344463e124f7ed752bd249563f3f8f7b9204', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), index.h("input", { key: '48958ae33322efe0e3de08eb9da2baac981e58a2', type: "hidden", name: this.name, value: this.value })));
     }
     static get watchers() { return {
         "choices": [{
@@ -20940,10 +20892,10 @@ const SideNav = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fe3b0b9e5f9facf3f7fa469a8928d7ed8971e6f5', class: {
+        return (index.h(index.Host, { key: 'a007b689281cf2d2f5c24d7517a478c165c992bf', class: {
                 'xpl-side-nav': true,
                 'xpl-side-nav--open': this.open,
-            } }, index.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 }), index.h("div", { key: '3274980b1cb4867d163e83c80520e44bcc8d0121', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '06ce207917af66ff8f238c6cc85e8a8d5f47efbc', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: 'ce08165951c7b40fc21e846f6dfe7ca44b57326d', class: "xpl-side-nav__section" }, index.h("slot", { key: 'da65836d8006756b3a0d408d343b445a3bccb271', name: "section" })), index.h("div", { key: '93b522d531086a914d2cd53fe859da2436df9552', class: "xpl-side-nav__footer" }, index.h("slot", { key: 'a2cce3bec1d5269316388ede23934d2cfb835cf9', name: "nav-footer" })))), index.h("xpl-backdrop", { key: 'e98662f2e022d9d9edfa16b2c62d3ca40755b829', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
+            } }, index.h("xpl-button", { key: '4828b88c0e14e4202535e19e406def9558533892', 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 }), index.h("div", { key: '193bf28ee1b495f3352e46d255e0488d38f59a03', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '36461f0c57dbe069381aed7d8cad57a484bdc5c6', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: '7e88ee25d63a9489894e54030ec5e943be803bde', class: "xpl-side-nav__section" }, index.h("slot", { key: '2fb0b53cd888824afcd73d1c08f35939e7729b88', name: "section" })), index.h("div", { key: 'ee3beba191a7633a98312f225013db4f05891388', class: "xpl-side-nav__footer" }, index.h("slot", { key: 'e876c45f33e5fd200cbe4a6c5ef6fcd85c43eccd', name: "nav-footer" })))), index.h("xpl-backdrop", { key: '74bef30e9ffb2c3d640e2cab2b2fe328b7f37c52', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -21059,14 +21011,14 @@ const SideNavItem = class {
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (index.h(index.Host, { key: 'd20950311a1dd97fff43eac3908a64a43aa2a332', class: {
+        return (index.h(index.Host, { key: '9aa4038c1fd52b62a0ea393b4cd60f94dc299beb', class: {
                 'xpl-side-nav-item': true,
                 'xpl-side-nav-item--link-disabled': this.link && this.disabled,
             } }, this.link ? (index.h("slot", null)) : (index.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 }, index.h("span", { class: "xpl-side-nav-item__leading" }, index.h("slot", { name: "leading" }, this.icon ? (index.h("xpl-icon", { icon: this.icon, size: 16 })) : null)), index.h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''), (this.hasTrailingSlot || this.hasChildren) && (index.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 }, index.h("slot", { name: "trailing" }, showAutoChevron ? (index.h("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (index.h("div", { key: 'b3aa86bdacae535dae31b93fa6f5013614f682bc', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '91be28afd11a250696e003d0a8abf70f6e8b35c6', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: '1536a898b39fd1f30c26d9d71f79726e377ee8f2' }))))));
+            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, index.h("slot", { name: "trailing" }, showAutoChevron ? (index.h("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (index.h("div", { key: '3e8f5a31a9d65ba35b699cee901795f733a915d9', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '30d431f2d0cc3286421815e1fe0b43b59cbb56a2', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: 'b5e24e70a35121b27a853d5178017927ebbf4baf' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -21086,7 +21038,7 @@ const Skeleton = class {
         this.size = 'custom';
     }
     render() {
-        return (index.h(index.Host, { key: '2cb86d68bd14f87ab1a6467716ec456cc1bfd6a2', class: {
+        return (index.h(index.Host, { key: '6d2a1a9164bb1568663b944f3f4ea66517256528', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -21129,7 +21081,7 @@ const Slideout = class {
         this.handleScroll();
     }
     render() {
-        return (index.h(index.Host, { key: 'f42f8f576d4e8387511d0cd5e5a24913606dce5e', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '5e80a7f340487ee653d266edc8d7cbd7a1ae5a52', onClick: this.handleClose })), index.h("aside", { key: 'beb647a98119f53d01a911af9df5ea97babad7c1', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: 'ef3ba3c61fd5542696c271d0d3d3d40214a2605e', class: "header" }, index.h("div", { key: 'ed343a1553fb5da4d5db9f6a746f89eadf258f68', class: "title" }, index.h("slot", { key: '0793234025cb9ed92e45805f74ad85928c71f585', name: "title" }), index.h("xpl-button", { key: 'b9049478a5ac330b6439fc5a71440db634d51b5e', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '1dad5a0fc6d0b1888a450639b9f40d694b9942db', icon: "x" }))), index.h("div", { key: 'c5f3f124e81ce4b916af4dd114c8ce9b45d567c7', class: "subtitle" }, index.h("slot", { key: '41d10f0742562a8dc824b45b2987d45dda76abb4', name: "subtitle" })), index.h("div", { key: '5a60f3f9e9c5fd86d8262f47eea7b83f64e149a2', class: "search" }, index.h("slot", { key: '80f950ece315afe975aed51ac8a10804670eb8fe', name: "search" }))), index.h("xpl-divider", { key: '02e53e01c2f148c8bbd54b086bac669ee65014ba', tier: 0, class: "divider top" }), index.h("article", { key: '5425462fe1ef6104c5d8c7d5c4c892cf77349d38', class: "content", tabIndex: 0 }, index.h("slot", { key: '370dd088e84a33112f7f3e1c46341f521430485a', name: "content" })), this.showFooter && (index.h("footer", { key: 'becd0aea10f8a35af12cedae53814b1c9db92669' }, index.h("xpl-divider", { key: '5f53e23fbd9330d1b28ba705a7b9438ba098a6a7', tier: 0, class: "divider bottom" }), index.h("div", { key: '00c0c39b04999a12b47d5fe35bceae2ac8dc1def', class: "footer" }, index.h("slot", { key: '024d1c72ac7ab44b93608020ef20619b504d6725', name: "tertiary" }), index.h("slot", { key: '199910e96905946e393fcd600ddc7878701be5fb', name: "secondary" }), index.h("slot", { key: '55f351a5bb4c18833c5db4408ce01b01c1853fe3', name: "primary" })))))));
+        return (index.h(index.Host, { key: '2784d3da5b726f04552fa93289f34ff0347d3e70', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: 'b8978c6811b9d1c175bfaee2296fbcb433c048d4', onClick: this.handleClose })), index.h("aside", { key: '0e4357253aa004531aa86fc2f93fb1332cec089b', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: '132170bf2c8ff6c23e6bc85bce4dc8a2aec0c5d5', class: "header" }, index.h("div", { key: 'a38f7f2a2da8c622a9d2ef53c370560761b87b51', class: "title" }, index.h("slot", { key: 'ba7b485b02bd472a4f64e067cabf5cf6ae0ad1b0', name: "title" }), index.h("xpl-button", { key: '9538bc33599840f7756e747c63d9717cf14a0c58', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '6d6846794afea4053736bc67b3c0c90fb822ca96', icon: "x" }))), index.h("div", { key: 'da9630c9cdc8d9c3e57242c58993f5815052e684', class: "subtitle" }, index.h("slot", { key: 'c923c0cdae7e6f09713592e31216ec10accce39f', name: "subtitle" })), index.h("div", { key: 'c9fc409c7e2c14987b4df6be17d7d2c9a5906100', class: "search" }, index.h("slot", { key: 'b963bc05b745e55bbdc27cc4bb224af97feccdda', name: "search" }))), index.h("xpl-divider", { key: 'e5f9201e96ac5d6b202e3e88edfa07dacfbb3786', tier: 0, class: "divider top" }), index.h("article", { key: '41b424ea94bdc2577b56166f45de2b1addc3a8b4', class: "content", tabIndex: 0 }, index.h("slot", { key: '5d316d1981d44536af9cc5d67ef7fd20f6375ec8', name: "content" })), this.showFooter && (index.h("footer", { key: '3d9c2b22153b6a9057d3c40b98af97d345b9e9c1' }, index.h("xpl-divider", { key: '77e87834d203624cc03ff2b0cf894300c2749094', tier: 0, class: "divider bottom" }), index.h("div", { key: '44737714daf25a087ad2c0d8938f94ec4668b071', class: "footer" }, index.h("slot", { key: '2c0c7b62872fa826ef117a730c92369ba7e340f1', name: "tertiary" }), index.h("slot", { key: '31ac0e95189487b668b3e5c0bd8d414ab7d73f30', name: "secondary" }), index.h("slot", { key: 'a0dd4999caac29b546cd0526e652596937dff83b', name: "primary" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -21966,10 +21918,10 @@ const TabPanel = class {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (index.h(index.Host, { key: '90f81b56f9d1d482ebe9bfb3e11a9b796bdbc5d2', "aria-labelledby": labelledBy, class: {
+        return (index.h(index.Host, { key: 'd1d6b910b84ee0aa483d605d10aaabf662d2efcf', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, index.h("slot", { key: 'b2de2e79c06bde4bde5c99cc3d91045b1e73b72e' })));
+            }, id: panelId, role: "tabpanel" }, index.h("slot", { key: '1fe282e7372fb0353cf1c32db841269aaa3c44a9' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -22104,24 +22056,24 @@ const Table = class {
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (index.h(index.Host, { key: 'b2ed918c3c434b6403fe6d18619d0a1a5bf864bf' }, index.h("div", { key: 'd55accaecba09869f07dcc7030eca5cc1175dd95', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (index.h(index.Host, { key: 'feca62966731c111adc18988af07bd269dd63868' }, index.h("div", { key: 'b585fe5b3161eb7763e4292a7015fb3209a3fa90', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, index.h("table", { key: '6406b92ee6717c80f5f363110fda38fa5bbe61ff', class: {
+            } }, index.h("table", { key: '37930d45de6739b43ff6d541d46d7f960d922716', class: {
                 'xpl-table': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (index.h("thead", { key: '2f89526153301be4ad9ba2f2ec2dac791b4702ae' }, this.columns.map((column, i) => {
+            } }, this.columns && (index.h("thead", { key: '40e9b8bb9cb641a2f89a63a707ecaa3a286fc99d' }, this.columns.map((column, i) => {
             var _a;
             const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
             return (index.h("th", null, index.h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (index.h("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
                     this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (index.h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), index.h("tbody", { key: 'd1c762bc09191ac0b5b84ade9409d87a726f15f4' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
+        }))), index.h("tbody", { key: '99bc5a0fd8b91d040483cc5749490b5319097ab9' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", null, index.h("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("tfoot", { key: '99e0e8cbe768f3c565d5fd6328c6e305483bf3f1' }, this.rowFooterData.map((row) => (index.h("tr", null, row.map((cell) => (index.h("td", null, index.h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("tfoot", { key: '404659d5846461f017e974786ec359473be0a7b6' }, this.rowFooterData.map((row) => (index.h("tr", null, row.map((cell) => (index.h("td", null, index.h("div", { innerHTML: cell })))))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22457,11 +22409,11 @@ const Tabs = class {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (index.h(index.Host, { key: 'a030a35038572d70f3fb2b979adbaa56d77a1d49', class: {
+        return (index.h(index.Host, { key: '712b11ca22e287b8e981c327d1793fbc627c8508', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, index.h("xpl-select", { key: '8260974c68020dea475f6e0780c766abfca94fda', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, index.h("xpl-select", { key: 'ca013d1c4848a13e3210e3e010f90969a70b609f', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -22472,17 +22424,17 @@ const Tabs = class {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), index.h("nav", { key: '73a1e4ad4830b9b22b4eee00bad5793705cf3ac3', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), index.h("nav", { key: 'bbabd600ae5e210b7a3e9cfa9c5938f12ee14e1d', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
                 this.tabChange.emit(event.detail);
-            } }, !isSegment && (index.h("div", { key: '8008620a99470824fe61ea535fb46a3dea75afc3', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (index.h("div", { key: 'fe8c53716bd0fe10b02a22ac3df643aa6627303d', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), index.h("slot", { key: 'be53fe549e5b9c887ad90cbafcc8f95631361fee', name: "heading" })), index.h("div", { key: 'd97b138b5fcb0207684698752ec72c1dcd9464a3', class: "xpl-tabs__panels" }, index.h("slot", { key: 'fe40edbf2c9f20d02d75ab62a142e7df04ef0afd', name: "panel" }))));
+            } })), index.h("slot", { key: '8a1232936ec72a91e4fcd57f1f35f598a337dd99', name: "heading" })), index.h("div", { key: '2ef4b61b894a326bc370a1c7631308b8b13261b5', class: "xpl-tabs__panels" }, index.h("slot", { key: '28c9ccce6482c7cbe9ee46960c65bd59aaacb4b9', name: "panel" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22628,7 +22580,7 @@ const Tag = class {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (index.h(index.Host, { key: '13a500c63b29cb19a53e2abb69f86f62164d79d2', class: {
+        return (index.h(index.Host, { key: '4b8228da443d411561306e790333d676fc3907e3', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -22636,7 +22588,7 @@ const Tag = class {
                 'xpl-tag--dragging': this.isDragging,
                 'xpl-tag--draggable': dragEnabled,
                 'xpl-tag--sm': this.size === 'sm',
-            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (index.h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, index.h("slot", null))) : (index.h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, index.h("slot", null))), this.dismissible && (index.h("button", { key: 'ceb929c98cb7a66390cf1c09b32535696e4d2b04', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, index.h("xpl-icon", { key: '8a5a6f13014334fee2193703674bdfd49710a265', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (index.h("div", { class: "xpl-tag__content xpl-tag", role: "button", tabIndex: 0, draggable: true, "aria-grabbed": String(this.isDragging), onClick: this.handleTagClick, onKeyDown: this.handleContentKeyDown, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd }, index.h("slot", null))) : (index.h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, index.h("slot", null))), this.dismissible && (index.h("button", { key: 'bf634c6b75d1cd2eaadff8e4459b74a097e3f221', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, index.h("xpl-icon", { key: 'fb37896890c9afb56c02a3ff4e62f096c416a569', icon: "xmark", size: 10 })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22686,9 +22638,9 @@ const Toast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8b53818d7882160ab13ba700520c2c54f3d0b630', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '6cc47a618684dacf1031bdacfc6cb9134db659e1', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '2360e3bb5d173d97fb63e3ff2069ef6ac53f2a7d', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: 'e4c318a21bf17d951deade92c9288791b6664a4f', class: "xpl-toast__notification" }, index.h("p", { key: '6697407277294d71106c9429f5822966572c1f06', class: "xpl-toast__title" }, index.h("slot", { key: '108769cc76b1ed7b42ad436885831d9e7fd4412f', name: "title" })), this.caption !== '' && (index.h("p", { key: '7570a85eaebbd9c236841541557324b45c86dab6', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: 'b5f98b93c56f877d6c749c82550aad3b86bb3786', class: "xpl-toast__action", ref: (el) => {
+        return (index.h(index.Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, index.h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, index.h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (index.h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, index.h("slot", { key: 'c2007b4a30836c3a1b071539029c1290875bdd2c', name: "action" })), this.dismissable && (index.h("div", { key: 'f0706d95d8091beb32dfbe1535ebbdfb1ce9a018', class: "xpl-toast__close" }, index.h("button", { key: 'b1415be4d68035d21857f688f16558470cca2f81', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: '61ba3accb69a2637190b5ee3a4f7105fdf896af7', icon: "x" }))))));
+            } }, index.h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (index.h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, index.h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -22702,7 +22654,7 @@ const Tooltip = class {
         this.hideArrow = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'c060588959e22e35117e15925ed57e951b4fe51d' }, index.h("div", { key: '69572a540e2dcf3c819a2af20b6e900ea8d483c9', class: "xpl-tooltip-container" }, index.h("slot", { key: 'b767815cc05aec2ce3e3f0411602659d142ce64f' }), index.h("div", { key: 'eb80138e423992a8b5f8f823029f1a57993e5355', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (index.h("div", { key: '01c556ac6491bca26550dd1dc34689ff09e2d418', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: '8844c7e4b28132fc8a11c1a9ce6920061ae741b4' })))))));
+        return (index.h(index.Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, index.h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, index.h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), index.h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (index.h("div", { key: '53668e28af956a2293c36eb4991782aee8542378', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: 'ebbbf0e6b2a848af99d14ddecdb70723bff5181b' })))))));
     }
 };
 
@@ -22759,6 +22711,7 @@ const TopNav = class {
             this.open = !this.open;
             this.navOpen.emit(this.open);
             if (wasOpen && !this.open) {
+                this.resetMobileCascade();
                 this.focusNavControlAfterClose();
             }
         };
@@ -22918,6 +22871,10 @@ const TopNav = class {
     removeDocEscapeListener() {
         this.el.ownerDocument.removeEventListener('keydown', this.onDocKeyDownEscape, false);
     }
+    resetMobileCascade() {
+        const openItem = this.el.querySelector('.xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open');
+        openItem === null || openItem === void 0 ? void 0 : openItem.closeMenu().catch(() => undefined);
+    }
     scheduleSlotContentSyncFromObserver() {
         if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
             clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
@@ -22941,12 +22898,13 @@ const TopNav = class {
         const wasOpen = this.open;
         this.open = false;
         if (wasOpen && !this.navControl) {
+            this.resetMobileCascade();
             this.navOpen.emit(false);
         }
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '6b22351e62f90d5fec04c0dafa5208d9a495b67b', class: {
+        return (index.h(index.Host, { key: 'a1556bcc2dfc2d35b9b9540a3f0e0d162d547923', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -22954,15 +22912,15 @@ const TopNav = class {
                 'xpl-top-nav--has-brand': this.hasBrand,
                 'xpl-top-nav--has-user-menu': this.hasUserMenu,
                 dark: true,
-            } }, index.h("nav", { key: '5f29a00b93b1affda6aaf900e42cc6ff33f1b90c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, index.h("div", { key: 'fbe9cb0b1bc7d9bf9be1f04e64cb93ff24866879', class: "xpl-top-nav__inner-left" }, this.navControl && (index.h("button", { key: 'b22532e39a57f9a250617aa09e6e0dde6dfeb9e5', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, index.h("xpl-icon", { key: 'a9f7dbb6287d3e11ea5b839bedb8d808c67bcd8e', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (index.h("div", { key: 'c702fc39d186f37901c8c6b4e5d378eaee2faa99', class: "xpl-top-nav__brand-bar" }, index.h("xpl-top-nav-item", { key: '980b470563ee3d4e3e388cd089622041f307cd0b', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (index.h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
+            } }, index.h("nav", { key: '5531a9157af00cbd8b8d5459801ae00337c5e4ec', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, index.h("div", { key: '5257bb97f7c388358820ae85e872644666538304', class: "xpl-top-nav__inner-left" }, this.navControl && (index.h("button", { key: '8e8acb60ee8cac9bf84bb559444fbdcfcee13a10', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, index.h("xpl-icon", { key: '7bafdf086e9df7d4a2333ea9d2fed86de8466912', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (index.h("div", { key: '39fc108bfb4b30a98bc06ca8d12331527708d3ef', class: "xpl-top-nav__brand-bar" }, index.h("xpl-top-nav-item", { key: '7c951eb3c0e349170bb017f6e1d375f3b328653f', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (index.h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
                 ? this.brandName.trim()
-                : 'Brand' })) : this.brandLogoSlotPresent ? (index.h("span", { class: "xpl-top-nav__brand-logo-slot" }, index.h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (index.h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), index.h("div", { key: '0740be056833bd15c798a44c5c3dbe80ed5e15fd', class: {
+                : 'Brand' })) : this.brandLogoSlotPresent ? (index.h("span", { class: "xpl-top-nav__brand-logo-slot" }, index.h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (index.h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), index.h("div", { key: '16fa404db5c59741ec4a4c8c92c6f43f7502e906', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-left': true,
-            } }, index.h("div", { key: 'ff4f4534944dc54df40c289e65a4ab7d75bd572e', class: "xpl-top-nav__left-primary", role: "list" }, index.h("slot", { key: 'fdec30ffc838d7e73788932aa6fef46fac2fe0ab', name: "left-aside" })))), index.h("div", { key: '69d5b669744ff3aeb0c4316f4d5b27b9c461652f', class: {
+            } }, index.h("div", { key: 'd5421d83454aadb4252cc244b24c9d3bf9881c69', class: "xpl-top-nav__left-primary", role: "list" }, index.h("slot", { key: 'c95fcd2f6365dbc03ee4e4e99db15e3460fd5358', name: "left-aside" })))), index.h("div", { key: 'fa5afd226b5eed1468ef066fba956852f7f0d65d', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-right': true,
-            } }, index.h("div", { key: '7ae70d39f31243b77f09af7b0e4327d0bb1b1dfd', class: "xpl-nav-right__list" }, index.h("div", { key: '7bafc8eab226ba0ff77ae98281d4665eb6b75fbe', class: "xpl-top-nav__right-rail" }, index.h("div", { key: '9914028435faebbd3d539d763b71500643017ebc', class: "xpl-top-nav__right-lead" }, index.h("slot", { key: '974117684ec371dc87264bfbc0da5e456adeec9b', name: "right-aside" })), this.hasUserMenu ? (index.h("div", { class: "xpl-top-nav__right-user" }, index.h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (index.h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (index.h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
+            } }, index.h("div", { key: 'd84a6fc492147429d725b49681637a203fc36c35', class: "xpl-nav-right__list" }, index.h("div", { key: '63ef2b0eddef28da05d172bb05b2edd64ad173dd', class: "xpl-top-nav__right-rail" }, index.h("div", { key: '3ead1c8076e1ed51283ec6251c4ed252835457e3', class: "xpl-top-nav__right-lead" }, index.h("slot", { key: '8076be6d9d726a2b380f41077d114b37cdfe15e9', name: "right-aside" })), this.hasUserMenu ? (index.h("div", { class: "xpl-top-nav__right-user" }, index.h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (index.h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (index.h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
                 ? undefined
                 : 'Open account menu' }, this.childAccountLabelText.length > 0
             ? this.childAccountLabelText
@@ -22976,40 +22934,60 @@ const TopNav = class {
     }; }
 };
 
+const TOP_NAV_ITEM_HOVER_OPEN_MQ = '(hover: hover) and (pointer: fine) and (min-width: 768px)';
+const TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS = 150;
+
+const TIMER = {
+    hasDropdownSync: 'hasDropdownSync',
+    postRender: 'postRender',
+    focusTriggerAfterEscape: 'focusTriggerAfterEscape',
+    hoverClose: 'hoverClose',
+};
 const TopNavItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.navItemClick = index.createEvent(this, "navItemClick", 7);
+        this.openChange = index.createEvent(this, "openChange", 7);
+        this.dropdownPanelId = `xpl-top-nav-item-dropdown-${Math.random().toString(36).slice(2, 11)}`;
+        this.hoverOpened = false;
+        this.timers = new lifecycle.TimerManager();
+        this.hasActiveDescendant = false;
         this.hasDropdown = false;
+        this.isLeadingIconSlotPresent = false;
         this.hostListitemRole = false;
-        this.open = false;
+        this.isTrailingIconSlotPresent = false;
         this.active = false;
         this.icon = '';
+        this.open = false;
+        this.openMode = 'click';
         this.selected = false;
         this.onDocClickCapture = (e) => {
-            if (!this.hasDropdown || !this.open) {
+            if (!this.hasDropdown || !this.open)
                 return;
-            }
             const target = e.target;
             if (target && !this.el.contains(target)) {
                 this.open = false;
             }
         };
         this.onDocKeyDownCapture = (e) => {
-            if (!this.hasDropdown || !this.open) {
+            if (!this.hasDropdown || !this.open)
                 return;
-            }
             if (e.key === 'Escape') {
                 e.preventDefault();
                 e.stopPropagation();
                 this.open = false;
+                this.focusTriggerAfterEscape();
             }
         };
         this.handleClick = (e) => {
             if (this.hasDropdown) {
                 e.preventDefault();
                 e.stopPropagation();
-                this.broadcastCloseOtherDropdownHosts();
+                this.timers.clearCoalesced(TIMER.hoverClose);
+                if (this.open && this.hoverOpened && this.hoverModeActive() && e.detail > 0) {
+                    return;
+                }
+                this.hoverOpened = false;
                 this.open = !this.open;
                 return;
             }
@@ -23017,44 +22995,58 @@ const TopNavItem = class {
         };
         this.handleKeyDown = (e) => {
             const isLinkMode = this.href != null && !this.hasDropdown;
-            if (isLinkMode) {
-                if (e.key === 'Enter') {
-                    return;
-                }
-                if (e.key === ' ') {
-                    e.preventDefault();
-                    const anchor = this.el.querySelector('.xpl-top-nav-item__inner');
-                    anchor === null || anchor === void 0 ? void 0 : anchor.click();
-                    return;
-                }
+            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();
             }
-            if (e.key !== 'Enter' && e.key !== ' ')
+        };
+        this.handleMouseEnter = () => {
+            if (!this.hasDropdown || !this.hoverModeActive()) {
                 return;
-            e.preventDefault();
-            this.handleClick(this.syntheticActivationClickFromKeyboard(e));
+            }
+            this.timers.clearCoalesced(TIMER.hoverClose);
+            if (!this.open) {
+                this.hoverOpened = true;
+                this.open = true;
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (!this.hasDropdown || !this.open || !this.hoverOpened) {
+                return;
+            }
+            this.timers.scheduleCoalesced(TIMER.hoverClose, () => {
+                if (!this.hoverOpened || this.el.contains(this.el.ownerDocument.activeElement)) {
+                    return;
+                }
+                this.open = false;
+            }, TOP_NAV_ITEM_HOVER_CLOSE_DELAY_MS);
         };
     }
     onHasDropdownChanged() {
-        if (!this.hasDropdown) {
+        if (!this.hasDropdown)
             this.open = false;
-        }
         this.syncDropdownDocListeners();
     }
+    onOpenChanged(next) {
+        this.openChange.emit(next);
+        if (!next)
+            this.hoverOpened = false;
+        if (next && this.hasDropdown)
+            this.broadcastCloseOtherDropdownHosts();
+    }
     connectedCallback() {
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            this.hoverOpenMq = window.matchMedia(TOP_NAV_ITEM_HOVER_OPEN_MQ);
+        }
         this.syncHostListitemRole();
         this.syncHasDropdownFromDom();
         this.syncDropdownDocListeners();
         this.connectDropdownSlotObserver();
     }
     disconnectedCallback() {
-        if (this.deferredHasDropdownObserverSyncTimeoutId !== undefined) {
-            clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId);
-            this.deferredHasDropdownObserverSyncTimeoutId = undefined;
-        }
-        if (this.deferredPostRenderTopNavItemTimeoutId !== undefined) {
-            clearTimeout(this.deferredPostRenderTopNavItemTimeoutId);
-            this.deferredPostRenderTopNavItemTimeoutId = undefined;
-        }
+        this.timers.dispose();
+        this.hoverOpenMq = undefined;
         this.disconnectDropdownSlotObserver();
         this.disconnectListitemContextObservers();
         const doc = this.el.ownerDocument;
@@ -23078,23 +23070,35 @@ const TopNavItem = class {
             this.open = false;
         }
     }
+    async closeMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.open = false;
+    }
+    async openMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.timers.clearCoalesced(TIMER.hoverClose);
+        this.hoverOpened = false;
+        this.open = true;
+    }
+    async toggleMenu() {
+        if (!this.hasDropdown)
+            return;
+        this.open = !this.open;
+    }
     scheduleHasDropdownSyncFromObserver() {
-        if (this.deferredHasDropdownObserverSyncTimeoutId !== undefined) {
-            clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId);
-        }
-        this.deferredHasDropdownObserverSyncTimeoutId = setTimeout(() => {
-            this.deferredHasDropdownObserverSyncTimeoutId = undefined;
+        this.timers.scheduleCoalesced(TIMER.hasDropdownSync, () => {
             if (!this.el.isConnected) {
                 return;
             }
             this.syncHasDropdownFromDom();
-        }, 0);
+        });
     }
     connectDropdownSlotObserver() {
         this.disconnectDropdownSlotObserver();
-        if (typeof MutationObserver === 'undefined') {
+        if (typeof MutationObserver === 'undefined')
             return;
-        }
         this.dropdownSlotObserver = new MutationObserver(() => {
             this.scheduleHasDropdownSyncFromObserver();
         });
@@ -23148,18 +23152,15 @@ const TopNavItem = class {
         }
     }
     schedulePostRenderTopNavItemWork() {
-        if (this.deferredPostRenderTopNavItemTimeoutId !== undefined) {
-            clearTimeout(this.deferredPostRenderTopNavItemTimeoutId);
-        }
-        this.deferredPostRenderTopNavItemTimeoutId = setTimeout(() => {
-            this.deferredPostRenderTopNavItemTimeoutId = undefined;
+        this.timers.scheduleCoalesced(TIMER.postRender, () => {
             if (!this.el.isConnected) {
                 return;
             }
             this.syncHostListitemRole();
+            this.syncHasDropdownFromDom();
             this.connectListitemContextObservers();
             this.connectDropdownSlotObserver();
-        }, 0);
+        });
     }
     syncDropdownDocListeners() {
         const doc = this.el.ownerDocument;
@@ -23171,35 +23172,54 @@ const TopNavItem = class {
         doc.addEventListener('click', this.onDocClickCapture, true);
         doc.addEventListener('keydown', this.onDocKeyDownCapture, true);
     }
+    hasSlottedChildOwnedByThisHost(slotName) {
+        return Array.from(this.el.querySelectorAll(`[slot="${slotName}"]`)).some((node) => node.closest('xpl-top-nav-item') === this.el);
+    }
     syncHasDropdownFromDom() {
-        this.hasDropdown = !!this.el.querySelector('[slot="dropdown"]');
+        const nextHasDropdown = this.el.querySelector('[slot="dropdown"]') != null;
+        if (nextHasDropdown !== this.hasDropdown) {
+            this.hasDropdown = nextHasDropdown;
+        }
+        const nextLeading = this.hasSlottedChildOwnedByThisHost('leading-icon');
+        if (nextLeading !== this.isLeadingIconSlotPresent) {
+            this.isLeadingIconSlotPresent = nextLeading;
+        }
+        const nextTrailing = this.hasSlottedChildOwnedByThisHost('trailing-icon');
+        if (nextTrailing !== this.isTrailingIconSlotPresent) {
+            this.isTrailingIconSlotPresent = nextTrailing;
+        }
+        const nextActiveDescendant = nextHasDropdown
+            ? this.el.querySelector('[slot="dropdown"] .xpl-top-nav-item--active') !== null ||
+                this.el.querySelector('[slot="dropdown"] .xpl-top-nav-item--selected') !== null
+            : false;
+        if (nextActiveDescendant !== this.hasActiveDescendant) {
+            this.hasActiveDescendant = nextActiveDescendant;
+        }
     }
     getNavDropdownBroadcastRoot() {
-        var _a, _b;
-        return ((_b = (_a = this.el.closest('xpl-top-nav')) !== null && _a !== void 0 ? _a : this.el.closest('xpl-nav-header-menu')) !== null && _b !== void 0 ? _b : this.el.ownerDocument);
+        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);
     }
     broadcastCloseOtherDropdownHosts() {
         const root = this.getNavDropdownBroadcastRoot();
         root.querySelectorAll('xpl-top-nav-item').forEach((host) => {
-            if (host === this.el) {
+            if (host === this.el || host.parentElement !== this.el.parentElement) {
                 return;
             }
             host.dispatchEvent(new CustomEvent('_xplCloseNavDropdown', { bubbles: false }));
         });
     }
-    syntheticActivationClickFromKeyboard(e) {
-        var _a;
-        const inner = this.el.querySelector('.xpl-top-nav-item__inner');
-        const rect = inner === null || inner === void 0 ? void 0 : inner.getBoundingClientRect();
-        const cx = rect ? rect.left + rect.width / 2 : 0;
-        const cy = rect ? rect.top + rect.height / 2 : 0;
-        return new MouseEvent('click', {
-            bubbles: true,
-            cancelable: true,
-            button: 0,
-            clientX: cx,
-            clientY: cy,
-            view: (_a = e.view) !== null && _a !== void 0 ? _a : undefined,
+    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);
+    }
+    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();
         });
     }
     static isInternalRenderedHostChild(el) {
@@ -23217,43 +23237,40 @@ const TopNavItem = class {
                 if (TopNavItem.isInternalRenderedHostChild(child)) {
                     return false;
                 }
-                return child.getAttribute('slot') !== 'dropdown';
+                const slotName = child.getAttribute('slot');
+                return slotName == null || slotName === '';
             }
             return false;
         });
     }
     getInnerAriaLabel() {
         var _a, _b, _c;
-        if ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) {
+        if ((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim())
             return undefined;
-        }
-        if (this.hasNonDropdownLightDomChild()) {
+        if (this.hasNonDropdownLightDomChild())
             return undefined;
-        }
         const custom = (_b = this.itemAriaLabel) === null || _b === void 0 ? void 0 : _b.trim();
-        if (custom) {
+        if (custom)
             return custom;
-        }
-        if ((_c = this.icon) === null || _c === void 0 ? void 0 : _c.trim()) {
+        if (((_c = this.icon) === null || _c === void 0 ? void 0 : _c.trim()) || this.isLeadingIconSlotPresent)
             return 'Navigation item';
-        }
         return undefined;
     }
     computeHostListitemRole() {
         const { el } = this;
-        if (el.classList.contains('xpl-top-nav__brand')) {
+        if (el.classList.contains('xpl-top-nav__brand'))
             return false;
-        }
-        if (el.getAttribute('slot') === 'right-aside-mobile') {
+        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 === null || parent === void 0 ? void 0 : parent.getAttribute('role')) === 'list')
             return true;
-        }
         if (parent != null && parent.tagName.toLowerCase() === 'xpl-nav-header-menu') {
             return true;
         }
+        if (parent != null && parent.tagName.toLowerCase() === 'xpl-top-nav-menu') {
+            return true;
+        }
         if (el.getAttribute('slot') === 'left-aside' &&
             (parent === null || parent === void 0 ? void 0 : parent.tagName.toLowerCase()) === 'xpl-top-nav' &&
             parent.querySelector('.xpl-top-nav__left-primary[role="list"]') != null) {
@@ -23263,36 +23280,68 @@ const TopNavItem = class {
     }
     syncHostListitemRole() {
         const next = this.computeHostListitemRole();
-        if (this.hostListitemRole !== next) {
+        if (this.hostListitemRole !== next)
             this.hostListitemRole = next;
+    }
+    renderLabelContent() {
+        var _a;
+        if (!this.label) {
+            return index.h("slot", null);
+        }
+        const description = (_a = this.description) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!description) {
+            return (index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label));
         }
+        return (index.h("span", { class: "xpl-top-nav-item__label-group" }, index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label), index.h("span", { class: "xpl-top-nav-item__description" }, description)));
+    }
+    renderLeading() {
+        if (this.isLeadingIconSlotPresent) {
+            return (index.h("span", { class: "xpl-top-nav-item__leading" }, index.h("slot", { name: "leading-icon" })));
+        }
+        if (this.icon) {
+            return (index.h("span", { class: "xpl-top-nav-item__leading" }, index.h("xpl-icon", { size: 16, icon: this.icon })));
+        }
+        return null;
+    }
+    renderTrailing() {
+        if (this.isTrailingIconSlotPresent) {
+            return (index.h("span", { class: "xpl-top-nav-item__trailing" }, index.h("slot", { name: "trailing-icon" })));
+        }
+        if (this.hasDropdown) {
+            return (index.h("span", { class: "xpl-top-nav-item__trailing" }, index.h("xpl-icon", { icon: "chevron-down" })));
+        }
+        return null;
     }
     renderInner() {
         const tabIndex = 0;
         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 }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), { onClick: this.handleClick, onKeyDown: this.handleKeyDown });
+        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 useAnchor = this.href != null && !this.hasDropdown;
         if (useAnchor) {
-            return (index.h("a", Object.assign({}, shared, { href: this.href }), this.icon && index.h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (index.h("slot", null))));
+            return (index.h("a", Object.assign({}, shared, { href: this.href }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
         }
-        return (index.h("div", Object.assign({}, shared, { role: "button" }), this.icon && index.h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (index.h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (index.h("slot", null)), this.hasDropdown && index.h("xpl-icon", { icon: "chevron-down" })));
+        return (index.h("button", Object.assign({}, shared, { type: "button" }), this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
     }
     render() {
-        return (index.h(index.Host, Object.assign({ key: '6d68c9bb7527410185e6ecd176c7a9a887359af9', class: {
+        return (index.h(index.Host, Object.assign({ key: '5de7a361dd1f3e0aaa3f98ebb8013118cb5c1a22', class: {
                 'xpl-top-nav-item': true,
                 'xpl-top-nav-item--active': this.active,
-                'xpl-top-nav-item--dropdown-open': this.open,
+                'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
+                'xpl-top-nav-item--has-active-descendant': this.hasActiveDescendant,
                 'xpl-top-nav-item--has-dropdown': this.hasDropdown,
                 'xpl-top-nav-item--selected': this.selected,
                 dark: true,
-            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (index.h("div", { key: 'da5414f6573aa6eb604721c814164b9a4987091d', class: "xpl-top-nav-item__dropdown" }, index.h("slot", { key: '116c436b4ef2902c50c5dd78c8d292190a3c58e4', name: "dropdown" })))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (index.h("div", { key: 'e076a46dab0d877fdac2eadf09c1fa1bdc97b9bd', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, index.h("slot", { key: '3a6c88fe606672b09b45bb5d8a22d05b26e84e30', name: "dropdown" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "hasDropdown": [{
                 "onHasDropdownChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
             }]
     }; }
 };
@@ -23311,7 +23360,7 @@ const UtilityBar = class {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (index.h(index.Host, { key: '965003722d536d4b9b7acd326ed7ae0cc2ac302a' }, index.h("nav", { key: '25d4348939fd65e00ce7bec962a31d65ff9473c3', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: '3cb1d9038135c1892a3780c9242bbd544f6f0f5f', name: "main" }))));
+        return (index.h(index.Host, { key: 'e990b6a7176fdb1d48fd1859f359f217a6600015' }, index.h("nav", { key: '3b331ed5294f208dcededae078659d9b0d7b118f', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: '444363c10471bd6206d39d2da37bafdae6291137', name: "main" }))));
     }
 };