@xplortech/apollo-core 2.8.1 → 2.10.0

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

@@ -1,7 +1,7 @@
 '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');
 
 const LEGACY_STATUS_TO_BADGE = {
@@ -169,7 +169,7 @@ const Backdrop = class {
         this.relative = false;
     }
     render() {
-        return (index.h(index.Host, { key: '072fedf411c5d8671ec2d8a6ff639e5adf93e15c', class: {
+        return (index.h(index.Host, { key: 'b2d74c6cd60e419b212078d16258a9cbd5716149', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,
@@ -206,7 +206,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: 'c9595f3e4d3d9e60567818b393eed6523167ebca' }, index.h("div", { key: '725533575abf1cc96546f4c0beb9c7d02fca435e', class: className }, index.h("span", { key: 'd8f32af9c1b05b07d72ec9fa60f0039899a7863e', class: "xpl-badge__label" }, index.h("slot", { key: '848e2bb6d6755cca1ab7060023a81e115f6d4a48' })))));
     }
 };
 
@@ -271,13 +271,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: '9d4ced7103ad43590be34ae643e90e998d826d2c', 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: 'd7c698d6da5711ef23d624b6cae03e9a0764b8c7', class: "xpl-banner__icon", "aria-hidden": "true" }, index.h("xpl-icon", { key: '01e3c3cd3e28a09943754972112f5ecef61c2e42', icon: this.getIcon(), size: 24 }))), index.h("div", { key: 'b95abb8d1609a97d869fbd7b88124a5e5e1b45df', class: "xpl-banner__body" }, isHeadingPresent && index.h("p", { key: 'a792cda8b66f549522d6288330005ff60e5cca3f', class: "xpl-banner__heading" }, this.heading), isDescPresent && (index.h("p", { key: '6529492113bd3f893ec0cfb8387dbd58701d99c4', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (index.h("div", { key: '14b20dc26f2cf98acd8baac75802dba11eaa84da', class: "xpl-banner__actions" }, hasAction && (index.h("xpl-button", { key: '44bf1a434eaa7d8a629beb64ffc9d097118d8c09', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (index.h("xpl-button", { key: '958284fccbb12b89192d3211476bbaceb31ee16a', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (index.h("button", { key: 'a59aaf2f9b48db433f699877a2259c8587f7aa9a', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, index.h("xpl-icon", { key: '3a374616b00743d3ee66e9f2fce50027e21ebb25', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
 };
 
@@ -290,7 +290,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: '183fd6614da5188a84d5dc7ce9d9f2d5144e7f4b', class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { key: '416621372ac59874f8d136ba3194f097f487eae2', role: "none" }, index.h("slot", { key: 'a0fcee52d63596c6e96a94ebd9e069f4275cf996' })), index.h("span", { key: 'b076324da264cfbf9efd97c92a73b12517dd6429', innerHTML: this.chevron })));
     }
 };
 
@@ -299,7 +299,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: 'dc04f3dbc02d0e52efd258ed653e236e3a3ef8c0' }, index.h("nav", { key: '87a8ae67ad49e7eff110dac3b98f818aa7bc7bbd', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { key: '80122b0a41e6b9542e1560de325266a3f27ddc86', role: "list" }, index.h("slot", { key: '7aa415c279281b0566aaf0e6f943afc5ff698e8a' })))));
     }
 };
 
@@ -335,6 +335,12 @@ const Button = class {
             });
         }
     }
+    handleDisabledClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    }
     renderIcon() {
         if (this.icon) {
             return index.h("xpl-icon", { icon: this.icon });
@@ -350,7 +356,7 @@ const Button = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fc2207b2f07ecccd8c076846406b7c5d2ed6854d', class: {
+        return (index.h(index.Host, { key: '2f4d6c6964aee895a81cff28401c3e48895954e8', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -383,14 +389,14 @@ const Checkbox = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'dd508c61fc68052f2bbdfccd606ea8f0109783f3', class: {
+        return (index.h(index.Host, { key: 'a0eae3b6c390a83ddc1eacea1b0d98a08df9d614', 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: 'bbe0a186b0184229ac1090bbb7d0354c01cb7b62', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), index.h("label", { key: 'ab9374abf1c8578df2e1177755afd495f245dcb2', class: {
                 '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: '28ef92d6f0cd46c50a797131fc3f0ea1dcaaa751' }), this.description && (index.h("small", { key: '87e25deaad3fd000b4dd313e07f7317365f8db07', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -436,7 +442,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: 'b2a2b4630df394470daa56346215ad1193727557', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description))) : null, this.choices && (index.h("ul", { key: 'd2329582e74d40946d23ae522b40130b1d780522', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {
@@ -465,7 +471,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: '9ae6e297af2b7cf5b40ae9848a1479d6e87b6a3e' }, index.h("main", { key: '2ca4359f4090262b7186689207b4725883e5378e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { key: '6e4e1e2947eb4e7e8d5d9201b48074cd9cb102ed', class: "xpl-content-area" }, index.h("slot", { key: 'bf8de84eb947b3ce40fd5df93169f382d3a896cf' })))));
     }
 };
 
@@ -474,7 +480,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: 'e3736f9e707de77addac539a4e7f0950133d0e08' }, index.h("dl", { key: 'de1add10d2f37c0a541d2f60f7156cf920eabd69', class: "xpl-dashboard" }, index.h("slot", { key: 'acd2becab0a555bf2599d0b2db4ebe0c9d744744' }))));
     }
 };
 
@@ -511,8 +517,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: '6220a2a6ba1ac0744ba62e701c015964c05bdea9', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '44da16abf81bc72a9c777f19d7c22ab998f55e94', class: headerClasses }, index.h("header", { key: '4ac3524629d31f3e74a245eef3e4ed6fc3a6832a' }, !!this.leadingIcon && this.icon && (index.h("span", { key: '53f7476c16eee3432e43a6bdebf744caeb9f9829', class: `xpl-data-card__icon--${this.variant}` }, index.h("xpl-icon", { key: 'af9ed04389ba00e4d0c79f978c1364a0530b1db7', icon: this.icon, "background-color": bgColorHue, size: 20 }))), index.h("slot", { key: '164396b94252374a1978cadf336ca74685fe9ba4', name: "title" }, this.name)), this.link && (index.h("span", { key: '31ce9874f295b1fef5705a28d81365d66a67a18b', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f5d169eeb150ed2eaa663ca1388e1075e61f6b7b', icon: "chevron-right", size: 16 })))), index.h("dd", { key: '59711740ae613b61ab5ae463cbfc2aaed500fdc9', class: "xpl-data-card__body" }, index.h("div", { key: '35571a65469ba1c413114a50233340057f5df200', class: "xpl-data-card__left" }, index.h("span", { key: 'b1409661fc43dea4126e423d5dc74fe4b0a5ef5f', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (index.h("xpl-tooltip", { text: this.tooltipTextStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, index.h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, index.h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (index.h("xpl-tooltip", { text: this.tooltipTextSmallStat }, index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (index.h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, index.h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && index.h("span", { key: '634b386799ed06de06ca212005d20e6f79c54124', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (index.h("div", { key: '9e88749b9c2efd65d22ec92881eaf316103ddb97', class: "xpl-data-card__right" }, index.h("slot", { key: '467388943d1c8a6bbfb334e6ab763dc7e92e59c8', name: contentSlot }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -532,7 +538,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: '8b6563d7c6c85814d5dc0527246c90eea82c0dbd', class: className }, index.h("span", { key: '2935de22e9c70183386b5f6e1e18ff6437a42a41' }, index.h("slot", { key: '10e4e4c5c861647302217f78af0a369ad330c410' }))));
     }
 };
 
@@ -2253,10 +2259,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';
@@ -2264,6 +2287,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, {
@@ -2335,6 +2361,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) {
@@ -2358,7 +2442,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') {
@@ -2383,9 +2467,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() {
@@ -2393,44 +2481,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'));
@@ -2469,24 +2581,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: '859e13193ab2db2f10197aaf8b9699a177d480c6', 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: '2e197eebf453591ec714ebbc60a6c8ba57646cb9', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+        }
+        else {
+            listContent = options.map((option) => renderOption(option));
+        }
+        return (index.h(index.Host, { key: '0ffdb0e5d1dc13c83b692244f8e5e65f70c9c745', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 '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: 'ff204bc8c903a5d0a47b95521781df2467c9b4a7', name: "header" }), index.h("ul", { key: '2685e64254a9424f9da75787c3d18ff182e9f7a1', 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
             }],
@@ -2532,7 +2709,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: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, index.h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, index.h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), index.h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
     }
 };
 
@@ -2541,7 +2718,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: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, index.h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || index.h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
     }
 };
 
@@ -2598,11 +2775,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: '4ff7cc350e34059ad4df757b88112756c7f5b83e', 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: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (index.h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || index.h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && index.h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -2677,7 +2854,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: 'ec426d05bbf030c8e782e7e74fda505bc8b9011a', class: "xpl-header-accordion" }, index.h("div", { key: 'b9da9063757f65ab682f542dd138f3f8f8dc471f', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (index.h("xpl-checkbox", { key: '8b97b3e36f49549dcd18978628bfde93f75a084e', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), index.h("button", { key: '7bdf4043d478bb1c04f44de14717ac3753236e1a', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, index.h("slot", { key: '0a6197fd9b5dabff14f1da4137d8a99c7a4cbc93', name: "title" }), index.h("xpl-icon", { key: '5a74ba13feb88a46df377f255eb134d5b609be53', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), index.h("div", { key: '8d048d3480f0185ed34440c3e6d84befb3cf4dee', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, index.h("slot", { key: 'fa374cd9feba5ef3eb72d50f027651dc84f80ec8', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -9893,6 +10070,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",
@@ -11633,6 +11845,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",
@@ -16608,10 +16853,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: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, index.h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, index.h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "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: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
     }
 };
 Icon.style = xplIconCss();
@@ -16737,7 +16982,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);
@@ -16769,13 +17014,13 @@ const Input = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (index.h(index.Host, { key: '406ab6d1b4d43ceb06cdb819cec8699d2d3322b3', class: {
+        return (index.h(index.Host, { key: '6a032f3ec4c23c85bb9f34606beff282ce35d762', 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: 'd4462b1d843acafd2f8762610ba77c638c072407', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '0f351ea2720977c299b4f166d12a6315ea6ee54b' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("label", { key: '05603b97ba86ee23e52a726f31b8c51630e5e703', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: 'd411dee63f5754c6f56992412d9f671979e8bdc9', icon: "alert-circle", size: 16 }), index.h("span", { key: '39d3b5c9c853bc8986e4854542056d018c649a8a' }, this.error)))));
     }
     get el() { return index.getElement(this); }
 };
@@ -17011,7 +17256,7 @@ const InputColor = class {
         };
         this.onHexInputChange = (event) => {
             var _a;
-            const hex = event.detail;
+            const hex = event.detail ? event.detail.trim().replace(/#/g, '') : '';
             if (hex) {
                 const [r, g, b] = hexToRgb(hex);
                 this.colorValues = {
@@ -17112,10 +17357,12 @@ const InputColor = class {
         const { r, g, b, a, hue, alpha, hex } = this.colorInputElements;
         hex.addEventListener('valueChange', (e) => {
             this.onHexInputChange(e);
+            e.stopPropagation();
         });
         [r, g, b, a].forEach((el) => {
             el.addEventListener('valueChange', (e) => {
                 this.onRgbaInputChange(el, e);
+                e.stopPropagation();
             });
         });
         [hue, alpha].forEach((el) => {
@@ -17143,16 +17390,16 @@ const InputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (index.h(index.Host, { key: 'f665a747f8938212d0c9ada4f251a9fc880ba82c', class: "xpl-input-color" }, index.h("xpl-popover", { key: 'eac77d1e9f350b3b0dd66001a7a596d156a75a53', disabled: this.disabled, display: "menu" }, index.h("div", { key: '73d1468c4261fd9a8e957189129cc660757d849f', slot: "trigger" }, index.h("div", { key: 'fa098788863247a7c87e4efe628b5b47f0bb3113', class: {
+        return (index.h(index.Host, { key: 'eb7a6f1f77a5d184c05a7825f9f20829b8112d49', class: "xpl-input-color" }, index.h("xpl-popover", { key: '5f1588d21649cbbdfcadb0ab2bd46f848c7fc2d8', disabled: this.disabled, display: "menu" }, index.h("div", { key: 'cecec4d250e2c3b26fc364436f2d16fb97162dff', slot: "trigger" }, index.h("div", { key: '02a4945abec58618cb116eb04bca1c4672f16a4f', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, index.h("span", { key: 'd471146ff3ba7b026dba1424599361d0aa0fe49c', class: "xpl-input-color__color", style: {
+            } }, index.h("span", { key: '622be07c8fe6de7c5d714a8961146ff53160247d', 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: '5cd87456ef093611b6be8906c24b235ea7f19524', 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: 'fd14c6b7aad4e33977008cf11b5cbff2352aab80', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), index.h("div", { key: 'df7bdf567c9a697f8a5e737e5a8cb1b1b962dbb9', class: "xpl-input-color__menu" }, index.h("div", { key: 'ae630752b48e9d211273da6f3dadda8ace603ba2', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), index.h("div", { key: 'ad85b32a641a3bf0face2efa81fe14de17777fdf', class: "xpl-input-color__menu" }, index.h("div", { key: 'caaee0b4bf18c0c3dbc72745167df475b0cc91cc', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -17160,9 +17407,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: '25ffc6bb94f0e861a3bc5a6da5c01e0901d1779e', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '7d256baab084f96c56724b4eede835a13bee7055', class: "xpl-input-color__grid" }, index.h("input", { key: '227309d4590722c24c2d053c013a6d473e44a3ee', 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: '34867bf1cbca3e4d56552e02ba99a112c061be64', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), index.h("div", { key: '3070aa4d152d18944a7942dc7298538be432fb2c', class: "xpl-input-color__grid" }, index.h("input", { key: '557445a1167af6ebfb786fbe390b63167ac0c2bf', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), index.h("input", { key: '2d43e7c9f98fd5cdcccde7206c0cf4e5ae6bde6d', 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: '86cabdd053207c6073592b46a85fe74ca74942fb', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -17172,9 +17419,9 @@ const InputColor = class {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), index.h("div", { key: '26a562a220b2458e0ee99906d27d8a11e38f2d02', class: "xpl-input-color__preview", style: {
+            } }), index.h("div", { key: 'bb9ee49e36d78441380248bdb021443f9abbb250', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), index.h("div", { key: 'a77a7325f72ef73e6aa2d6968ae4afd1e010cf2c', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), index.h("div", { key: '08bc820781d2de091036289b50f9f5f3810db61b', 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;
@@ -17297,16 +17544,16 @@ const InputDate = class {
         parent.removeChild(wrapper);
     }
     render() {
-        return (index.h(index.Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', class: {
+        return (index.h(index.Host, { key: 'c2707549e3285693ce4c7e0449e047be90640504', 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: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '125e566456a2de4d75fe38fee50a78de886b8009', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 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: '34c346be1a3c66d4e5eab1882426ef0691c8b6cd', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: '1d2ab5b80daad9964e364a069f548d5250067f84', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17355,18 +17602,18 @@ const InputFile = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
+        return (index.h(index.Host, { key: '579d1ec1094bc5b1aeec622996694728fb1facca', 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: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', 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: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (index.h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-text-callout" }, file.name), index.h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 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: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), index.h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -17854,21 +18101,21 @@ const InputPhone = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
+        return (index.h(index.Host, { key: '894f6acde4dea6d5640d4e51bc4e9bbe82d9d3ea', 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: 'c3f32f61ea3d344932721d0ef166db91a18110dc', class: "xpl-input-wrapper" }, this.isInternational && (index.h("button", { key: '4896e1dfa9e2fd2b0ff7472d45999b8aa36dd5f0', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (index.h("xpl-icon", { key: '1a321bb5d7c82b6e9f7a3028ef68543de7b4180e', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), index.h("xpl-icon", { key: '8820c57560cd5874eed4da9bbd4aeb77cba0e1cc', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), index.h("div", { key: '36bdd356e1a396927e8c2791f0d826970b08fed1', class: "xpl-input-phone__input-wrap" }, this.isInternational && (index.h("span", { key: '4557ddea12cc4dcf0f8d992b97fd89b3d799591e', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), index.h("input", { key: '6dbff61ee5fdc564f685f112f7cc3659b3687490', ref: (el) => {
                 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: 'c7ca36fdc2cee73de3a29f6019c8a35a74bba654', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, index.h("xpl-icon", { key: '4e5aad566c1052e72f6e7ba10ca9a98f97421626', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (index.h("xpl-dropdown", { key: '0f81b1d30e3f0b52bfd9085ffb37b6c5733c6e8b', ref: (el) => {
                 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: '8a73a67eba2d6a02b6f828f21c451c843782a0c8', slot: "header", class: "xpl-input-phone__search-wrap" }, index.h("xpl-input", { key: '1cef63c8fdb66aa8288af0a0fafe72701573a82a', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 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: 'fa51061eb3617c3f55485cff16dbc1e307d98f08', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -17987,7 +18234,7 @@ const InputSearch = class {
         return shell;
     }
     render() {
-        return (index.h(index.Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', class: {
+        return (index.h(index.Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,
@@ -18171,11 +18418,11 @@ const InputTime = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: 'a48ebfd7cd0578b33bd11059f9bebb342bf954f7', class: {
+        return (index.h(index.Host, { key: '6ed0e8da81a96e0e4e7078a7477c9a4ee92532ba', 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: 'bae0f7e9b9e3f14b5d780a0300ef672da9301596', pre: index.h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (index.h("xpl-dropdown", { key: 'cd8ae7e4c7d130bdbf44aeb2f806b3c9a490d8bb', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }
@@ -18609,12 +18856,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: '4290084c30b164abb653943a81783c35531d6316', 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: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), 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 {
@@ -19102,6 +19349,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 ||
@@ -19137,7 +19387,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: 'b6d5d1c4b2fd755b74d2b138e937cb8f70256e17', class: "xpl-modal" }, this.isOpen && index.h("xpl-backdrop", { key: '972f5031f80eb1c394f7e5be5dc04a604bb91a34' }), index.h("dialog", { key: '544203fa98a61f4f1e41cbffca3c1048fab8e236', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, index.h("div", { key: 'f37cc41033d765577ae3280d2b4969e71aabe369', class: "xpl-modal__header" }, index.h("div", { key: '356a2ba82b16bd1c47813d6589b45a901a108d10', class: "xpl-modal__title" }, this.variant === 'warning' && (index.h("xpl-icon", { key: '4144c0f94f9760b7ed3379b2a2e7f69e31ef0829', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), index.h("slot", { key: 'fd2c48017a620ec83ce0f79d13d18aa2aae57b14', name: "title" }), index.h("xpl-button", { key: 'd6c816ff2a44911333196531641d620a0cafafaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, index.h("xpl-icon", { key: 'b7c7b6754d0a94f3aa927d390c35faf165b1b776', icon: "x" }))), index.h("div", { key: 'fb96c212c96648434f821c2ec4169fb6499f1230', class: "xpl-modal__subtitle" }, index.h("slot", { key: 'b838fbe968ffdec5f5d71cffde42c02b6bf085f1', name: "subtitle" }))), index.h("div", { key: '7d9230791de065bdbf9703821021ce6230c8b568', class: "xpl-modal__body" }, index.h("slot", { key: '60449861f56680023c79139eb5dc04a2cfe5fbd5', name: "body" })), index.h("div", { key: 'adb79ff548bb3475c7b8bd4fe9bd3b9f2a454f89', class: "xpl-modal__footer" }, index.h("slot", { key: '32148fd7cabc15deb2f40b6706a5e1761dab4cde', name: "tertiary" }), index.h("slot", { key: 'bbacc31d2b03825ab14fb08e0307ac70767c3ebd', name: "secondary" }), index.h("slot", { key: '89f492273b1d71772551c2454bd4bbb56899fe3b', name: "primary" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -19213,11 +19463,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: '605d14e70deb43e79834d39cb3a078b3298e853a', 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: '4d7f4ffc4d0391fb3b20db6be3a1c32126f02dfe', class: "xpl-nav-header-menu__profile" }, index.h("div", { key: 'f79f233a7dd322329b4f571b6858d5f6954eb972', class: "xpl-nav-header-menu__info" }, this.username && (index.h("div", { key: '5672342ae08198b52525ca2fe75d0d489e678c6b', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (index.h("div", { key: '90f13a468d30f939b3e99f932dc96746d99c4196', class: "xpl-nav-header-menu__email" }, this.email))))), index.h("div", { key: '70ae77baf3570e700639e7d8d387c5e4df7739c4', class: "xpl-nav-header-menu__right-aside-mobile" }, index.h("slot", { key: 'e9e1170bc8648f3676e083c7aa5c03d16e09b2ed', name: "right-aside-mobile" })), index.h("div", { key: '225c538dc72259da900406eb3fc6f222f93292e1', class: "xpl-nav-header-menu__slot", role: "list" }, index.h("slot", { key: '7631ce2ee1e6acdf4fdc9d54671e186de597de63' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -19234,11 +19484,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: '1653225a63a82d72768a162430f11918d3b57810', 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: 'c04f946780264be513575537ee1041b576e1834f', name: "link" }, index.h("slot", { key: 'cd415288c4caf0c7ffd4906531f858a0e21cbb93', name: "icon" }), index.h("slot", { key: 'a1678415d40e459597738013500a715396b5b759' }))));
     }
 };
 
@@ -19254,6 +19504,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;
@@ -19287,11 +19538,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);
@@ -19305,28 +19574,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: '48dc3bfd2f81b621c0c4cacd5e8aa43e974a3c2b', 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: 'a8eb321da956ac31d62ee6a8e776a9949733310b', class: "xpl-pagination__rows-per-page" }, index.h("label", { key: '42688af51596e843faec89c04b99eef0569b9289', class: "xpl-pagination__rows-label" }, "Rows per page:"), index.h("xpl-select", { key: '276646a15894d4434d72bbe3a9e74fe4ec151d09', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 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: '808b1a352b4500e593e9887b9957a292bbc64b18', class: "xpl-pagination__pager" }, index.h("button", { key: '9a18f0e6843deeb1c4efcb3cbb29e8c22ebee923', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, index.h("xpl-icon", { key: 'd761379de5063bf5739c92f90d1a795ccda03b5f', icon: "arrow-left", size: 20 })), index.h("xpl-select", { key: 'cd18e7c9a1d15a6b4a353b32f90bfe646ab321ee', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
                 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: '117fa90e904994b44fe86055aea62af0a404904e', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), index.h("button", { key: 'dbd3c30917758594d41fec4a313e204ccbd56e16', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, index.h("xpl-icon", { key: '4ca90e03195972c79a9a6b09027d8cf594a1dacc', icon: "arrow-right", size: 20 })))));
     }
     static get watchers() { return {
         "currentPage": [{
                 "onPageUpdate": 0
             }],
+        "totalPages": [{
+                "onTotalPagesUpdate": 0
+            }],
         "selectedRowsPerPage": [{
                 "onRowsPerPageUpdate": 0
             }]
@@ -19341,11 +19609,11 @@ const XplPanel = class {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (index.h(index.Host, { key: 'e9a747ba679f6f9f907d13217f329947bff93e31', class: {
+        return (index.h(index.Host, { key: 'e028327c45513aed4bdaf60f230292c3ca427abb', 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: '131b41a89c2d34ee7e1c9313a8659bc62c5a882a', "aria-hidden": "true", class: "xpl-panel__accent" }), index.h("div", { key: '67e1dae738eb616fa024fda3f64fcf8008c4fbce', class: "xpl-panel__content" }, index.h("slot", { key: '39ec3513aaab2138ae1c7b45dea4e3bc7ef9a9d1' }))));
     }
 };
 
@@ -20008,16 +20276,16 @@ const Popover = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '6fe479a39ee565772785c7b540c4e0915c5403e4' }, index.h("div", { key: '350452ca097bab13e7f06b3d1aa5e2774d80104b', class: {
+        return (index.h(index.Host, { key: 'e6c2991b7550ee3d49d0e6389f0e5734873d2ec9' }, index.h("div", { key: '5feb4134506e40be7f1485913f197b5e976a22eb', 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: '0fd0c9ecf34e28f05b1c74cd54b259af985a8f48', 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: '036625c11df6140ae5e66c5b07d48034d4f85a8c', name: "trigger" })), this.display === 'arrow' && (index.h("div", { key: 'dc701c9b71dfc1ac2cd5397928366c807ec12680', class: "xpl-popover__arrow" }, index.h("svg", { key: '714129740bb1ced6b465636e85fa006733d03e20', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'aa489883a369f713b6f04093ed39fe4f91088213', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), index.h("path", { key: '1e341b0b3f7be9c4387c3b2560d31f023090b5d8', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), index.h("div", { key: 'fb1ca2715f2bbb0bd32ed532e61da5f2a8aa8b63', class: {
                 '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: '365e7a91de4254cc8f8423b1e832d5adeff1490a' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -20057,12 +20325,12 @@ const ProgressBar = class {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (index.h(index.Host, { key: 'e5cc7a2231ed74242241723c9f0a57444a8000bb', class: {
+        return (index.h(index.Host, { key: '25abe25b042ab5fb4d81246275538abaad3c4086', 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: '926c1407043a98c265dffbaa616b640624671352', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (index.h("div", { key: '78ece9b7848541236ce2ad4309b664204bfb370e', class: "xpl-progress-bar__header" }, this.label && index.h("div", { key: '9b673b4ae9aeebb7bebd9a72dc4384383e15227d', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (index.h("div", { key: 'a144dba46c7ae48ad54e9655b4335a253b1bc1bb', class: "xpl-progress-bar__icon" }, this.isError ? (index.h("xpl-icon", { icon: "circle-xmark-1" })) : (index.h("xpl-icon", { icon: "circle-check-1" })))))), index.h("div", { key: 'cf0f7a209c2278e4d1ccf00577457d175abb78bc', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (index.h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, index.h("div", { class: "xpl-progress-bar__indeterminate" }))) : (index.h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (index.h("div", { key: 'ff5b336a3b3a14cb4e0531688705983350f9812f', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
 };
 
@@ -20123,7 +20391,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: '1c545195c093b97f72d81801efc686eb98fec787', class: hostClasses, role: "group", "aria-label": ariaLabel }, index.h("div", { key: '754af5ed292fb0d34c61aec88ccb87f52e2076bf', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get watchers() { return {
         "steps": [{
@@ -20157,14 +20425,14 @@ const Radio = class {
         return Boolean(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '1cda65b10ee03e06c30b2c501d7f2ec4153619f6', class: {
+        return (index.h(index.Host, { key: 'a8c73f86c07a42b9d44e7778fcac685b6d6ea476', 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: 'c63e056408613a586a18e6dac90cd576c604114f', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), index.h("label", { key: 'd2c64304f89a583cae05c111b1a82524c2f130b3', class: {
                 '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: '12970b242bb30cf2fd68a73db5c6f3f252262355' }), this.description && (index.h("small", { key: '1224b9d9f183d46a95535216d24150c1141b6cfe', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -20176,7 +20444,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: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, index.h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, index.h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
     }
 };
 
@@ -20189,7 +20457,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) {
@@ -20379,16 +20647,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() {
@@ -20407,21 +20680,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: '72887e1c0864e77cf43e502d30a796e32942f643', 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: '2d1aa67dcf1fa9aaa5b51b1eb944958a1741ee45', 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: 'bc34bf6bb4c306753030ec05d011dfe80377256d', class: "xpl-input-wrapper" }, index.h("button", { key: 'f9a1c1ce4014e780cf866f75f8852d0b234e5ccd', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, index.h("div", { key: '5cfec98b2e829ea48e96b373e09e740d5bf02ef6', class: {
+            }, type: "button" }, index.h("div", { key: '1dbd694fb71a136f578382c7d70e2a2c6077c62c', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -20441,7 +20714,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: '5fd8e1d7b0be5b3daf4c2daecbb5d6e4f02d7493', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (index.h("xpl-dropdown", { key: '312b8917cd407224c0802b8cfc285168c26a8de6', 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;
@@ -20450,7 +20723,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: '3c88344463e124f7ed752bd249563f3f8f7b9204', type: "hidden", name: this.name, value: this.value })));
     }
     static get watchers() { return {
         "choices": [{
@@ -20471,15 +20744,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: 'fe3b0b9e5f9facf3f7fa469a8928d7ed8971e6f5', 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: '09d0de65b9a40446a4801087e91c1bf3e1d3989a', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), index.h("div", { key: '3274980b1cb4867d163e83c80520e44bcc8d0121', class: "xpl-side-nav__wrapper" }, index.h("nav", { key: '06ce207917af66ff8f238c6cc85e8a8d5f47efbc', class: "xpl-side-nav__content", "aria-label": this.label }, index.h("div", { key: 'ce08165951c7b40fc21e846f6dfe7ca44b57326d', class: "xpl-side-nav__section" }, index.h("slot", { key: 'da65836d8006756b3a0d408d343b445a3bccb271', name: "section" })), index.h("div", { key: '93b522d531086a914d2cd53fe859da2436df9552', class: "xpl-side-nav__footer" }, index.h("slot", { key: 'a2cce3bec1d5269316388ede23934d2cfb835cf9', name: "nav-footer" })))), index.h("xpl-backdrop", { key: 'e98662f2e022d9d9edfa16b2c62d3ca40755b829', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChanged": 0
+            }]
+    }; }
 };
 
 const SideNavItem = class {
@@ -20487,6 +20958,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;
@@ -20508,11 +20980,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)
@@ -20526,15 +21053,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: 'd20950311a1dd97fff43eac3908a64a43aa2a332', 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: 'b3aa86bdacae535dae31b93fa6f5013614f682bc', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, index.h("div", { key: '91be28afd11a250696e003d0a8abf70f6e8b35c6', class: "xpl-side-nav-item__children-inner" }, index.h("slot", { key: '1536a898b39fd1f30c26d9d71f79726e377ee8f2' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -20554,7 +21086,7 @@ const Skeleton = class {
         this.size = 'custom';
     }
     render() {
-        return (index.h(index.Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', class: {
+        return (index.h(index.Host, { key: '2cb86d68bd14f87ab1a6467716ec456cc1bfd6a2', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -20597,7 +21129,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: 'f42f8f576d4e8387511d0cd5e5a24913606dce5e', class: "xpl-slideout" }, this.backdrop && this.isOpen && (index.h("xpl-backdrop", { key: '5e80a7f340487ee653d266edc8d7cbd7a1ae5a52', onClick: this.handleClose })), index.h("aside", { key: 'beb647a98119f53d01a911af9df5ea97babad7c1', class: `slideout slideout--${!this.isOpen && 'closed'}` }, index.h("header", { key: 'ef3ba3c61fd5542696c271d0d3d3d40214a2605e', class: "header" }, index.h("div", { key: 'ed343a1553fb5da4d5db9f6a746f89eadf258f68', class: "title" }, index.h("slot", { key: '0793234025cb9ed92e45805f74ad85928c71f585', name: "title" }), index.h("xpl-button", { key: 'b9049478a5ac330b6439fc5a71440db634d51b5e', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, index.h("xpl-icon", { key: '1dad5a0fc6d0b1888a450639b9f40d694b9942db', icon: "x" }))), index.h("div", { key: 'c5f3f124e81ce4b916af4dd114c8ce9b45d567c7', class: "subtitle" }, index.h("slot", { key: '41d10f0742562a8dc824b45b2987d45dda76abb4', name: "subtitle" })), index.h("div", { key: '5a60f3f9e9c5fd86d8262f47eea7b83f64e149a2', class: "search" }, index.h("slot", { key: '80f950ece315afe975aed51ac8a10804670eb8fe', name: "search" }))), index.h("xpl-divider", { key: '02e53e01c2f148c8bbd54b086bac669ee65014ba', tier: 0, class: "divider top" }), index.h("article", { key: '5425462fe1ef6104c5d8c7d5c4c892cf77349d38', class: "content", tabIndex: 0 }, index.h("slot", { key: '370dd088e84a33112f7f3e1c46341f521430485a', name: "content" })), this.showFooter && (index.h("footer", { key: 'becd0aea10f8a35af12cedae53814b1c9db92669' }, index.h("xpl-divider", { key: '5f53e23fbd9330d1b28ba705a7b9438ba098a6a7', tier: 0, class: "divider bottom" }), index.h("div", { key: '00c0c39b04999a12b47d5fe35bceae2ac8dc1def', class: "footer" }, index.h("slot", { key: '024d1c72ac7ab44b93608020ef20619b504d6725', name: "tertiary" }), index.h("slot", { key: '199910e96905946e393fcd600ddc7878701be5fb', name: "secondary" }), index.h("slot", { key: '55f351a5bb4c18833c5db4408ce01b01c1853fe3', name: "primary" })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -20762,6 +21294,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';
@@ -20938,6 +21471,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;
@@ -20968,6 +21502,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(() => {
@@ -21136,10 +21674,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) {
@@ -21292,7 +21833,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,
@@ -21425,10 +21966,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: '90f81b56f9d1d482ebe9bfb3e11a9b796bdbc5d2', "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: 'b2de2e79c06bde4bde5c99cc3d91045b1e73b72e' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -21456,29 +21997,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 = () => {
@@ -21569,27 +22104,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: 'b2ed918c3c434b6403fe6d18619d0a1a5bf864bf' }, index.h("div", { key: 'd55accaecba09869f07dcc7030eca5cc1175dd95', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, index.h("table", { key: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', class: {
+            } }, index.h("table", { key: '6406b92ee6717c80f5f363110fda38fa5bbe61ff', 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: '2f89526153301be4ad9ba2f2ec2dac791b4702ae' }, 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: 'd1c762bc09191ac0b5b84ade9409d87a726f15f4' }, 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: '99e0e8cbe768f3c565d5fd6328c6e305483bf3f1' }, 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 {
@@ -21925,11 +22457,11 @@ const Tabs = class {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (index.h(index.Host, { key: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', class: {
+        return (index.h(index.Host, { key: 'a030a35038572d70f3fb2b979adbaa56d77a1d49', 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: '8260974c68020dea475f6e0780c766abfca94fda', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -21940,17 +22472,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: '73a1e4ad4830b9b22b4eee00bad5793705cf3ac3', "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: '8008620a99470824fe61ea535fb46a3dea75afc3', 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: 'be53fe549e5b9c887ad90cbafcc8f95631361fee', name: "heading" })), index.h("div", { key: 'd97b138b5fcb0207684698752ec72c1dcd9464a3', class: "xpl-tabs__panels" }, index.h("slot", { key: 'fe40edbf2c9f20d02d75ab62a142e7df04ef0afd', name: "panel" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22096,7 +22628,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: '13a500c63b29cb19a53e2abb69f86f62164d79d2', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -22104,7 +22636,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: 'ceb929c98cb7a66390cf1c09b32535696e4d2b04', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, index.h("xpl-icon", { key: '8a5a6f13014334fee2193703674bdfd49710a265', icon: "xmark", size: 10 })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22154,14 +22686,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: '8b53818d7882160ab13ba700520c2c54f3d0b630', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, index.h("div", { key: '6cc47a618684dacf1031bdacfc6cb9134db659e1', class: "xpl-toast__left" }, this.showIcon && (index.h("div", { key: '2360e3bb5d173d97fb63e3ff2069ef6ac53f2a7d', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), index.h("div", { key: 'e4c318a21bf17d951deade92c9288791b6664a4f', class: "xpl-toast__notification" }, index.h("p", { key: '6697407277294d71106c9429f5822966572c1f06', class: "xpl-toast__title" }, index.h("slot", { key: '108769cc76b1ed7b42ad436885831d9e7fd4412f', name: "title" })), this.caption !== '' && (index.h("p", { key: '7570a85eaebbd9c236841541557324b45c86dab6', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), index.h("div", { key: 'b5f98b93c56f877d6c749c82550aad3b86bb3786', class: "xpl-toast__action", ref: (el) => {
                 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: 'c2007b4a30836c3a1b071539029c1290875bdd2c', name: "action" })), this.dismissable && (index.h("div", { key: 'f0706d95d8091beb32dfbe1535ebbdfb1ce9a018', class: "xpl-toast__close" }, index.h("button", { key: 'b1415be4d68035d21857f688f16558470cca2f81', tabIndex: 0, onClick: this.dismiss }, index.h("xpl-icon", { key: '61ba3accb69a2637190b5ee3a4f7105fdf896af7', icon: "x" }))))));
     }
     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) {
@@ -22170,7 +22702,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: 'c060588959e22e35117e15925ed57e951b4fe51d' }, index.h("div", { key: '69572a540e2dcf3c819a2af20b6e900ea8d483c9', class: "xpl-tooltip-container" }, index.h("slot", { key: 'b767815cc05aec2ce3e3f0411602659d142ce64f' }), index.h("div", { key: 'eb80138e423992a8b5f8f823029f1a57993e5355', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (index.h("div", { key: '01c556ac6491bca26550dd1dc34689ff09e2d418', class: "xpl-tooltip-arrow" }, index.h(TooltipArrow, { key: '8844c7e4b28132fc8a11c1a9ce6920061ae741b4' })))))));
     }
 };
 
@@ -22414,7 +22946,7 @@ const TopNav = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '9f65d609c6b4cf08b2899216fe8bc70fe0e12db9', class: {
+        return (index.h(index.Host, { key: '6b22351e62f90d5fec04c0dafa5208d9a495b67b', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -22422,15 +22954,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: '5f29a00b93b1affda6aaf900e42cc6ff33f1b90c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, index.h("div", { key: 'fbe9cb0b1bc7d9bf9be1f04e64cb93ff24866879', class: "xpl-top-nav__inner-left" }, this.navControl && (index.h("button", { key: 'b22532e39a57f9a250617aa09e6e0dde6dfeb9e5', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, index.h("xpl-icon", { key: 'a9f7dbb6287d3e11ea5b839bedb8d808c67bcd8e', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (index.h("div", { key: 'c702fc39d186f37901c8c6b4e5d378eaee2faa99', class: "xpl-top-nav__brand-bar" }, index.h("xpl-top-nav-item", { key: '980b470563ee3d4e3e388cd089622041f307cd0b', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (index.h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
                 ? 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: '0740be056833bd15c798a44c5c3dbe80ed5e15fd', 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: 'ff4f4534944dc54df40c289e65a4ab7d75bd572e', class: "xpl-top-nav__left-primary", role: "list" }, index.h("slot", { key: 'fdec30ffc838d7e73788932aa6fef46fac2fe0ab', name: "left-aside" })))), index.h("div", { key: '69d5b669744ff3aeb0c4316f4d5b27b9c461652f', 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: '7ae70d39f31243b77f09af7b0e4327d0bb1b1dfd', class: "xpl-nav-right__list" }, index.h("div", { key: '7bafc8eab226ba0ff77ae98281d4665eb6b75fbe', class: "xpl-top-nav__right-rail" }, index.h("div", { key: '9914028435faebbd3d539d763b71500643017ebc', class: "xpl-top-nav__right-lead" }, index.h("slot", { key: '974117684ec371dc87264bfbc0da5e456adeec9b', name: "right-aside" })), this.hasUserMenu ? (index.h("div", { class: "xpl-top-nav__right-user" }, index.h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (index.h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (index.h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
                 ? undefined
                 : 'Open account menu' }, this.childAccountLabelText.length > 0
             ? this.childAccountLabelText
@@ -22748,14 +23280,14 @@ const TopNavItem = class {
         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" })));
     }
     render() {
-        return (index.h(index.Host, Object.assign({ key: '4758b54726318591f140bcfea8d4db22c70c96ff', class: {
+        return (index.h(index.Host, Object.assign({ key: '6d68c9bb7527410185e6ecd176c7a9a887359af9', 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--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" })))));
+            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (index.h("div", { key: 'da5414f6573aa6eb604721c814164b9a4987091d', class: "xpl-top-nav-item__dropdown" }, index.h("slot", { key: '116c436b4ef2902c50c5dd78c8d292190a3c58e4', name: "dropdown" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -22779,7 +23311,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: '965003722d536d4b9b7acd326ed7ae0cc2ac302a' }, index.h("nav", { key: '25d4348939fd65e00ce7bec962a31d65ff9473c3', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, index.h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { key: '3cb1d9038135c1892a3780c9242bbd544f6f0f5f', name: "main" }))));
     }
 };