@xplortech/apollo-core 2.9.0 → 2.11.0

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-BQ97-AWw.js');
-var v4 = require('./v4-D4KzFnn8.js');
+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: '072fedf411c5d8671ec2d8a6ff639e5adf93e15c', 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: 'f1a45af398443a5330afe856ac2442aa34cadf24' }, index.h("div", { key: 'fecb691b2b11414de0a03e119dd63332ade79a3c', class: className }, index.h("span", { key: '6c4169ea3d4f0f7cdaa03841ec72ac15f9e209f3', class: "xpl-badge__label" }, index.h("slot", { key: 'c7d96b70e9bcd161c279bf943c2cbc7248e2a53e' })))));
+        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: '373b38c40719c248968ed93381309584f24697a9', 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: 'b12f8facbdad390e2069374163048099a33aa309', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: '35ee47db756bc0f6b6cd0a2b0cd890a4ec10ff7c', icon: this.getIcon(), size: 24 }))), index.h("div", { key: '8aaca62cbd7b3cf353bfb35fc2f679932f2b0ade', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'fded85ef43b5186704195312621a33b7b823d19d', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: '1b7386b32891789f8cc425da922f7c3ee60fe5a6', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: '0b4b8e89db7cc6c4a55e207cf0be1b36956fe243', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: 'c15e5cb0ff332f2ca809dcf912fc7a4c68d47538', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: '6f20f721df8eb994ef9935d2c6f634b3460d9d77', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: '2fab1fec767aaed2bb36ee2b40bcf84a48ad6ead', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '7747d3e4aae5426d0e3344fb7aab92a4f003cf4e', 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: '98314b8841ba9d900dbba227363865efb26faf4c', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: '26bf86067dc2348b6ca96243bd1f9513ca187a00', role: "none" }, index.h("slot", { key: '802b606cce1052ea7fb859260627d6c6801ed78f' })), index.h("span", { key: '22de35338bf4439a23f8c08a7ea46d1d4f2b68e8', 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: '36533f6524e01aed62e293ebe93d8eea34b6b59a' }, index.h("nav", { key: '6a5562e639044f9d9d12a6365df69c5181f5bbba', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '99463e4808425aa8478a5e8fa2a113831eae1ecf', role: "list" }, index.h("slot", { key: 'f4d20df3a834f100663786d47881f742c9691969' })))));
+        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: '244b7802a9c0321d4ce2fca51b4e0c9b3ce5943d', 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: 'dd508c61fc68052f2bbdfccd606ea8f0109783f3', class: {
+        return (index.h(index.Host, { key: 'd173bab038a25f785864e5614b29ec2fde832786', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'c5b482a12c02cb4384444e3d385cccc17a8cbd3c', 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: 'e5ae6eef395457ff6021b008bbb4221e7c36a3c9', 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: '71ae02b761df01bea00b483e21a9b442b8fbdd9f' }), this.description && (index.h("small", { key: 'f34f7e323cd9c39ce1094177e7a4d3cf4b06f788', 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: 'd2da0f5aeb424a36fb117711f34c0631c464ef6a', 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: 'a40e08f0fd60a5268ed9f4d15a97b3fa677e2e46', 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: '2fe4c1c077c12e47600c737cc9266ae2eff8aaec' }, index.h("main", { key: '2e6c6f4b83cea96d629bb5af65c4ce6a4d20570e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '033e707fbc48ae523fafb25dd2952d3de9214908', class: "xpl-content-area" }, index.h("slot", { key: '04afc15969c2b1fb7e2feb3d8ae46248ee0f6e31' })))));
+        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: 'ceeb8b27d9537c70e88360de21238c9ce2a3f90b' }, index.h("dl", { key: '3c4fcb92f472f14885053a1cb1db893618a6d8a8', class: "xpl-dashboard" }, index.h("slot", { key: 'fe4fa8fdec2ce84bdedc7aa404ab647abd189d11' }))));
+        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: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, index.h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (index.h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (index.h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), index.h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, index.h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, index.h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', 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: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, index.h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', 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: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, index.h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, index.h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
+        return (index.h(index.Host, { key: '1926b1e92a89dc5039042d29491f246cf3900efa', class: className }, index.h("span", { key: '492651208216149bfd4d2ed7cc8610b2bc8b05ea' }, index.h("slot", { key: '1e8b9e121ab1cb946b7a13d2bacbeea9a490a289' }))));
     }
 };
 
@@ -2259,10 +2260,27 @@ var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
         }
     return t;
 };
+const VIRTUAL_LIST = {
+    rowHeight: 45,
+    overscan: 20,
+    virtualizeFrom: 200,
+};
+function renderOption(option, virtualIndex) {
+    const { groupName, options: opts, subtitle } = option, properties = __rest$1(option, ["groupName", "options", "subtitle"]);
+    if (groupName) {
+        return (index.h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties)));
+    }
+    const isVirtual = virtualIndex !== undefined;
+    return (index.h("xpl-dropdown-option", Object.assign({ class: isVirtual ? 'xpl-dropdown-option--virtual' : undefined, style: isVirtual
+            ? { transform: `translateY(${virtualIndex * VIRTUAL_LIST.rowHeight}px)` }
+            : undefined, subtitle: subtitle }, properties)));
+}
 const Dropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isOpenChange = index.createEvent(this, "isOpenChange", 7);
+        this.virtualEnd = 0;
+        this.virtualStart = 0;
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
@@ -2270,6 +2288,9 @@ const Dropdown = class {
         this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
+        this.virtualScrollRaf = null;
+        this.openAlignmentRaf = null;
+        this.previousOptionCount = 0;
         this.updateDropdownPosition = async (triggerEl) => {
             var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
@@ -2341,6 +2362,64 @@ const Dropdown = class {
                 this.isOpen = false;
             }
         };
+        this.handleVirtualScroll = () => {
+            if (this.virtualScrollRaf !== null)
+                return;
+            this.virtualScrollRaf = requestAnimationFrame(() => {
+                this.virtualScrollRaf = null;
+                this.updateVirtualRange();
+            });
+        };
+        this.setListEl = (el) => {
+            var _a, _b;
+            if (el === this.listEl)
+                return;
+            this.listEl = el;
+            (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (el && typeof ResizeObserver !== 'undefined') {
+                (_b = this.listResizeObserver) !== null && _b !== void 0 ? _b : (this.listResizeObserver = new ResizeObserver(() => {
+                    if (this.isVirtualized)
+                        this.handleVirtualScroll();
+                }));
+                this.listResizeObserver.observe(el);
+            }
+        };
+        this.scheduleOpenAlignment = () => {
+            if (this.openAlignmentRaf !== null)
+                return;
+            this.openAlignmentRaf = requestAnimationFrame(() => {
+                this.openAlignmentRaf = null;
+                this.scrollSelectedIntoView();
+                this.updateVirtualRange();
+            });
+        };
+    }
+    onOptionsChanged() {
+        var _a, _b, _c, _d;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        const listReplaced = total !== this.previousOptionCount;
+        this.previousOptionCount = total;
+        if (!this.isVirtualized) {
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
+            return;
+        }
+        const list = this.listEl;
+        if (list) {
+            const maxScroll = Math.max(0, total * VIRTUAL_LIST.rowHeight - list.clientHeight);
+            if (list.scrollTop > maxScroll) {
+                list.scrollTop = maxScroll;
+            }
+            if (this.isOpen && listReplaced) {
+                const selectedIndex = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex((option) => option.isSelected)) !== null && _d !== void 0 ? _d : -1;
+                const outOfWindow = selectedIndex >= 0 &&
+                    (selectedIndex < this.virtualStart || selectedIndex >= this.virtualEnd);
+                if (outOfWindow) {
+                    this.scrollSelectedIntoView();
+                }
+            }
+        }
+        this.updateVirtualRange();
     }
     onAnchorToTriggerChanged() {
         if (this.isOpen) {
@@ -2364,7 +2443,7 @@ const Dropdown = class {
     }
     onSelectedValuesChanged(newValues, initialRender = false) {
         if (this.options && this.options.length > 0) {
-            const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+            const flatOptions = this.options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
             flatOptions.forEach((option) => {
                 const optionValue = option.value || option.label;
                 if (this.mode === 'single') {
@@ -2389,9 +2468,13 @@ const Dropdown = class {
         this.isOpenChange.emit(newValue);
         if (newValue) {
             this.startPositioning();
+            this.alignOnOpen();
         }
         else {
             this.stopPositioning();
+            this.cancelVirtualScroll();
+            this.virtualStart = 0;
+            this.virtualEnd = 0;
         }
     }
     connectedCallback() {
@@ -2399,44 +2482,68 @@ const Dropdown = class {
         document.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('keydown', this.handleKeyDown);
         this.stopPositioning();
+        this.cancelVirtualScroll();
+        (_a = this.listResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
+        var _a, _b;
         this.handleSelect = this.handleSelect.bind(this);
         if (this.selectedValues) {
             this.onSelectedValuesChanged(this.selectedValues, true);
         }
+        this.previousOptionCount = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
     componentDidLoad() {
-        if (this.isOpen)
+        if (this.isOpen) {
             this.startPositioning();
+            this.alignOnOpen();
+        }
     }
     async handleSelect(e, { component }) {
         const { hostElement, mode, options, update } = this;
         const isSingle = mode === 'single';
         const isMulti = mode === 'multi';
         if (options) {
-            options
-                .reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], [])
-                .forEach((option) => {
-                const isMatch = (option.value || option.label) ===
-                    (component.hostElement.value || component.hostElement.label);
-                if (isSingle) {
-                    option.isSelected = isMatch;
-                    component.hostElement.isSelected = true;
-                }
-                else if (isMulti && isMatch) {
-                    option.isSelected = !option.isSelected;
-                    component.hostElement.isSelected = option.isSelected;
-                }
-            });
-            const mapOptions = (option) => {
-                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
-                return option;
-            };
-            this.options = options.map(mapOptions);
+            const targetValue = component.hostElement.value || component.hostElement.label;
+            const hasGroups = options.some((option) => option.groupName);
+            if (!hasGroups) {
+                options.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        if (isMatch)
+                            component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                this.options = [...options];
+            }
+            else {
+                const flatOptions = options.flatMap((curr) => curr.groupName && curr.options ? curr.options : [curr]);
+                flatOptions.forEach((option) => {
+                    const isMatch = (option.value || option.label) === targetValue;
+                    if (isSingle) {
+                        option.isSelected = isMatch;
+                        component.hostElement.isSelected = true;
+                    }
+                    else if (isMulti && isMatch) {
+                        option.isSelected = !option.isSelected;
+                        component.hostElement.isSelected = option.isSelected;
+                    }
+                });
+                const mapOptions = (option) => {
+                    option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                    return option;
+                };
+                this.options = options.map(mapOptions);
+            }
         }
         else if (isSingle) {
             const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
@@ -2475,24 +2582,89 @@ const Dropdown = class {
             .querySelector('.xpl-dropdown-list')) === null || _a === void 0 ? void 0 : _a.style.removeProperty('max-height');
         this.hostElement.classList.remove('xpl-dropdown--above', 'xpl-dropdown--below');
     }
+    cancelVirtualScroll() {
+        if (this.virtualScrollRaf !== null) {
+            cancelAnimationFrame(this.virtualScrollRaf);
+            this.virtualScrollRaf = null;
+        }
+        if (this.openAlignmentRaf !== null) {
+            cancelAnimationFrame(this.openAlignmentRaf);
+            this.openAlignmentRaf = null;
+        }
+    }
+    alignOnOpen() {
+        this.scrollSelectedIntoView();
+        this.updateVirtualRange();
+        this.scheduleOpenAlignment();
+    }
+    scrollSelectedIntoView() {
+        const { listEl: list, options } = this;
+        if (!list || !(options === null || options === void 0 ? void 0 : options.length) || !this.isVirtualized)
+            return;
+        const selectedIndex = options.findIndex((option) => option.isSelected);
+        if (selectedIndex < 0)
+            return;
+        const { rowHeight } = VIRTUAL_LIST;
+        const centered = selectedIndex * rowHeight - (list.clientHeight - rowHeight) / 2;
+        const maxScroll = Math.max(0, options.length * rowHeight - list.clientHeight);
+        list.scrollTop = Math.max(0, Math.min(centered, maxScroll));
+    }
+    updateVirtualRange() {
+        var _a, _b;
+        const list = this.listEl;
+        const total = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (!list || !total)
+            return;
+        const { rowHeight, overscan } = VIRTUAL_LIST;
+        const firstVisible = Math.floor(list.scrollTop / rowHeight);
+        const visibleCount = Math.ceil(list.clientHeight / rowHeight) || 1;
+        const start = Math.max(0, firstVisible - overscan);
+        const end = Math.min(total, firstVisible + visibleCount + overscan);
+        if (start !== this.virtualStart || end !== this.virtualEnd) {
+            this.virtualStart = start;
+            this.virtualEnd = end;
+        }
+    }
+    get isVirtualized() {
+        const { options } = this;
+        return (!!options &&
+            options.length > VIRTUAL_LIST.virtualizeFrom &&
+            options.every((option) => !option.groupName && !option.subtitle));
+    }
     render() {
-        const { isOpen } = this;
-        const { mode, options } = this;
-        const hasOptions = options && options.length;
-        const mappedOptions = hasOptions &&
-            options.map((_a) => {
-                var { groupName, options: opts, subtitle } = _a, properties = __rest$1(_a, ["groupName", "options", "subtitle"]);
-                return groupName ? (index.h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (index.h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
-            });
-        return (index.h(index.Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        const { isOpen, mode, options } = this;
+        const hasOptions = !!(options && options.length);
+        const shouldVirtualize = this.isVirtualized;
+        let listContent;
+        if (!hasOptions) {
+            listContent = index.h("slot", { key: '7a604ed002d4c412eb709aa7c3ef1a9e80f614ed', name: "options" });
+        }
+        else if (shouldVirtualize) {
+            const { rowHeight, overscan } = VIRTUAL_LIST;
+            const total = options.length;
+            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: '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: '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,
-            }, role: "listbox" }, index.h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), index.h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
+                'xpl-dropdown--virtualized': shouldVirtualize,
+            }, 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)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
+        "options": [{
+                "onOptionsChanged": 0
+            }],
         "anchorToTrigger": [{
                 "onAnchorToTriggerChanged": 0
             }],
@@ -2538,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: 'b872cfc0a8eb2e3542f07f6ae17ebc15b6f965ab', role: "group", "aria-label": groupName }, index.h("li", { key: '8e475e45b5040bd78c7d37f8c58b0689a508f067', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '3b7b984646bdcc502aca2260a0b59494e0884f6c', label: groupName }), index.h("ul", { key: 'c75e710ebe06a23aacca57f34ce286516c98a8c5', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '6b72762b22f316561f7614e4841018c019a60681', 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" })))));
     }
 };
 
@@ -2547,7 +2719,7 @@ const DropdownHeading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '70e5556188bd87fe5842256e4e145c3585f73409', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: '2d45f0191d9b158641da794ee1b9f246f9659717' }, this.label || index.h("slot", { key: '21cc81673e6a37f4b7ff896d12bd94916c3a92e7', 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" }))));
     }
 };
 
@@ -2604,11 +2776,11 @@ const DropdownOptionCpnt = class {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (index.h(index.Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', 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: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && index.h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', 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); }
 };
@@ -2683,7 +2855,7 @@ const HeaderAccordion = class {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (index.h(index.Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, index.h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', 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: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), index.h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', 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 {
@@ -9899,6 +10071,41 @@ var data = {
 			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M27.14 11.57l-11.12 11.13-11.13-11.13\"></path></g>"
 		}
 	}
+},
+	"chevron-expand-y": {
+	name: "chevron-expand-y",
+	keywords: [
+		"chevron-expand-y",
+		"chevron",
+		"arrow",
+		"expand",
+		"vertical",
+		"resize",
+		"maximize",
+		"unfold",
+		"select",
+		"dropdown",
+		"nav",
+		"more"
+	],
+	heights: {
+		"16": {
+			width: 16,
+			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.4\" d=\"M4.69 5.36l3.35-3.35 3.35 3.35\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.4\" d=\"M11.39 10.72l-3.35 3.35-3.35-3.35\"></path></g>"
+		},
+		"20": {
+			width: 20,
+			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.6\" d=\"M5.81 6.64l4.15-4.15 4.15 4.15\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.6\" d=\"M14.11 13.28l-4.15 4.15-4.15-4.15\"></path></g>"
+		},
+		"24": {
+			width: 24,
+			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" d=\"M7 8l5-5 5 5\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.75\" d=\"M17 16l-5 5-5-5\"></path></g>"
+		},
+		"32": {
+			width: 32,
+			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.31 10.64l6.65-6.65 6.65 6.65\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M22.61 21.28l-6.65 6.65-6.65-6.65\"></path></g>"
+		}
+	}
 },
 	"chevron-left": {
 	name: "chevron-left",
@@ -11639,6 +11846,39 @@ var data = {
 			path: "<g fill=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.23 12.02h3.56\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.23 17.36h11.57\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.23 22.7h11.57\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.9 25.37v-18.7a3.56 3.56 0 0 1 3.56-3.56h9.94c0.47 0 0.93 0.19 1.26 0.53l6.96 6.96a1.78 1.78 0 0 1 0.52 1.26v13.5a3.56 3.56 0 0 1-3.56 3.56h-15.13a3.56 3.56 0 0 1-3.56-3.56z\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M26.98 11.13h-6.07a1.78 1.78 0 0 1-1.78-1.79v-6.04\"></path></g>"
 		}
 	}
+},
+	"file-pin": {
+	name: "file-pin",
+	keywords: [
+		"file",
+		"pin",
+		"pinned",
+		"note",
+		"notes",
+		"thumbtack",
+		"tack",
+		"document",
+		"saved",
+		"save"
+	],
+	heights: {
+		"16": {
+			width: 16,
+			path: "<g fill=\"none\"><g><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12.2803 9.19531C12.9006 8.575 13.9068 8.57527 14.5273 9.19531L15.5352 10.2031C16.1555 10.8236 16.1556 11.8298 15.5352 12.4502L14.3838 13.5996C14.3722 13.7163 14.3565 13.8412 14.3311 13.9717L14.2734 14.2246C14.0967 14.897 13.7807 15.3871 13.5508 15.6836L13.5479 15.6807C13.53 15.7037 13.5143 15.7289 13.4932 15.75C13.2198 16.0233 12.7763 16.0233 12.5029 15.75L11.2363 14.4834L10.2529 15.4678C9.97963 15.7411 9.53608 15.7409 9.2627 15.4678C8.98969 15.1944 8.98962 14.7518 9.2627 14.4785L10.2471 13.4941L8.98047 12.2275C8.83875 12.0855 8.76474 11.8888 8.77734 11.6885C8.79015 11.4882 8.88829 11.3027 9.04688 11.1797C9.34336 10.9498 9.83347 10.6338 10.5059 10.457C10.7294 10.3982 10.9393 10.3636 11.1289 10.3447L12.2803 9.19531ZM13.5371 10.1846C13.4635 10.1116 13.3441 10.1115 13.2705 10.1846L11.9346 11.5205C11.808 11.647 11.6379 11.7206 11.459 11.7256C11.3329 11.729 11.1861 11.7413 11.0264 11.7725L10.8613 11.8105C10.7767 11.8328 10.6961 11.8586 10.6201 11.8867L12.8418 14.1084C12.8698 14.0326 12.8977 13.9526 12.9199 13.8682C12.979 13.6437 13.0003 13.4393 13.0049 13.2715L13.0205 13.1396C13.0491 13.0103 13.115 12.8909 13.21 12.7959L14.5449 11.46C14.6186 11.3863 14.6185 11.2671 14.5449 11.1934L13.5371 10.1846Z\"></path><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.1875 0.855469C9.6086 0.855482 10.0121 1.02293 10.3105 1.32129L13.7881 4.79883C13.9241 4.93412 14.0311 5.09211 14.1094 5.2627C14.1139 5.27248 14.119 5.28197 14.123 5.29199C14.2091 5.49011 14.2559 5.70482 14.2559 5.92383V7.22461C14.2558 7.61108 13.9421 7.92469 13.5557 7.9248C13.1691 7.9248 12.8555 7.61115 12.8555 7.22461V6.25586H10.4443C9.56727 6.25574 8.85564 5.54404 8.85547 4.66699V2.25586H4.22168C3.62663 2.25609 3.14477 2.73839 3.14453 3.33301V12.667C3.14471 13.2617 3.6266 13.7439 4.22168 13.7441H7.12402C7.51055 13.7441 7.8241 14.0578 7.82422 14.4443C7.82415 14.8309 7.51058 15.1445 7.12402 15.1445H4.22168C2.85294 15.1443 1.74432 14.0344 1.74414 12.667V3.33301C1.74438 1.96565 2.85297 0.855703 4.22168 0.855469H9.1875ZM10.2559 4.66699C10.256 4.77085 10.3405 4.85535 10.4443 4.85547H11.8652L10.2559 3.24609V4.66699Z\"></path><path fill=\"currentColor\" d=\"M9.11133 7.9668C9.49793 7.9668 9.81152 8.28039 9.81152 8.66699C9.81136 9.05345 9.49783 9.36719 9.11133 9.36719H5.11133C4.72483 9.36719 4.4113 9.05345 4.41113 8.66699C4.41113 8.28039 4.72473 7.9668 5.11133 7.9668H9.11133Z\"></path><path fill=\"currentColor\" d=\"M6.88867 5.2998C7.27527 5.2998 7.58887 5.6134 7.58887 6C7.58887 6.3866 7.27527 6.7002 6.88867 6.7002H5.11133C4.72473 6.7002 4.41113 6.3866 4.41113 6C4.41113 5.6134 4.72473 5.2998 5.11133 5.2998H6.88867Z\"></path></g></g>"
+		},
+		"20": {
+			width: 20,
+			path: "<g fill=\"none\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.4043 11.5479C16.1506 10.8015 17.3611 10.8015 18.1074 11.5479L19.3672 12.8076C20.1131 13.554 20.1133 14.7646 19.3672 15.5107L17.9092 16.9668C17.895 17.118 17.875 17.2806 17.8418 17.4512L17.7705 17.7627C17.5641 18.5476 17.2012 19.1293 16.9229 19.499C16.8921 19.5472 16.8565 19.5937 16.8145 19.6357C16.5022 19.9479 15.995 19.9476 15.6826 19.6357L14.0459 17.998L12.7627 19.2822C12.4504 19.5942 11.9442 19.5942 11.6318 19.2822C11.3195 18.9698 11.3195 18.4628 11.6318 18.1504L12.9141 16.8672L11.2803 15.2324C11.118 15.0701 11.0326 14.8453 11.0469 14.6162C11.0614 14.3872 11.1742 14.1758 11.3555 14.0352C11.7209 13.7518 12.3243 13.3622 13.1523 13.1445L13.4629 13.0732C13.6331 13.04 13.7952 13.0191 13.9463 13.0049L15.4043 11.5479ZM16.9756 12.6787C16.8542 12.5576 16.6576 12.5577 16.5361 12.6787L14.8662 14.3486C14.7216 14.4932 14.5266 14.5774 14.3223 14.583C14.1073 14.5889 13.8467 14.6159 13.5596 14.6914C13.4099 14.7308 13.2699 14.7794 13.1416 14.832L14.6025 16.293C14.6057 16.296 14.6092 16.2987 14.6123 16.3018C14.6134 16.3029 14.6141 16.3046 14.6152 16.3057L16.082 17.7715C16.1345 17.6435 16.1834 17.5048 16.2227 17.3555C16.2982 17.0683 16.3262 16.8064 16.332 16.5918C16.3377 16.3875 16.4219 16.1934 16.5664 16.0488L18.2354 14.3789C18.3567 14.2576 18.3564 14.061 18.2354 13.9395L16.9756 12.6787Z\"></path><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.4844 1.14453C11.9909 1.14453 12.477 1.34518 12.8359 1.7041L17.1836 6.05176L17.3105 6.19238C17.4177 6.32275 17.5057 6.46633 17.5742 6.61816C17.5798 6.63068 17.5849 6.64341 17.5898 6.65625C17.6899 6.89119 17.7441 7.14505 17.7441 7.4043V9.03125C17.744 9.47293 17.3861 9.83105 16.9443 9.83105C16.5027 9.83094 16.1447 9.47286 16.1445 9.03125V7.74414H13.0557C12.0005 7.74414 11.1445 6.88817 11.1445 5.83301V2.74414H5.27832C4.49267 2.74414 3.85553 3.38195 3.85547 4.16699V15.833C3.85547 16.6181 4.49263 17.2559 5.27832 17.2559H8.90527C9.34706 17.2559 9.70501 17.6139 9.70508 18.0557C9.70496 18.4974 9.34703 18.8555 8.90527 18.8555H5.27832C3.60845 18.8555 2.25586 17.5012 2.25586 15.833V4.16699C2.25593 2.49881 3.60849 1.14453 5.27832 1.14453H11.4844ZM12.7441 5.83301C12.7441 6.00451 12.8842 6.14453 13.0557 6.14453H15.0137L12.7441 3.875V5.83301Z\"></path><path fill=\"currentColor\" d=\"M11.3887 10.0332C11.8304 10.0332 12.1883 10.3913 12.1885 10.833C12.1885 11.2748 11.8305 11.6328 11.3887 11.6328H6.38867C5.94684 11.6328 5.58887 11.2748 5.58887 10.833C5.58903 10.3913 5.94695 10.0332 6.38867 10.0332H11.3887Z\"></path><path fill=\"currentColor\" d=\"M8.61133 6.7002C9.05296 6.70043 9.41113 7.05832 9.41113 7.5C9.41113 7.94168 9.05296 8.29957 8.61133 8.2998H6.38867C5.94684 8.2998 5.58887 7.94183 5.58887 7.5C5.58887 7.05817 5.94684 6.7002 6.38867 6.7002H8.61133Z\"></path></g>"
+		},
+		"24": {
+			width: 24,
+			path: "<g fill=\"none\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18.5459 13.917C19.4082 13.0551 20.8057 13.055 21.668 13.917L23.1807 15.4297C24.0422 16.292 24.0424 17.6896 23.1807 18.5518L21.4092 20.3223C21.3832 20.6146 21.3344 20.9425 21.2422 21.293C20.9958 22.2301 20.5622 22.9233 20.2314 23.3604C20.1989 23.4103 20.161 23.4581 20.1172 23.502C19.7756 23.8435 19.2216 23.8432 18.8799 23.502L16.8555 21.4775L15.2559 23.0781C14.9141 23.4196 14.3592 23.4198 14.0176 23.0781C13.6764 22.7365 13.6762 22.1824 14.0176 21.8408L15.6172 20.2402L13.5957 18.2188C13.4183 18.0412 13.3261 17.7954 13.3418 17.5449C13.3576 17.2943 13.4803 17.0621 13.6787 16.9082C14.1112 16.5728 14.8249 16.1129 15.8037 15.8555L16.1719 15.7705C16.3852 15.7289 16.5876 15.7032 16.7754 15.6865L18.5459 13.917ZM20.4307 15.1543C20.2518 14.9757 19.9621 14.9758 19.7832 15.1543L17.7793 17.1582C17.6211 17.3163 17.4081 17.4079 17.1846 17.4141C16.9211 17.4212 16.6021 17.4552 16.25 17.5479C16.0204 17.6082 15.8105 17.6854 15.6221 17.7695L19.3271 21.4746C19.4111 21.2864 19.4895 21.078 19.5498 20.8486C19.6424 20.4968 19.6764 20.1759 19.6836 19.9131L19.6895 19.8291C19.7133 19.6366 19.8012 19.4567 19.9395 19.3184L21.9424 17.3145C22.1212 17.1356 22.1211 16.846 21.9424 16.667L20.4307 15.1543Z\"></path><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M13.7812 1.45801C14.3663 1.45801 14.928 1.69001 15.3428 2.10449L20.5596 7.32227C20.7348 7.49666 20.8761 7.69864 20.9824 7.91602C20.997 7.94279 21.0097 7.97065 21.0215 7.99902C21.1431 8.27641 21.2089 8.57742 21.209 8.88477V10.8369C21.209 11.3201 20.8171 11.7117 20.334 11.7119C19.8507 11.7119 19.459 11.3202 19.459 10.8369V9.20898H15.666C14.4471 9.20881 13.4582 8.21894 13.458 7V3.20801H6.33398C5.34429 3.20801 4.54216 4.0111 4.54199 5V19C4.54217 19.9889 5.34429 20.791 6.33398 20.791H10.6865C11.1696 20.791 11.5612 21.1831 11.5615 21.666C11.5615 22.1493 11.1698 22.541 10.6865 22.541H6.33398C4.37723 22.541 2.79217 20.9548 2.79199 19V5C2.79216 3.04518 4.37722 1.45801 6.33398 1.45801H13.7812ZM15.208 7C15.2082 7.25245 15.4136 7.45881 15.666 7.45898H18.2217L15.208 4.44531V7Z\"></path><path fill=\"currentColor\" d=\"M13.667 12.125C14.1502 12.125 14.542 12.5168 14.542 13C14.542 13.4832 14.1502 13.875 13.667 13.875H7.66699C7.18374 13.875 6.79199 13.4832 6.79199 13C6.79199 12.5168 7.18374 12.125 7.66699 12.125H13.667Z\"></path><path fill=\"currentColor\" d=\"M10.334 8.125C10.8171 8.12518 11.209 8.51686 11.209 9C11.209 9.48314 10.8171 9.87482 10.334 9.875H7.66699C7.18374 9.875 6.79199 9.48325 6.79199 9C6.79199 8.51675 7.18374 8.125 7.66699 8.125H10.334Z\"></path></g>"
+		},
+		"32": {
+			width: 32,
+			path: "<g fill=\"none\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M24.8438 18.6738C25.9285 17.5891 27.6877 17.5891 28.7725 18.6738L30.7881 20.6895C31.8728 21.7742 31.8728 23.5334 30.7881 24.6182L28.3867 27.0186C28.3547 27.4161 28.2882 27.8657 28.1611 28.3486C27.8253 29.6262 27.2243 30.5581 26.7861 31.123C26.7608 31.1556 26.734 31.1878 26.7041 31.2178C26.3136 31.6082 25.6796 31.6082 25.2891 31.2178L22.4736 28.4023L20.2227 30.6533C19.8322 31.0437 19.1991 31.0436 18.8086 30.6533C18.4182 30.2628 18.4182 29.6298 18.8086 29.2393L21.0596 26.9883L18.2451 24.1738C18.0422 23.9709 17.9361 23.6898 17.9541 23.4033C17.9722 23.117 18.1122 22.8517 18.3389 22.6758C18.9038 22.2376 19.8358 21.6367 21.1133 21.3008C21.5959 21.1737 22.0449 21.1063 22.4424 21.0742L24.8438 18.6738ZM27.3584 20.0879C27.0548 19.7843 26.5625 19.7845 26.2588 20.0879L23.5869 22.7588C23.406 22.9396 23.1629 23.0448 22.9072 23.0518C22.5454 23.0616 22.107 23.108 21.623 23.2354C21.2161 23.3423 20.8552 23.4871 20.543 23.6426L25.8184 28.918C25.9738 28.6058 26.1196 28.2457 26.2266 27.8389C26.3539 27.355 26.4003 26.9157 26.4102 26.5547L26.417 26.459C26.4442 26.2388 26.545 26.0332 26.7031 25.875L29.374 23.2041C29.6776 22.9005 29.6775 22.4082 29.374 22.1045L27.3584 20.0879Z\"></path><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M18.375 2.11133C19.1111 2.11136 19.8171 2.40312 20.3389 2.9248L27.2949 9.88184L27.4805 10.0859C27.8876 10.5813 28.1113 11.2046 28.1113 11.8477V14.4502C28.111 15.0021 27.6632 15.45 27.1113 15.4502C26.5592 15.4502 26.1116 15.0022 26.1113 14.4502V12.1104H20.8887C19.3553 12.1101 18.1114 10.8664 18.1113 9.33301V4.11133H8.44434C7.0325 4.11133 5.88867 5.25628 5.88867 6.66699V25.334C5.88904 26.7444 7.03273 27.8887 8.44434 27.8887H14.248C14.8002 27.8887 15.2478 28.3366 15.248 28.8887C15.2479 29.4408 14.8002 29.8887 14.248 29.8887H8.44434C5.92751 29.8887 3.88904 27.8483 3.88867 25.334V6.66699C3.88867 4.15237 5.92728 2.11133 8.44434 2.11133H18.375ZM20.1113 9.33301C20.1114 9.76185 20.4599 10.1101 20.8887 10.1104H24.6953L20.1113 5.52539V9.33301Z\"></path><path fill=\"currentColor\" d=\"M18.2227 16.333C18.7748 16.333 19.2225 16.7809 19.2227 17.333C19.2227 17.8853 18.7749 18.333 18.2227 18.333H10.2227C9.67037 18.333 9.22266 17.8853 9.22266 17.333C9.22282 16.7809 9.67047 16.333 10.2227 16.333H18.2227Z\"></path><path fill=\"currentColor\" d=\"M13.7783 11C14.3306 11.0001 14.7783 11.4478 14.7783 12C14.7783 12.5522 14.3306 12.9999 13.7783 13H10.2227C9.67037 13 9.22266 12.5523 9.22266 12C9.22266 11.4477 9.67037 11 10.2227 11H13.7783Z\"></path></g>"
+		}
+	}
 },
 	"file-plus": {
 	name: "file-plus",
@@ -16614,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: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, index.h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, index.h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "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: '256c0d05be8026b24a139f8bfff4f00c65112030' }, 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();
@@ -16743,7 +16983,7 @@ const Input = class {
             case 'time':
                 return (index.h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption, onValueChange: this.handleChildValueChange }));
             case 'phone':
-                return (index.h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
+                return (index.h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, error: !!this.error, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
             case 'search': {
                 const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
                 const hasErrorMessage = Boolean(this.error && this.error.length > 0);
@@ -16775,13 +17015,13 @@ const Input = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (index.h(index.Host, { key: '406ab6d1b4d43ceb06cdb819cec8699d2d3322b3', 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: 'ab7ea9eb5cb82e6b602ce93ab3da482c12f59078', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '37435c5f1d3d8a30acba7788a7d215921e679327' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: '57b66daa234d93d9f6d7ad582380960013596919', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: '9a14b46934a8d7edc5f5e48c3fecf87441e741ca', icon: "alert-circle", size: 16 }), index.h("span", { key: 'badecb1aba3b3ff35cbcf6d7cb4d5355844951e6' }, 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); }
 };
@@ -17151,16 +17391,16 @@ const InputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (index.h(index.Host, { key: '14fe9097b513719084fd3487b3a18f95c0eaf158', class: "xpl-input-color" }, index.h("xpl-popover", { key: '8b3d322c236115ab5b487b8ea6fde2227a69cc47', disabled: this.disabled, display: "menu" }, index.h("div", { key: '8309555df24767e7e3c4131a9d571a23b7b29cc6', slot: "trigger" }, index.h("div", { key: '8a9edf9c0e2c70f15fdd7add09571e3b0bfef89a', 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: '0d1c39976d6b95e0ff25b46b00b9a3d6796c8f8e', 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: '2b5ab7d7927e9685652de5e5ea843b970465d568', 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: 'd564121400cc8adde26658ad15f25403f2672988', class: "xpl-input-color__menu" }, index.h("div", { key: '896f8b010eb20a03c0c838467f7a8f7d7e6980e1', 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: [
@@ -17168,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: 'af50abd9fc235df8ed6c0e399d6b755078c86182', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '8bdbdfee8d6c09534700744a420ac80b89330789', class: "xpl-input-color__grid" }, index.h("input", { key: '9e918ed41384861a55847709980d65751f1e8fbe', 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: 'a352b5ed96dff5fbc5e1dce6e241e34d2f847f5d', 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: [
@@ -17180,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: 'df000dcb3466bc5be835d55381562c356ecc8c17', 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: 'fc79485821cc081e14007aefdfd4b14bbd875a1e', 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;
@@ -17305,16 +17545,16 @@ const InputDate = class {
         parent.removeChild(wrapper);
     }
     render() {
-        return (index.h(index.Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', 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: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '00633c5b69d25a94d7cd8501bde70459e8ebf2ce', 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: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (index.h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', 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 {
@@ -17363,18 +17603,18 @@ const InputFile = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', 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: '8dc3e290dcddba706316ec41443e2e87aa82f79f', 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: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', 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: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', 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 })));
     }
@@ -17862,21 +18102,21 @@ const InputPhone = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
+        return (index.h(index.Host, { key: '1b29d31aca23d7047c36a910bfce85aa54784377', class: {
                 'xpl-input-phone': true,
-                'xpl-input-phone--error': !!this.hasErrorState,
+                'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, index.h("div", { key: 'c7e46df1b58b6e76dda47b3b32f5a6abe29f048c', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: 'ef1bedb4bad96760c81ad4dbf2cadb5a29d4abb9', 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: 'a307f620c2815d63b17dbeb6c270d2972884e9d9', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: 'c16e66d315877cec35e322a1164f765cd387931f', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '7a33b994588e4c5ea868a4e092709b8acd50a36f', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '5a39cfd472f5287fc8cf0648ce618e21dabf5e97', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: 'dfb25910769594bc9b9d1c861049605d7bdd9d0e', 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 ? '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: '8db932d94550aa6d947e2564d8a94a12bef43bce', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: '87e55c3a5ae6b8774d3ce64af843b7e63448fe25', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '467b0e2fde23a45b2c36138affa26467e0b6c9d0', 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: 'f4f3665ab8286faed45c3a3a510bd247c7a31842', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '659875e60e85bac085deb8f6648623eccc76d560', 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: '987941768e8494d9c898fc93e531da03bd57ad71', 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 {
@@ -17995,7 +18235,7 @@ const InputSearch = class {
         return shell;
     }
     render() {
-        return (index.h(index.Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', 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,
@@ -18179,11 +18419,11 @@ const InputTime = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: 'a48ebfd7cd0578b33bd11059f9bebb342bf954f7', 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: '68089e0bd5b0ed7d88917094eafe529637947380', 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: '1bbe4a3a42c02ff985a26e7547c54f0bbdc92ce0', 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" }))));
     }
@@ -18197,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;
@@ -18262,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 = [];
@@ -18617,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: 'aaa6e1cfa2d87e61b239d9aa59c9e4647f05aade', 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: '89eb57b654baf9efbfd021e8c8db1fe074daa6d1' }), 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 {
@@ -19110,6 +19301,9 @@ const Modal = class {
             this.modalClosed.emit();
         };
         this.handleNativeBackdropClick = (event) => {
+            if (event.target !== this.dialogElement) {
+                return;
+            }
             const rect = this.dialogElement.getBoundingClientRect();
             const clickedOutsideDialog = event.clientX < rect.left ||
                 event.clientX > rect.right ||
@@ -19145,7 +19339,7 @@ const Modal = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '310913d620acf72531ecb06aa6cd2180bb58d13b', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: 'd95693fd09c2f0a8024f3cb69a021f0bd79f7916' }), index.h("dialog", { key: '5cffd3cfdcc6033baa1d9e3e5fdf56b8411a8975', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: '2d0be8e91065d464797d85cd1b98272292eacb09', class: "xpl-modal__header" }, index.h("div", { key: 'cb7d8594ed217599bcf0e2efa88d72afe0fff758', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: 'fb7dd69369accc0c98ef8762ca457b6368ca0036', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: '36a6d3d38d35064f81740504090fbbcdf2125097', name: "title" }), index.h("xpl-button", { key: 'db84ecf685afec8d0d783b433f8aa030acc436bb', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: 'bf241c6636ace6e182bf259bd24754646dc7f151', icon: "x" }))), index.h("div", { key: '105fa1a5b9d927bda5ca5521bbb8211cb07ab8e8', class: "xpl-modal__subtitle" }, index.h("slot", { key: 'd25d6d8bb95cd51f075dd7f9b5e1e199dac3efb0', name: "subtitle" }))), index.h("div", { key: '3b194a36ad0f4446149027544c16a25ba27f2cec', class: "xpl-modal__body" }, index.h("slot", { key: '077e5b70115e3e906cd9ea7181c51615799c77e8', name: "body" })), index.h("div", { key: '687bd9ca45af20945ab5461ceb68ec099a30c50b', class: "xpl-modal__footer" }, index.h("slot", { key: '73d5884708efd296a701c37e02663668fcfd37d8', name: "tertiary" }), index.h("slot", { key: 'bad90d2355b8c015e19b1e450b5a2ce96e5ad55d', name: "secondary" }), index.h("slot", { key: 'c601b66edc9fb2c082ccc713d6df95f15bd604ef', 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 {
@@ -19221,11 +19415,11 @@ const NavHeaderMenu = class {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (index.h(index.Host, { key: '451149dc9d73f705492fc65bf4f014b8efa4ee8a', 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: 'f42b560492c110644d52b10f708a3ed650833861', class: "xpl-nav-header-menu__profile" }, index.h("div", { key: '6d98f720af85cbf8164bea7500175d6bfbb9465b', class: "xpl-nav-header-menu__info" }, this.username && (index.h("div", { key: '9d52880dc41c11e71ac3cc107d8009eccb787bac', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (index.h("div", { key: 'd1b71ac2c4f6aaf5efd7b1910b8848f97ab08bf0', class: "xpl-nav-header-menu__email" }, this.email))))), index.h("div", { key: 'e1b298c39ccbe0f68b8d60fa82714572f656ab1e', class: "xpl-nav-header-menu__right-aside-mobile" }, index.h("slot", { key: 'fbb8d26c38a4a50568e8836ac3af4409fe6c93c0', name: "right-aside-mobile" })), index.h("div", { key: 'cbe858338ec04cdd3b74285f95b0466432924be2', class: "xpl-nav-header-menu__slot", role: "list" }, index.h("slot", { key: 'b47ccc7f955a30d8b9d9b884fa3d920d45958f7c' }))));
+            } }, 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); }
 };
@@ -19242,11 +19436,11 @@ const NavItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b3a214a57ad57e9db1bbfd6a1809999ce0575a82', 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: '0f2a74dc4fd6f419a01106d872a5f6b5066a21a8', name: "link" }, index.h("slot", { key: '234b41ca18d65ec3423ff580d983d24b483641cf', name: "icon" }), index.h("slot", { key: 'cdb0ac59997cd1c557b05c6c8d8f60ae78d28a4d' }))));
+            } }, index.h("slot", { key: 'acde5d80edbead75a558b964954caa18e1cc0c5f', name: "link" }, index.h("slot", { key: '66838cf7e6610e48d7102475cc6463aa65f4651b', name: "icon" }), index.h("slot", { key: 'de185eaab42a425cf82eaaf6883b1472fecb9754' }))));
     }
 };
 
@@ -19262,6 +19456,7 @@ const Pagination = class {
         this.selectedRowsPerPage = 10;
         this.rowsPerPageSelectRef = null;
         this.pageSelectRef = null;
+        this.pageChoices = [];
         this.handleNextPage = () => {
             if (this.currentPage < this.totalPages) {
                 this.currentPage += 1;
@@ -19295,11 +19490,29 @@ const Pagination = class {
         else if (newValue > this.totalPages) {
             this.currentPage = this.totalPages;
         }
+        this.buildPageChoices();
         this.pageChange.emit(this.currentPage);
     }
+    onTotalPagesUpdate() {
+        if (this.currentPage > this.totalPages) {
+            this.currentPage = this.totalPages;
+            return;
+        }
+        this.buildPageChoices();
+    }
     onRowsPerPageUpdate(newValue) {
         this.rowsPerPageChange.emit(newValue);
     }
+    buildPageChoices() {
+        this.pageChoices = Array.from({ length: this.totalPages }, (_, index) => ({
+            label: `Page ${index + 1}`,
+            value: (index + 1).toString(),
+            isSelected: index + 1 === this.currentPage,
+        }));
+    }
+    componentWillLoad() {
+        this.buildPageChoices();
+    }
     componentDidLoad() {
         var _a, _b;
         (_a = this.rowsPerPageSelectRef) === null || _a === void 0 ? void 0 : _a.addEventListener('changeEvent', this.handleRowsChange);
@@ -19313,28 +19526,27 @@ const Pagination = class {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (index.h(index.Host, { key: 'fad9cdff4010b4b5ac842633bf7daf09b4dbd5d4', 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: 'eb125851b89aa1422ec3e5d5e336fcbecd07489e', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '5f2aa4c45d183827317a74cf4700981b6b0e7f2b', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: '7ba2987a24b3228d9b59320f29b22b5819f85546', 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: '8bab9db1cecfdaeeb760b0e4e1afb393ff3a3fe7', class: "xpl-pagination__pager" }, index.h("button", { key: '19efd8a9aee2b05f875d2db34c7cdd174c845f60', 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: 'a77a15c649a6f2c86b100d1687b4a099acc18602', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: '5778cad67d3a4b930b1f89b0e49c30e941e23259', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: Array.from({ length: this.totalPages }, (_, index) => ({
-                label: `Page ${index + 1}`,
-                value: (index + 1).toString(),
-                isSelected: index + 1 === this.currentPage,
-            })), "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: 'd0ae655a0100c2e81c8f7bdc2c8d3072f00cc7c9', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: 'ca6c7eb4fd277344f340b83673f1e43cb0c9fe99', 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: 'd18efdcb7e67ab908fbf79fc475993cf656b150c', 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": [{
                 "onPageUpdate": 0
             }],
+        "totalPages": [{
+                "onTotalPagesUpdate": 0
+            }],
         "selectedRowsPerPage": [{
                 "onRowsPerPageUpdate": 0
             }]
@@ -19349,11 +19561,11 @@ const XplPanel = class {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (index.h(index.Host, { key: 'e9a747ba679f6f9f907d13217f329947bff93e31', 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: 'b777fd4a81574ff9276582b256b673cccfc63a34', "aria-hidden": "true", class: "xpl-panel__accent" }), index.h("div", { key: '5fa5ba4c2bfa13d7dcaee603e96ec9b77d103b13', class: "xpl-panel__content" }, index.h("slot", { key: 'c99b797e076c2641ae205181479dabb38f9ea009' }))));
+            } }, 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' }))));
     }
 };
 
@@ -20016,16 +20228,16 @@ const Popover = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '6fe479a39ee565772785c7b540c4e0915c5403e4' }, index.h("div", { key: '350452ca097bab13e7f06b3d1aa5e2774d80104b', 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: '0a9365be21ef70855bd7d304a77fc80d19ba16d3', 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: 'df227b5bb7683599b4f82ef2a8c9d840b4920a61', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: 'dbf0b6998b3aa6ae40089e13bef86878037bbe24', class: "xpl-popover__arrow" }, index.h("svg", { key: '2bf57b69abc556ba9a86b59f6347a2c8d81a67c3', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '36fef83ea3e2d3d4b388f5bdfe74d0bdc034be9d', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '1187a6ec22457ab6086753cf199398705541b1b4', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: '7c6f063094de1462629a0db380597374c4231855', 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: '41062b776eed58b98452bb5a8d3b7099ac1138d2' })))));
+            }, ref: (el) => (this.contentRef = el) }, index.h("slot", { key: 'ad827a2a95546d4e3c975cd410ba4067fd69ad04' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -20065,12 +20277,12 @@ const ProgressBar = class {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (index.h(index.Host, { key: 'e5cc7a2231ed74242241723c9f0a57444a8000bb', 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: '3212fdea66e2cd3edffc36f99c9edc197f15bcee', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: '004c0b9203df13c6818fdbb8c928a47d86e7388e', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: 'ce735edff19cc004f979a582618c968260cd23c3', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: '3a9f143b79152aa3208593c9249a62d819c2967a', 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: '517787d0ff39c082a3d4763b78b16a9ce9235b4b', 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: '488c5092b96a1e9a5a08f9b090f94fe66f6f1490', 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)))));
     }
 };
 
@@ -20131,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: '3a6f253693fd47f982541099a1729ca36d0ce64a', class: hostClasses, role: "group", "aria-label": ariaLabel }, index.h("div", { key: 'c25b47994c43135ed3147ca579bdc3d8124d7c8a', 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": [{
@@ -20165,14 +20377,14 @@ const Radio = class {
         return Boolean(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '1cda65b10ee03e06c30b2c501d7f2ec4153619f6', class: {
+        return (index.h(index.Host, { key: 'b25d59aa55a08aa7264e1dadc670b540d3740dfc', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, index.h("input", { key: 'b19a87e42feb5953ace4b8bd049427959c40a7e6', 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: 'd07051460f7503a182b969eeafcb8eba5d61bef2', 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: '06835704869d514a0d3eb01d671b6bec42524e89' }), this.description && (index.h("small", { key: '3e798a699fa53ca6c932e6466b438ed47aa46148', 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)))));
@@ -20184,7 +20396,7 @@ const SecondaryNav = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f4fdd93b13c1dc779c84e8b00b12caeff58df960', class: "xpl-secondary-nav" }, index.h("nav", { key: '4092d23357761026ad5fddfbc32a221d957cce1e', "aria-label": "Secondary Nav" }, index.h("slot", { key: 'c3ae9f1821a6d22babece27971cc1faf15037cdb' }))));
+        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' }))));
     }
 };
 
@@ -20197,7 +20409,7 @@ function getDisplayValue(choice) {
     return choice.label || choice.value;
 }
 function flattenChoices(choices) {
-    return choices.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+    return choices.flatMap((choice) => choice.groupName && choice.options ? choice.options : [choice]);
 }
 const Select = class {
     constructor(hostRef) {
@@ -20387,16 +20599,21 @@ const Select = class {
         (_a = this.handleResizeThrottled) === null || _a === void 0 ? void 0 : _a.cancel();
     }
     handleDropdownTrigger() {
-        var _a;
-        const prevState = (_a = this.dropdown.isOpen) !== null && _a !== void 0 ? _a : false;
+        var _a, _b;
+        if (this.disabled) {
+            return;
+        }
+        const prevState = (_b = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
         const nextState = !prevState;
         const e = this.triggerDropdown.emit({
             prevState,
             nextState,
         });
-        if (!e.defaultPrevented && !this.disabled) {
+        if (!e.defaultPrevented) {
             this.dropdownOpenState = nextState;
-            this.dropdown.isOpen = nextState;
+            if (this.dropdown) {
+                this.dropdown.isOpen = nextState;
+            }
         }
     }
     async reset() {
@@ -20415,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: '09d3587fa268cb0621ea293d246e23cde93d75df', 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: '007a61cc60c948d0691d6983cb197652084e417d', 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: 'e1edfe6e4b205bd6332f07031ee51ef7f9f6ac91', class: "xpl-input-wrapper" }, index.h("button", { key: '53d079f28b8a1bcdd5498287dfd88bb7a3ba7b50', 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: '5cfec98b2e829ea48e96b373e09e740d5bf02ef6', 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,
@@ -20449,7 +20666,7 @@ const Select = class {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), index.h("xpl-icon", { key: '8bb01d1e8b206fb3c1963cdebcd293eeb2277e05', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: 'f5e770c4b26449f3025d172d768d6df69bd0ae03', 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;
@@ -20458,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: 'fe84c16780622e730100a58a948fc4fe27f6ddb5', 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": [{
@@ -20479,15 +20696,213 @@ const Select = class {
     }; }
 };
 
+const SIDE_NAV_MOBILE_MQ = '(max-width: 767px)';
+const SIDE_NAV_CLOSE_ANIMATION_MS = 600;
+
 const SideNav = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.openChange = index.createEvent(this, "openChange", 7);
+        this.drawerClosing = false;
+        this.open = false;
+        this.onViewportChange = () => {
+            this.clearCloseTransition();
+            this.syncDocKeyDownListener();
+        };
+        this.focusToggleAfterClose = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.toggleFocusTimeoutId !== undefined) {
+                clearTimeout(this.toggleFocusTimeoutId);
+            }
+            this.toggleFocusTimeoutId = setTimeout(() => {
+                var _a;
+                this.toggleFocusTimeoutId = undefined;
+                (_a = this.el.querySelector('.xpl-side-nav__toggle button')) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        };
+        this.focusDrawerOnOpen = () => {
+            if (!this.isBelowMdBreakpoint())
+                return;
+            if (this.drawerFocusTimeoutId !== undefined) {
+                clearTimeout(this.drawerFocusTimeoutId);
+            }
+            this.drawerFocusTimeoutId = setTimeout(() => {
+                var _a;
+                this.drawerFocusTimeoutId = undefined;
+                const wrapper = this.el.querySelector('.xpl-side-nav__wrapper');
+                const first = wrapper
+                    ? this.getFocusableElements().find((el) => wrapper.contains(el))
+                    : undefined;
+                const fallback = this.el.querySelector('.xpl-side-nav__toggle button');
+                (_a = (first !== null && first !== void 0 ? first : fallback)) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        };
+        this.onBackdropClick = () => this.setOpenState(false);
+        this.onDocKeyDown = (e) => {
+            if (!this.isMobileDrawerActive())
+                return;
+            if (this.shouldYieldFocusToExternalModal())
+                return;
+            switch (e.key.toLowerCase()) {
+                case 'escape': {
+                    if (!this.open)
+                        return;
+                    if (this.anyDescendantPopoverIsOpen())
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.setOpenState(false);
+                    return;
+                }
+                case 'tab': {
+                    this.trapTabKey(e);
+                    break;
+                }
+            }
+        };
+        this.onToggleClick = () => this.setOpenState(!this.open);
+    }
+    onOpenChanged(newValue, oldValue) {
+        if (oldValue && !newValue && this.isBelowMdBreakpoint()) {
+            this.drawerClosing = true;
+            if (this.closeTransitionTimeoutId !== undefined) {
+                clearTimeout(this.closeTransitionTimeoutId);
+            }
+            this.closeTransitionTimeoutId = setTimeout(() => {
+                this.closeTransitionTimeoutId = undefined;
+                this.drawerClosing = false;
+                this.syncDocKeyDownListener();
+            }, SIDE_NAV_CLOSE_ANIMATION_MS);
+        }
+        else {
+            this.clearCloseTransition();
+        }
+        this.syncDocKeyDownListener();
+        if (oldValue && !newValue)
+            this.focusToggleAfterClose();
+        if (!oldValue && newValue)
+            this.focusDrawerOnOpen();
+    }
+    connectedCallback() {
+        if (typeof window !== 'undefined') {
+            this.mobileMq = window.matchMedia(SIDE_NAV_MOBILE_MQ);
+            this.mobileMq.addEventListener('change', this.onViewportChange);
+        }
+        this.syncDocKeyDownListener();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.syncDocKeyDownListener();
+            this.focusDrawerOnOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.toggleFocusTimeoutId !== undefined) {
+            clearTimeout(this.toggleFocusTimeoutId);
+            this.toggleFocusTimeoutId = undefined;
+        }
+        if (this.drawerFocusTimeoutId !== undefined) {
+            clearTimeout(this.drawerFocusTimeoutId);
+            this.drawerFocusTimeoutId = undefined;
+        }
+        this.clearCloseTransition();
+        (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onViewportChange);
+        this.mobileMq = undefined;
+        this.removeDocKeyDownListener();
+    }
+    async toggle() {
+        this.setOpenState(!this.open);
+    }
+    async setOpen(open) {
+        this.setOpenState(open);
+    }
+    removeDocKeyDownListener() {
+        this.el.ownerDocument.removeEventListener('keydown', this.onDocKeyDown, false);
+    }
+    syncDocKeyDownListener() {
+        this.removeDocKeyDownListener();
+        if (this.isMobileDrawerActive()) {
+            this.el.ownerDocument.addEventListener('keydown', this.onDocKeyDown, false);
+        }
+    }
+    isBelowMdBreakpoint() {
+        var _a, _b;
+        return (_b = (_a = this.mobileMq) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+    }
+    isMobileDrawerActive() {
+        return (this.open || this.drawerClosing) && this.isBelowMdBreakpoint();
+    }
+    clearCloseTransition() {
+        if (this.closeTransitionTimeoutId !== undefined) {
+            clearTimeout(this.closeTransitionTimeoutId);
+            this.closeTransitionTimeoutId = undefined;
+        }
+        this.drawerClosing = false;
+    }
+    shouldYieldFocusToExternalModal() {
+        const active = this.el.ownerDocument.activeElement;
+        if (!active || this.el.contains(active))
+            return false;
+        return active.closest('[aria-modal="true"]') !== null;
+    }
+    anyDescendantPopoverIsOpen() {
+        const hosts = this.el.querySelectorAll('xpl-popover');
+        for (let i = 0; i < hosts.length; i += 1) {
+            const inner = hosts[i].querySelector('.xpl-popover');
+            if (inner === null || inner === void 0 ? void 0 : inner.classList.contains('xpl-popover--is-open')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    setOpenState(open) {
+        const wasOpen = this.open;
+        if (open === wasOpen)
+            return;
+        this.open = open;
+        this.openChange.emit(open);
+        if (wasOpen && !open)
+            this.focusToggleAfterClose();
+    }
+    getFocusableElements() {
+        const selector = 'button:not([disabled]), a[href]:not([tabindex="-1"]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const active = this.el.ownerDocument.activeElement;
+        return Array.from(this.el.querySelectorAll(selector)).filter((node) => !node.closest('[inert]') && (node.offsetParent !== null || node === active));
+    }
+    trapTabKey(e) {
+        if (this.shouldYieldFocusToExternalModal())
+            return;
+        const focusable = this.getFocusableElements();
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.el.ownerDocument.activeElement;
+        if (e.shiftKey) {
+            if (active === first || !this.el.contains(active)) {
+                e.preventDefault();
+                last.focus();
+            }
+        }
+        else if (active === last || !this.el.contains(active)) {
+            e.preventDefault();
+            first.focus();
+        }
     }
     render() {
-        return (index.h(index.Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
+        return (index.h(index.Host, { key: 'a007b689281cf2d2f5c24d7517a478c165c992bf', class: {
                 'xpl-side-nav': true,
-            } }, index.h("div", { key: '92c9f31fa0d9d564164cde99d17e30562c30abb7', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '5ddd8b18d4f74bb752b747ec4e1c48780a0738de', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: '8b830945bf6ec1da8ab2e2c955c10a1077652590', class: "xpl-side-nav__section" }, index.h("slot", { key: '66e5cd33c23bdc8963d661e0741d34f80a0640fb', name: "section" })), index.h("div", { key: 'f0da4e3c25822453efcbfb3c6f8ea7ec328e717d', class: "xpl-side-nav__footer" }, index.h("slot", { key: '76b829e978361be9fd62bd412489ea4559852c3f', name: "nav-footer" }))))));
+                'xpl-side-nav--open': this.open,
+            } }, 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 {
+        "open": [{
+                "onOpenChanged": 0
+            }]
+    }; }
 };
 
 const SideNavItem = class {
@@ -20495,6 +20910,7 @@ const SideNavItem = class {
         index.registerInstance(this, hostRef);
         this.expandedChange = index.createEvent(this, "expandedChange", 7);
         this.navClick = index.createEvent(this, "navClick", 7);
+        this.hasTrailingSlot = false;
         this.disabled = false;
         this.expanded = false;
         this.hasChildren = false;
@@ -20516,11 +20932,66 @@ const SideNavItem = class {
     syncLinkHasChildrenExclusivity() {
         this.enforceLinkExcludesHasChildren();
     }
+    connectedCallback() {
+        this.syncTrailingSlot();
+        this.connectTrailingSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+            this.trailingSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectTrailingSlotObserver();
+    }
     componentWillLoad() {
         this.syncLinkHasChildrenExclusivity();
+        this.syncTrailingSlot();
     }
     componentWillRender() {
         this.syncLinkHasChildrenExclusivity();
+        this.disconnectTrailingSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleTrailingSlotSync();
+    }
+    connectTrailingSlotObserver() {
+        this.disconnectTrailingSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.trailingSlotObserver = new MutationObserver(() => {
+            this.scheduleTrailingSlotSync();
+        });
+        this.trailingSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectTrailingSlotObserver() {
+        var _a;
+        (_a = this.trailingSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.trailingSlotObserver = undefined;
+    }
+    scheduleTrailingSlotSync() {
+        if (this.trailingSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.trailingSlotSyncTimeoutId);
+        }
+        this.trailingSlotSyncTimeoutId = setTimeout(() => {
+            this.trailingSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncTrailingSlot();
+            this.connectTrailingSlotObserver();
+        }, 0);
+    }
+    syncTrailingSlot() {
+        const next = Array.from(this.el.querySelectorAll('[slot="trailing"]')).some((node) => node.closest('xpl-side-nav-item') === this.el);
+        if (next !== this.hasTrailingSlot) {
+            this.hasTrailingSlot = next;
+        }
     }
     enforceLinkExcludesHasChildren() {
         if (!this.link)
@@ -20534,15 +21005,20 @@ const SideNavItem = class {
     }
     render() {
         var _a;
-        const linkClass = {
+        const showAutoChevron = this.hasChildren && !this.hasTrailingSlot;
+        const buttonClass = {
             'xpl-side-nav-item__link': true,
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (index.h(index.Host, { key: 'a621f4f9c04d79de708a34a4f4eab06e523a299a', 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: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (index.h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, index.h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (index.h("span", { class: "xpl-side-nav-item__icon" }, index.h("slot", { name: "icon" }, 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.hasChildren && !this.link && (index.h("div", { key: '3e22894c0bd9427f568b86bba00cdab822921997', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '41486a4241e4402232531d140e972b39d863ffd9', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: 'd334c6ecac7dd1dd12602a461db444cd1ccefc86' }))))));
+            } }, 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: '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 {
@@ -20562,7 +21038,7 @@ const Skeleton = class {
         this.size = 'custom';
     }
     render() {
-        return (index.h(index.Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', class: {
+        return (index.h(index.Host, { key: '6d2a1a9164bb1568663b944f3f4ea66517256528', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -20605,7 +21081,7 @@ const Slideout = class {
         this.handleScroll();
     }
     render() {
-        return (index.h(index.Host, { key: '8a3f7af854b35469bf4a383cc4cb1fcfcaa15748', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '7033d78efa9ac2642a99d2b2dca278a3e9a44368', onClick: this.handleClose })), index.h("aside", { key: '2999e4119a0dbaac5125c7a1ef5f03761f445a0e', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: '5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4', class: "header" }, index.h("div", { key: '88172efe113b56a533761b975605a44ef52c5174', class: "title" }, index.h("slot", { key: 'c8f13168f62f96374250b11814ace756fa680503', name: "title" }), index.h("xpl-button", { key: '8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '110cbd50e31b51319745d6fed61188c1c885b8b3', icon: "x" }))), index.h("div", { key: '96e6cddf4b078736201116f220f27ddf34b90b44', class: "subtitle" }, index.h("slot", { key: 'eb02b4fce6ff5e658ec51c83819a5257f452d3a1', name: "subtitle" })), index.h("div", { key: 'ac8dfe1f99428cdf728027aa5a04d58d497f34f0', class: "search" }, index.h("slot", { key: '28deb70ef99f4880fba55beb2d2b4b1d3136a240', name: "search" }))), index.h("xpl-divider", { key: '928d20ef8e74eed4e06351c5dab0c0af9934d2b8', tier: 0, class: "divider top" }), index.h("article", { key: 'd6460cb29abb33f6676d2e4f517c1f2befa57148', class: "content", tabIndex: 0 }, index.h("slot", { key: 'b415af9cadedc61407623773fd6b2b1130caf5df', name: "content" })), this.showFooter && (index.h("footer", { key: 'db6a58277112f134dc150266446cc67c79bc6bc5' }, index.h("xpl-divider", { key: '129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6', tier: 0, class: "divider bottom" }), index.h("div", { key: '6c81348acf8ee2bb4c12c2f3207daae564e78aa2', class: "footer" }, index.h("slot", { key: '8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b', name: "tertiary" }), index.h("slot", { key: 'e66e45e2d090f45305f818c6496541b737c96aeb', name: "secondary" }), index.h("slot", { key: '8892bdf075a38237a5c858bfd951e1203fc3c892', 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 {
@@ -20770,6 +21246,7 @@ const Spotlight = class {
         this.hasFloatingPosition = false;
         this.hasImageSlotContent = false;
         this.hasTitleSlotContent = false;
+        this.dialogLabelId = undefined;
         this.isVisible = false;
         this.resolvedAnchorPosition = 'top-left';
         this.actionLayout = 'default';
@@ -20946,6 +21423,7 @@ const Spotlight = class {
         this.hasBodySlotContent = this.hasSlottedContent('body');
         this.hasImageSlotContent = this.hasSlottedContent('image');
         this.hasTitleSlotContent = this.hasSlottedContent('title');
+        this.dialogLabelId = this.getDialogLabelId();
         if (this.isOpenEnabled) {
             this.previousFocus =
                 document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -20976,6 +21454,10 @@ const Spotlight = class {
         if (this.isOpenEnabled) {
             this.syncTitleSlotIds();
         }
+        const nextLabelId = this.getDialogLabelId();
+        if (this.dialogLabelId !== nextLabelId) {
+            this.dialogLabelId = nextLabelId;
+        }
         if (this.pendingEnterVisible && this.isOpenEnabled) {
             this.pendingEnterVisible = false;
             this.enterVisibleFrameId = requestAnimationFrame(() => {
@@ -21144,10 +21626,13 @@ const Spotlight = class {
             return fromHost;
         }
         const slot = this.el.querySelector('slot[name="title"]');
-        if (!slot) {
-            return null;
+        if (slot && typeof slot.assignedNodes === 'function') {
+            const assigned = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (assigned) {
+                return assigned;
+            }
         }
-        return ((_a = Array.from(slot.assignedNodes({ flatten: true })).find((node) => node.nodeType === Node.ELEMENT_NODE)) !== null && _a !== void 0 ? _a : null);
+        return (_a = this.el.querySelector('[slot="title"]')) !== null && _a !== void 0 ? _a : null;
     }
     getDialogLabelId() {
         if (this.hasTitleSlotContent) {
@@ -21300,7 +21785,7 @@ const Spotlight = class {
                 'xpl-spotlight--only-primary-action': showActions && showPrimaryAction && !showSecondaryAction,
                 'xpl-spotlight--only-secondary-action': showActions && showSecondaryAction && !showPrimaryAction,
                 'xpl-spotlight--visible': this.isVisible,
-            }, role: "dialog", "aria-modal": "false", "aria-label": this.getDialogLabelId() ? undefined : 'Tour step', "aria-labelledby": this.getDialogLabelId(), tabindex: -1 }, index.h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, index.h("div", { class: "xpl-spotlight__target-outer" }), index.h("div", { class: "xpl-spotlight__target-inner" })), this.isDismissibleEnabled && (index.h("div", { class: "xpl-spotlight__dismiss" }, index.h("xpl-button", { variant: "secondary", size: "sm", iconOnly: true, "aria-label": "Dismiss tour step", onClick: this.handleDismissClick }, index.h("xpl-icon", { icon: "xmark", size: 16 })))), index.h("div", { class: "xpl-spotlight__frame" }, index.h("div", { class: {
+            }, role: "dialog", "aria-modal": "false", "aria-label": this.dialogLabelId ? undefined : 'Tour step', "aria-labelledby": this.dialogLabelId, tabindex: -1 }, index.h("button", { type: "button", class: "xpl-spotlight__target", "aria-label": "Spotlight indicator", onClick: this.handleTargetClick }, index.h("div", { class: "xpl-spotlight__target-outer" }), index.h("div", { class: "xpl-spotlight__target-inner" })), this.isDismissibleEnabled && (index.h("div", { class: "xpl-spotlight__dismiss" }, index.h("xpl-button", { variant: "secondary", size: "sm", iconOnly: true, "aria-label": "Dismiss tour step", onClick: this.handleDismissClick }, index.h("xpl-icon", { icon: "xmark", size: 16 })))), index.h("div", { class: "xpl-spotlight__frame" }, index.h("div", { class: {
                 'xpl-spotlight__image-container': true,
                 'xpl-spotlight__image-container--empty': !this.hasImageSlotContent,
                 'xpl-spotlight__image-container--hidden': !showImage,
@@ -21433,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: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "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: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
+            }, id: panelId, role: "tabpanel" }, index.h("slot", { key: '1fe282e7372fb0353cf1c32db841269aaa3c44a9' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -21464,29 +21949,23 @@ const Table = class {
         this.sortTypeArray = [];
         this.selectAllValue = Math.random().toString(36).slice(2);
         this.selectAll = (e) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked } = target;
+            const checked = e.detail;
             this.areAllSelected = checked;
             this.selected =
                 this.selectedValues.length > 0
-                    ?
-                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => checked ? input === null || input === void 0 ? void 0 : input.value : checked)
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? checkbox.value : checked))
                     : this.selected.map(() => checked);
             this.onChange();
         };
         this.selectOne = (e, checkboxIdx) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked, value } = target;
-            this.areAllSelected = false;
+            const checked = e.detail;
+            const { value } = e.target;
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
                 return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
             });
+            this.areAllSelected = this.selected.every((v) => !!v);
             this.onChange();
         };
         this.onChange = () => {
@@ -21577,27 +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: '10b0bfd08e28fada9a2c8509d405c5314cce1689' }, index.h("div", { key: '8e5b4fe928618b175a58f858f6cfd65f4bd29c53', 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: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', 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: '5f14766107d69f26b865f63c323d417f43260267' }, 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("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => {
-                    e.stopPropagation();
-                    this.selectAll(e);
-                }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (index.h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), index.h("tbody", { key: 'b13ca1d1a738de189d4f040dfd309187671b341d' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
+            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: '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", { htmlFor: `__xpl-table-row-${rowNum}` }, index.h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
+                : '' }, 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}` }), 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: '5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9' }, 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 {
@@ -21933,11 +22409,11 @@ const Tabs = class {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (index.h(index.Host, { key: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', 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: '18209c354e77267a13ce0c7380df0e419595cca7', 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;
                 }
@@ -21948,17 +22424,17 @@ const Tabs = class {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), index.h("nav", { key: 'cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca', "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: '5bfd13566a17723ec166a934bc72e59307eacb8c', 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: '52baf508a46759fe908f8721b3089d3db0189383', name: "heading" })), index.h("div", { key: '363fe87f244eace0dc0af0903e0b8c25da3a613f', class: "xpl-tabs__panels" }, index.h("slot", { key: 'f3872844f486cf831bca26a228eba88fa18b42c3', 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 {
@@ -22104,7 +22580,7 @@ const Tag = class {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (index.h(index.Host, { key: '7e85098bb9f5e8c0fceee3e7947337e0799c4de8', class: {
+        return (index.h(index.Host, { key: '4b8228da443d411561306e790333d676fc3907e3', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -22112,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: 'cb875506819a0a58d42add85a1a09e95e4786eba', 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: '431f061a4c96dacb9dc76a753c9d2de01491b2be', 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 {
@@ -22162,14 +22638,14 @@ const Toast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '4f470ceb525c35a86ddbf65365fac1674ebe7033', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '04da6ca2777ceb222da2f4fd831d8aef5101a667', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: 'f1ccc651318b6d7128255918bdd68ef36a249e9f', class: "xpl-toast__notification" }, index.h("p", { key: '1ae879d8a670a0f1a4928bfa2a0692581040dca1', class: "xpl-toast__title" }, index.h("slot", { key: 'b819a773c11b88cb00f8638db8a960de55ce6508', name: "title" })), this.caption !== '' && (index.h("p", { key: '8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: '46ae2f04fa38b50d2a07082b6972590f6bd28005', 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: '69512a9b482bb54252527d798dfa2884a19b7d8c', name: "action" })), this.dismissable && (index.h("div", { key: '818a5f9dde1a9c9b7ab3cd62cd807200e3687af6', class: "xpl-toast__close" }, index.h("button", { key: '3a617189f8f031e119a125efce0ab35a7f5cf31f', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: 'd86187aed0665da278f953be5ab92f7051f44438', 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); }
 };
 
-const TooltipArrow = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "14" }, index.h("g", { filter: "url(#a)" }, index.h("path", { d: "M0 5h15l-7.5 7.5L0 5Z" })), index.h("defs", null, index.h("filter", { id: "a", width: "20", height: "8.171", x: ".5", y: "5", "color-interpolation-filters": "sRGB", filterUnits: "userSpaceOnUse" }, index.h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }), index.h("feOffset", { dy: "1" }), index.h("feComposite", { in2: "hardAlpha", operator: "out" }), index.h("feColorMatrix", { values: "0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0" }), index.h("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_20073_3067" }), index.h("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_20073_3067", result: "shape" })))));
+const TooltipArrow = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "13" }, index.h("path", { d: "M0.5 5h15l-7.5 7.5L0.5 5Z", fill: "white", stroke: "none", class: "xpl-tooltip-arrow__fill" }), index.h("path", { d: "M0.5 5 L8 12.5 L15.5 5", fill: "none", stroke: "black", "stroke-width": "1", class: "xpl-tooltip-arrow__stroke" })));
 
 const Tooltip = class {
     constructor(hostRef) {
@@ -22178,7 +22654,7 @@ const Tooltip = class {
         this.hideArrow = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a118d629923a433680360f746e063ca94d5f1c6a' }, index.h("div", { key: 'cfd9742ee2cebd56994480bd2a601cb4e93b12a9', class: "xpl-tooltip-container" }, index.h("slot", { key: '8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3' }), index.h("div", { key: '4b418074b2ac7f8760f09e3af033ea93f7a0012e', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (index.h("div", { key: 'ef6a166f78250f1f98eae41661fd7020b36eeaae', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: '7baecae00ab178f715c89443d250b068861afe5f' }))))));
+        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' })))))));
     }
 };
 
@@ -22235,6 +22711,7 @@ const TopNav = class {
             this.open = !this.open;
             this.navOpen.emit(this.open);
             if (wasOpen && !this.open) {
+                this.resetMobileCascade();
                 this.focusNavControlAfterClose();
             }
         };
@@ -22394,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);
@@ -22417,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: '9f65d609c6b4cf08b2899216fe8bc70fe0e12db9', 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,
@@ -22430,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: 'a3d613acbe13866886bca363372127e8e869ec2c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, index.h("div", { key: 'b7057ef80f36e98def53bbfc2a39bd30bacd9b4c', class: "xpl-top-nav__inner-left" }, this.navControl && (index.h("button", { key: '3c4091842c7e4c1a62fea5446f6e29486617b11a', 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: 'cd5fd2cd1cf1dae5c765b63678e14cb87588c3b2', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (index.h("div", { key: '3cabfe3ce8ff58d9aed0ed9b4adccd896f6cad08', class: "xpl-top-nav__brand-bar" }, index.h("xpl-top-nav-item", { key: 'bca3924f36affd16b6c17d0d8cc1ccc57c488ef6', 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: '1e9a1af5fbeca22c0f440556c121c38b8528d9ba', 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: 'b5d67e1adf5bc6a751be3d8bfa448bdb682039bc', class: "xpl-top-nav__left-primary", role: "list" }, index.h("slot", { key: 'c738eb6fbda41c8320fa2645fb88f43ef11731b6', name: "left-aside" })))), index.h("div", { key: '8573832a3922746b2301f9bc8b4fa6ab7e1ac441', 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: 'a21b318496a47000cde7a0346d3376999e7893ea', class: "xpl-nav-right__list" }, index.h("div", { key: '5934e7d3976b13abba77b4361b4fe1c6f49bcc2e', class: "xpl-top-nav__right-rail" }, index.h("div", { key: '49b44ea3d59eec32d6859978754e81ce6acc1bec', class: "xpl-top-nav__right-lead" }, index.h("slot", { key: '054671b75354700b873a85f08998a14d7fc7073b', 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
@@ -22452,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;
             }
@@ -22493,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;
@@ -22554,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();
         });
@@ -22624,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;
@@ -22647,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) {
@@ -22693,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) {
@@ -22739,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: '4758b54726318591f140bcfea8d4db22c70c96ff', 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: '65f53889e4815fb974d7abe12d13dd8be19c1943', class: "xpl-top-nav-item__dropdown" }, index.h("slot", { key: '2f4f164deaec561be73a13e2303cc13e037699bb', 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
             }]
     }; }
 };
@@ -22787,7 +23360,7 @@ const UtilityBar = class {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (index.h(index.Host, { key: '2af96247c611b67255b7f285dfb2b8b1dada47cc' }, index.h("nav", { key: '135186097dd0d8f308a1a08b5fbf4a5537c10f25', "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: '3346444f9813b20d8c4ed13b5a0784205dcfbbb1', 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" }))));
     }
 };