@xplortech/apollo-core 2.7.0 → 2.7.1

package/dist/esm/{xpl-avatar_61.entry.js → xpl-avatar_54.entry.js}

@@ -167,7 +167,7 @@ const Backdrop = class {
         this.relative = false;
     }
     render() {
-        return (h(Host, { key: 'ce11926c0ef08f0ae9d77fecfa813f20b6eee229', class: {
+        return (h(Host, { key: '072fedf411c5d8671ec2d8a6ff639e5adf93e15c', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,
@@ -204,7 +204,7 @@ const Badge = class {
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (h(Host, { key: '6d8b154300f5a676c58d8633c2b5f7514967f764' }, h("div", { key: 'bef0970eb3185b1afb08ece888b63509e69ff15d', class: className }, h("span", { key: '90e51d0f3d74a99268b9a4944a94b6c0096f1ea9', class: "xpl-badge__label" }, h("slot", { key: '5f13f42adbbcfc0698f25687ba27f4bb0c63d5a8' })))));
+        return (h(Host, { key: 'f1a45af398443a5330afe856ac2442aa34cadf24' }, h("div", { key: 'fecb691b2b11414de0a03e119dd63332ade79a3c', class: className }, h("span", { key: '6c4169ea3d4f0f7cdaa03841ec72ac15f9e209f3', class: "xpl-badge__label" }, h("slot", { key: 'c7d96b70e9bcd161c279bf943c2cbc7248e2a53e' })))));
     }
 };
 
@@ -269,13 +269,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 (h(Host, { key: '01e821a96ff2f4f41050a524ed6ec76e8f8ae71c', class: {
+        return (h(Host, { key: '373b38c40719c248968ed93381309584f24697a9', 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) && (h("div", { key: 'e0b8fc78558cb0feff957deda21e9a6009a41ebc', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'b1ad22088243b609c67275091a6b7ec0f5bfcd2b', icon: this.getIcon(), size: 24 }))), h("div", { key: '9ae85de66f2092d2f689e881ebf5cb28b442a804', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: '5a4a146c870f4c12abe4a5ef1e5d7aa51d8e7507', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '115e1349f08a077a898556174c7f14c22e43eb8c', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'd2ebd4a9f6bf5902958c071a476da8b5b2888c5c', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '763ce0af40d4a9a5d62f18ee08085a8455819779', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'd59e222b9eb5d766953d26609a48366a32499814', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'ec7d24375a62f20c7309d7b49d88f6db1eb2a891', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: 'f45280a420a3556100cd0ed48c39124d400becd9', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'b12f8facbdad390e2069374163048099a33aa309', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '35ee47db756bc0f6b6cd0a2b0cd890a4ec10ff7c', icon: this.getIcon(), size: 24 }))), h("div", { key: '8aaca62cbd7b3cf353bfb35fc2f679932f2b0ade', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'fded85ef43b5186704195312621a33b7b823d19d', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '1b7386b32891789f8cc425da922f7c3ee60fe5a6', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: '0b4b8e89db7cc6c4a55e207cf0be1b36956fe243', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: 'c15e5cb0ff332f2ca809dcf912fc7a4c68d47538', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '6f20f721df8eb994ef9935d2c6f634b3460d9d77', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: '2fab1fec767aaed2bb36ee2b40bcf84a48ad6ead', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '7747d3e4aae5426d0e3344fb7aab92a4f003cf4e', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
 };
 
@@ -288,7 +288,7 @@ const BreadcrumbItem = class {
     `;
     }
     render() {
-        return (h(Host, { key: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', innerHTML: this.chevron })));
+        return (h(Host, { key: '98314b8841ba9d900dbba227363865efb26faf4c', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '26bf86067dc2348b6ca96243bd1f9513ca187a00', role: "none" }, h("slot", { key: '802b606cce1052ea7fb859260627d6c6801ed78f' })), h("span", { key: '22de35338bf4439a23f8c08a7ea46d1d4f2b68e8', innerHTML: this.chevron })));
     }
 };
 
@@ -297,7 +297,7 @@ const Breadcrumbs = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
+        return (h(Host, { key: '36533f6524e01aed62e293ebe93d8eea34b6b59a' }, h("nav", { key: '6a5562e639044f9d9d12a6365df69c5181f5bbba', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '99463e4808425aa8478a5e8fa2a113831eae1ecf', role: "list" }, h("slot", { key: 'f4d20df3a834f100663786d47881f742c9691969' })))));
     }
 };
 
@@ -348,7 +348,7 @@ const Button = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'dc9baff2fca5d300d4f10d854669fe44ce9dcf2b', class: {
+        return (h(Host, { key: 'fc2207b2f07ecccd8c076846406b7c5d2ed6854d', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -386,14 +386,14 @@ const Checkbox = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '278efc899d85f3c69d78eae9c893dd95a5c1a0fe', class: {
+        return (h(Host, { key: 'a73acf5a3394c8f1060f9095682093a1db3b09db', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: '40ff6da70e68b75c0fda7df23eccfd04c152a4e1', 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 }), h("label", { key: '19ebb91dfdb4514b563bb20b7fa2ca06294d2d45', class: {
+            } }, h("input", { key: '7da5f17d827bfb6d63a4933977daee75c9845899', 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 }), h("label", { key: '86669521b030289b55279bd6fceecb5d060c7138', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'ceb7f27e19f4256b3c5317e17f4bb8512c6962a6' }), this.description && (h("small", { key: '78a5d2ac044006361a8ce075a2ad8d872f384203', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'b40aafb664cbac2092938afd45683cfc0313beac' }), this.description && (h("small", { key: '06e2245639b577f5d09afdf9000e43d076758e80', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -438,7 +438,7 @@ const Choicelist = class {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: '3e1881fd40ea2aecefbb24951920b92ac08ef029', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '052b5c72e4bc37b84939b639e070b8e692064ffe', class: {
+        return (h(Host, { key: '003270ebbe4ccd9c204774f2c41302e64697a358', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '388763663e1e9dc48f53b4e8569c3c58942fb631', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {
@@ -467,7 +467,7 @@ const ContentArea = class {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: 'cef99f9f6ab92587151d12cf86b67fedba498b66' }, h("main", { key: '17b27ecd7223283294ea7536a7cfe9c6580c4ec4', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '566d17a37f8389b10d95d2db96c4df1e3e0a01ec', class: "xpl-content-area" }, h("slot", { key: 'f084437566dc11ac51cd57e514ebb3bade2826e6' })))));
+        return (h(Host, { key: '2fe4c1c077c12e47600c737cc9266ae2eff8aaec' }, h("main", { key: '2e6c6f4b83cea96d629bb5af65c4ce6a4d20570e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '033e707fbc48ae523fafb25dd2952d3de9214908', class: "xpl-content-area" }, h("slot", { key: '04afc15969c2b1fb7e2feb3d8ae46248ee0f6e31' })))));
     }
 };
 
@@ -476,7 +476,7 @@ const Dashboard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '7894283eaf23b979cd2f30bdd3dafee98d2a82e0' }, h("dl", { key: '0e67c4909212d1ce954d2eef615443179925c1bf', class: "xpl-dashboard" }, h("slot", { key: '420cf5e409a1699e3b92b4deb38d49fca67caa50' }))));
+        return (h(Host, { key: 'ceeb8b27d9537c70e88360de21238c9ce2a3f90b' }, h("dl", { key: '3c4fcb92f472f14885053a1cb1db893618a6d8a8', class: "xpl-dashboard" }, h("slot", { key: 'fe4fa8fdec2ce84bdedc7aa404ab647abd189d11' }))));
     }
 };
 
@@ -513,8 +513,8 @@ const DataCard = class {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: '15499953647bf4b8c38c98b2beafbc30adececd3', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '6b4ac5e8e9fdffa254618b70f8ca4abb5c244361', class: headerClasses }, h("header", { key: '398ae3fcc452fe3281b006497cd5bca10d5405f3' }, !!this.leadingIcon && this.icon && (h("span", { key: '872e3b75a6cb7f3b6ae28f16da84b7264aeeb1e7', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '23452cb159ee169040132182e0c7701d6f537c61', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: '492cec94080ea654732e8a14214d78bcf844abf6', name: "title" }, this.name)), this.link && (h("span", { key: '2c31f2d7e9c96b81465a855e156504ce825c9f97', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1b5f695dc1062c8934569924334aafeb0c4f50d5', icon: "chevron-right", size: 16 })))), h("dd", { key: '6b45e5c1e3bb58fb2a690a633ad601694917b2fb', class: "xpl-data-card__body" }, h("div", { key: 'a6d27211c38c758f7cfb59d5597ac4f0c991bd31', class: "xpl-data-card__left" }, h("span", { key: '92f23b34ba9d72e934c6db3d120ab6e8d3ccfe97', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'c776c1bb00bca03edbe6e5ed60f712b830ba40e5', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '5d0acee9071c6356830c6f55dd5066ac68bbc356', class: "xpl-data-card__right" }, h("slot", { key: 'c513a4cd650d309fdc06045e02315fdab9256eae', name: contentSlot }))))));
+        return (h(Host, { key: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', name: contentSlot }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -534,7 +534,7 @@ const Divider = class {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: 'a0b934233c1afba99b2d3691a6ea14d3335e4119', class: className }, h("span", { key: '8d701723f174d846e717cd030c4faf72ae938da8' }, h("slot", { key: '5017353de8a9917358c9ba4194fe5a575720f8f5' }))));
+        return (h(Host, { key: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
     }
 };
 
@@ -2263,16 +2263,19 @@ const Dropdown = class {
         this.closeOnSelect = true;
         this.mode = 'single';
         this.anchorToTrigger = false;
+        this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
         this.updateDropdownPosition = async (triggerEl) => {
-            var _a;
+            var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
                 strategy: 'fixed',
-                placement: 'bottom-start',
+                placement: this.placement,
                 middleware: [
                     offset(4),
-                    flip(),
+                    flip(((_a = this.flipFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length)
+                        ? { fallbackPlacements: this.flipFallbackPlacements }
+                        : {}),
                     size({
                         apply: ({ availableHeight, rects }) => {
                             const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
@@ -2308,7 +2311,7 @@ const Dropdown = class {
             });
             if (!this.cleanupAutoUpdate)
                 return;
-            if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+            if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
                 this.isOpen = false;
                 return;
             }
@@ -2340,6 +2343,16 @@ const Dropdown = class {
             this.startPositioning();
         }
     }
+    onFlipFallbackPlacementsChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
+    onPlacementChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
     onTriggerIdChanged() {
         if (this.isOpen) {
             this.startPositioning();
@@ -2467,18 +2480,24 @@ const Dropdown = class {
                 var { groupName, options: opts, subtitle } = _a, properties = __rest$1(_a, ["groupName", "options", "subtitle"]);
                 return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
             });
-        return (h(Host, { key: 'ef1637b50d96200219f93a992cecd838bdc37ae7', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "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" }, h("slot", { key: '69889998dda0b69e3e582b089baf295c8cfca39d', name: "header" }), h("ul", { key: 'dcb7e840e724ebae950f8c85fca142bcf767cc5d', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'b33fd8bb6a1871db5e04173f0ad55a6485ee474a', name: "options" }))));
+            }, role: "listbox" }, h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "anchorToTrigger": [{
                 "onAnchorToTriggerChanged": 0
             }],
+        "flipFallbackPlacements": [{
+                "onFlipFallbackPlacementsChanged": 0
+            }],
+        "placement": [{
+                "onPlacementChanged": 0
+            }],
         "triggerId": [{
                 "onTriggerIdChanged": 0
             }],
@@ -2515,7 +2534,7 @@ const DropdownGroup = class {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
+        return (h(Host, { key: 'b872cfc0a8eb2e3542f07f6ae17ebc15b6f965ab', role: "group", "aria-label": groupName }, h("li", { key: '8e475e45b5040bd78c7d37f8c58b0689a508f067', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '3b7b984646bdcc502aca2260a0b59494e0884f6c', label: groupName }), h("ul", { key: 'c75e710ebe06a23aacca57f34ce286516c98a8c5', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '6b72762b22f316561f7614e4841018c019a60681', name: "options" })))));
     }
 };
 
@@ -2524,7 +2543,7 @@ const DropdownHeading = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
+        return (h(Host, { key: '70e5556188bd87fe5842256e4e145c3585f73409', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '2d45f0191d9b158641da794ee1b9f246f9659717' }, this.label || h("slot", { key: '21cc81673e6a37f4b7ff896d12bd94916c3a92e7', name: "heading" }))));
     }
 };
 
@@ -2581,11 +2600,11 @@ const DropdownOptionCpnt = class {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
+        return (h(Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', 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 }, h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -2593,13 +2612,13 @@ const DropdownOptionCpnt = class {
 const HeaderAccordion = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.expanded = false;
-        this.parentChecked = false;
-        this.parentIndeterminate = false;
-        this.disabled = false;
-        this.hasCheckbox = true;
         this.initialExpanded = false;
+        this.disabled = false;
         this.selectedCount = -1;
+        this.hasCheckbox = true;
+        this.expanded = this.initialExpanded;
+        this.parentChecked = false;
+        this.parentIndeterminate = false;
         this.toggleAccordion = () => {
             this.expanded = !this.expanded;
         };
@@ -2613,24 +2632,19 @@ const HeaderAccordion = class {
             });
         };
     }
-    watchSelectedCount(selectedCount) {
-        if (selectedCount > -1) {
-            this.updateParentCheckbox(selectedCount);
+    applyBorderRadiusToLastRow() {
+        var _a;
+        if (this.expanded) {
+            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
+            const lastRow = rows[rows.length - 1];
+            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
+            cells[0].style.borderBottomLeftRadius = '0.5rem';
+            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
         }
     }
-    componentWillLoad() {
-        this.expanded = this.initialExpanded;
-    }
-    componentDidLoad() {
-        const initialCheckboxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
-        this.updateParentCheckbox(initialCheckboxesValue);
-    }
-    handleChildCheckboxChange() {
-        var _a;
-        if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
-            this.updateParentCheckbox(checkedCount);
+    watchSelectedCount(selectedCount, _previousCount) {
+        if (selectedCount > -1) {
+            this.updateParentCheckbox(selectedCount);
         }
     }
     updateParentCheckbox(selectedCount) {
@@ -2649,11 +2663,23 @@ const HeaderAccordion = class {
             this.parentIndeterminate = true;
         }
     }
+    handleChildCheckboxChange() {
+        var _a;
+        if (this.selectedCount === -1) {
+            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            this.updateParentCheckbox(checkedCount);
+        }
+    }
+    componentDidLoad() {
+        const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
+        this.updateParentCheckbox(initialCheckoxesValue);
+    }
+    componentWillRender() {
+        this.applyBorderRadiusToLastRow();
+    }
     render() {
-        return (h(Host, { key: '216b10c02e1248c374ec646d30f835163b9b7792', class: {
-                'xpl-header-accordion': true,
-                'xpl-header-accordion--expanded': this.expanded,
-            } }, h("div", { key: '41cbb9358a5d76f44f135d76c945fe801cafc474', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'c939d100f687b14455424ee3f0b6bdfd7de785bb', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '4d98d8d75b4c7c7ba8e50ce6d43ed3b83919d624', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'd9c993b7e8e6cf0b46014d6c535a52c84386b8ed', name: "title" }), h("xpl-icon", { key: '58d114ae4dd93c9ec15e3d74cfb2d33c6c1b57cb', size: 20, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '46a98c094621ec02c9416bcfa7a2d33e6ce468d4', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7966e352ec17125afa59a7590dbc8e9372a39f41', name: "content" }))));
+        return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (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) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15559,10 +15585,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 (h(Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "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) }), h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
     }
 };
 Icon.style = xplIconCss();
@@ -15716,13 +15742,13 @@ const Input = class {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (h(Host, { key: '21535bfebdb899ef3bf28ae4ac252ffcc8b03388', class: {
+        return (h(Host, { key: '4b60d50e8b88f905777d76197afe181026ae5a94', 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 && (h("label", { key: 'f72b35d866295451cf74832dd191853e77190590', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '712910cd0e7a1db84add0f1483fdc0da6c38a07d' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'd8fcab92ea7f4989e9d2db1117e689ad9a26ced8', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: 'cbe4f7792ea586c78b7bc0f34d277bfa5977d50e', icon: "alert-circle", size: 16 }), h("span", { key: '91f88da21c48f0bf069e4c20205a81cfbb30fb1e' }, this.error)))));
+            } }, this.label && (h("label", { key: '8b0dc01150607c2943ccc541b9acd3a7fa5d2143', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '8d1f988983fd54e3bc231c0a8091b4fe83ed8ab8' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '349492ed192e6105dd549634da1ce2c0371f5b9d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '7903d2f35033ceefcf94eff8081997b4aec3c1a9', icon: "alert-circle", size: 16 }), h("span", { key: 'e3d557f705647eb304b4bf38151dcf01c17fce15' }, this.error)))));
     }
     get el() { return getElement(this); }
 };
@@ -16090,16 +16116,16 @@ const InputColor = class {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '6f03535db1b5f451c74a0f1a1abc586605e5c9ca', class: "xpl-input-color" }, h("xpl-popover", { key: 'dae1f3a3b7afdd9231b6feba2d3711fbd1d6716e', disabled: this.disabled, display: "menu" }, h("div", { key: 'a8402cf534186d06f940c3e3436db17afb0152e8', slot: "trigger" }, h("div", { key: 'e9e775229df2a4f8afa252ef03c0a0cd15a93aa4', class: {
+        return (h(Host, { key: 'f665a747f8938212d0c9ada4f251a9fc880ba82c', class: "xpl-input-color" }, h("xpl-popover", { key: 'eac77d1e9f350b3b0dd66001a7a596d156a75a53', disabled: this.disabled, display: "menu" }, h("div", { key: '73d1468c4261fd9a8e957189129cc660757d849f', slot: "trigger" }, h("div", { key: 'fa098788863247a7c87e4efe628b5b47f0bb3113', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '9abe3e899192f4f08e682f8d7a9a9af9adf5982f', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: 'd471146ff3ba7b026dba1424599361d0aa0fe49c', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '9e6832ca2ca1b91c9bf91b1816c1f7c8169202f3', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '5cd87456ef093611b6be8906c24b235ea7f19524', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '86643ca93847cff19653ebb54160588f2764ae17', class: "xpl-input-color__menu" }, h("div", { key: '40f43b769954163f0d22ff8dc80bcd2e0df4777e', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: 'df7bdf567c9a697f8a5e737e5a8cb1b1b962dbb9', class: "xpl-input-color__menu" }, h("div", { key: 'ae630752b48e9d211273da6f3dadda8ace603ba2', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -16107,9 +16133,9 @@ const InputColor = class {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '29f42021c1e55827f1fffcdd416608f01b6bda81', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'e727c66cd44ff40c672f58ae9264485cda3698b7', class: "xpl-input-color__grid" }, h("input", { key: '899cdc6cf61d1452809850dbc847c9df8265437b', 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 }, h("div", { key: '25ffc6bb94f0e861a3bc5a6da5c01e0901d1779e', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '7d256baab084f96c56724b4eede835a13bee7055', class: "xpl-input-color__grid" }, 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) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: '3e72ef16b142fe44bebbcbbd2686fcfa3fb958bc', 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) => {
+            } }), 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) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -16119,9 +16145,9 @@ const InputColor = class {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'c389627f5c0fa8878ead7d6765ecbe9b2f82debb', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: '26a562a220b2458e0ee99906d27d8a11e38f2d02', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: 'efd8daf09c022fdc19a6373f0bcd1d32b7548fd2', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: 'a77a7325f72ef73e6aa2d6968ae4afd1e010cf2c', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (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;
@@ -16244,16 +16270,16 @@ const InputDate = class {
         parent.removeChild(wrapper);
     }
     render() {
-        return (h(Host, { key: 'c2707549e3285693ce4c7e0449e047be90640504', class: {
+        return (h(Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', 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,
-            } }, h("div", { key: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), 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) => {
+            } }, h("div", { key: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), 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) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: '399495edb8791cda73084dcef21663a3d207da2f', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '6570bf947a23280b04389ed591f7ea401f14f1a5', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16302,18 +16328,18 @@ const InputFile = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '579d1ec1094bc5b1aeec622996694728fb1facca', class: {
+        return (h(Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', class: {
+            } }, h("span", { key: '8dc3e290dcddba706316ec41443e2e87aa82f79f', 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 }, h("slot", { key: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), 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 && (h("span", { key: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -16801,21 +16827,21 @@ const InputPhone = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '79d8146efc51fb1fba4e595655274beff9e2f09a', class: {
+        return (h(Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, h("div", { key: 'f617abbc8656f0d9418e3bb87f0fdcd8b1646138', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '133d07a3d70e8c9e3c3a6690ae2296f176a409f7', 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) && (h("xpl-icon", { key: '20928aee771232962454e469210a31718922286c', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '22078ac403d3965ba72ee9164520778f3f65cc56', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '29cab6a655c36fd5add277b6d3c0f06c498a742d', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'e83457a14cd689f43082afb611c7641f1353da36', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'ee747daab159986e319599ec6705c8f5edc78c3e', ref: (el) => {
+            } }, h("div", { key: 'c7e46df1b58b6e76dda47b3b32f5a6abe29f048c', class: "xpl-input-wrapper" }, this.isInternational && (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) && (h("xpl-icon", { key: 'a307f620c2815d63b17dbeb6c270d2972884e9d9', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: 'c16e66d315877cec35e322a1164f765cd387931f', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '7a33b994588e4c5ea868a4e092709b8acd50a36f', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '5a39cfd472f5287fc8cf0648ce618e21dabf5e97', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'dfb25910769594bc9b9d1c861049605d7bdd9d0e', 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 && (h("button", { key: 'ddb1bb6cf9ab3fb4bc3295db64fc986fe5dbf69b', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'c0f3201d0b34f9cbe5af9247540199db0c184514', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '8d4e50ee17d880272eaccf08cf8c84fc4400c36d', 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 ? '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 && (h("button", { key: '8db932d94550aa6d947e2564d8a94a12bef43bce', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '87e55c3a5ae6b8774d3ce64af843b7e63448fe25', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '467b0e2fde23a45b2c36138affa26467e0b6c9d0', 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" }, h("div", { key: '5808ecb917ee94ba31c8ab106152d2d61feae74a', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '76a2477f0e039e390dd26a0c34cdab758d3c10d6', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, h("div", { key: 'f4f3665ab8286faed45c3a3a510bd247c7a31842', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '659875e60e85bac085deb8f6648623eccc76d560', 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 : '';
-            } }, h("xpl-icon", { key: '0a6b49b3a0df0769fb5dfa59f97c40adeaee8dd1', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, h("xpl-icon", { key: '987941768e8494d9c898fc93e531da03bd57ad71', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16934,7 +16960,7 @@ const InputSearch = class {
         return shell;
     }
     render() {
-        return (h(Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
+        return (h(Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,
@@ -17118,11 +17144,11 @@ const InputTime = class {
         }));
     }
     render() {
-        return (h(Host, { key: '6ed0e8da81a96e0e4e7078a7477c9a4ee92532ba', class: {
+        return (h(Host, { key: 'a48ebfd7cd0578b33bd11059f9bebb342bf954f7', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: 'bae0f7e9b9e3f14b5d780a0300ef672da9301596', pre: 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 && (h("xpl-dropdown", { key: 'cd8ae7e4c7d130bdbf44aeb2f806b3c9a490d8bb', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, h("xpl-input", { key: '68089e0bd5b0ed7d88917094eafe529637947380', pre: 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 && (h("xpl-dropdown", { key: '1bbe4a3a42c02ff985a26e7547c54f0bbdc92ce0', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }
@@ -17556,12 +17582,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 (h(Host, { key: '4290084c30b164abb653943a81783c35531d6316', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, (_c = this.items) === null || _c === void 0 ? void 0 :
+        return (h(Host, { key: 'aaa6e1cfa2d87e61b239d9aa59c9e4647f05aade', 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) => {
                 var _a;
                 const legacyRowId = (_a = item.id) !== null && _a !== void 0 ? _a : `item-${index}`;
                 return (h("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-            }), h("slot", { key: '55ce7202269eab851c0d753fd87ef2d5bf9f59a8' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+            }), h("slot", { key: '89eb57b654baf9efbfd021e8c8db1fe074daa6d1' }), this.reorderable ? (h("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18084,7 +18110,7 @@ const Modal = class {
         }
     }
     render() {
-        return (h(Host, { key: '1014ca8cb29f3cfeb7f2cf580127b8fe61e7bcbd', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '0085b008fb42a998c2b27690102b8ae7f0e49c67' }), h("dialog", { key: '9e2d23304e10872ed3dc9a7520537e36bf8b8f5b', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: 'f55a9d85fc271183e0a6b7e60fb4ad5ed623b010', class: "xpl-modal__header" }, h("div", { key: 'ac105d7ee88148e4b10b26522f93fea70b8d6c06', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '89ff5fda063dc98628c409ee51c124f17f9e7553', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '03e05d28ca6449859ac58f0b0efaf3d8e24c1d62', name: "title" }), h("xpl-button", { key: 'ff132fcbaf91ab6922b12f667255594673e21bd5', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '6d712ffc1de66d43591ccf71b08ed5e823fc4c8f', icon: "x" }))), h("div", { key: 'ff5f20b209f6d704d0d20561818ca3ea5b353fce', class: "xpl-modal__subtitle" }, h("slot", { key: 'de25d1ab35729ad5ee0e279311285eab20fb7669', name: "subtitle" }))), h("div", { key: '286f34b54309527c836cb7cc06018ffc577c500f', class: "xpl-modal__body" }, h("slot", { key: '960036c7d3da774ad0f59ccf2c859d7ba3ec3a98', name: "body" })), h("div", { key: '24f7db0e4153d9f4105d787abdc1fe491ba6633c', class: "xpl-modal__footer" }, h("slot", { key: '4f096e57455b20caec555a008a14d411f40b53d7', name: "tertiary" }), h("slot", { key: '1fee8182d892c3460fe30c20456e1b9139bafaec', name: "secondary" }), h("slot", { key: 'e2b91a7af9f34c297d6c311823c91f9a0ab4059c', name: "primary" })))));
+        return (h(Host, { key: '310913d620acf72531ecb06aa6cd2180bb58d13b', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'd95693fd09c2f0a8024f3cb69a021f0bd79f7916' }), h("dialog", { key: '5cffd3cfdcc6033baa1d9e3e5fdf56b8411a8975', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '2d0be8e91065d464797d85cd1b98272292eacb09', class: "xpl-modal__header" }, h("div", { key: 'cb7d8594ed217599bcf0e2efa88d72afe0fff758', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'fb7dd69369accc0c98ef8762ca457b6368ca0036', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '36a6d3d38d35064f81740504090fbbcdf2125097', name: "title" }), h("xpl-button", { key: 'db84ecf685afec8d0d783b433f8aa030acc436bb', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'bf241c6636ace6e182bf259bd24754646dc7f151', icon: "x" }))), h("div", { key: '105fa1a5b9d927bda5ca5521bbb8211cb07ab8e8', class: "xpl-modal__subtitle" }, h("slot", { key: 'd25d6d8bb95cd51f075dd7f9b5e1e199dac3efb0', name: "subtitle" }))), h("div", { key: '3b194a36ad0f4446149027544c16a25ba27f2cec', class: "xpl-modal__body" }, h("slot", { key: '077e5b70115e3e906cd9ea7181c51615799c77e8', name: "body" })), h("div", { key: '687bd9ca45af20945ab5461ceb68ec099a30c50b', class: "xpl-modal__footer" }, h("slot", { key: '73d5884708efd296a701c37e02663668fcfd37d8', name: "tertiary" }), h("slot", { key: 'bad90d2355b8c015e19b1e450b5a2ce96e5ad55d', name: "secondary" }), h("slot", { key: 'c601b66edc9fb2c082ccc713d6df95f15bd604ef', name: "primary" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -18160,11 +18186,11 @@ const NavHeaderMenu = class {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (h(Host, { key: '677e0ab10d9bb5578f472101c677222e038c2b4a', class: {
+        return (h(Host, { key: '451149dc9d73f705492fc65bf4f014b8efa4ee8a', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (h("div", { key: 'fa3898bd0b2aa4726d44ad991a2c6272d4f323de', class: "xpl-nav-header-menu__profile" }, h("div", { key: '354ff7d001e5b545cc7c4310ee10cae7d72c6159', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '92b6486692879a602e87062820d7cbf175bf15d2', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'a228df8215ffd68c36631e11184ba38c790bc560', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: '0ee2394e784f6efb43f04ec65765481203dda954', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'f551acc13c6e6f2611e78d04de72987048011318', name: "right-aside-mobile" })), h("div", { key: 'b90709dea7e169df42acaf8125a9359321c979ff', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'c35efb10d04d4d4b0bbf832d8541ba6d4b9782c0' }))));
+            } }, hasProfile && (h("div", { key: 'f42b560492c110644d52b10f708a3ed650833861', class: "xpl-nav-header-menu__profile" }, h("div", { key: '6d98f720af85cbf8164bea7500175d6bfbb9465b', class: "xpl-nav-header-menu__info" }, this.username && (h("div", { key: '9d52880dc41c11e71ac3cc107d8009eccb787bac', class: "xpl-nav-header-menu__username" }, this.username)), this.email && (h("div", { key: 'd1b71ac2c4f6aaf5efd7b1910b8848f97ab08bf0', class: "xpl-nav-header-menu__email" }, this.email))))), h("div", { key: 'e1b298c39ccbe0f68b8d60fa82714572f656ab1e', class: "xpl-nav-header-menu__right-aside-mobile" }, h("slot", { key: 'fbb8d26c38a4a50568e8836ac3af4409fe6c93c0', name: "right-aside-mobile" })), h("div", { key: 'cbe858338ec04cdd3b74285f95b0466432924be2', class: "xpl-nav-header-menu__slot", role: "list" }, h("slot", { key: 'b47ccc7f955a30d8b9d9b884fa3d920d45958f7c' }))));
     }
     get el() { return getElement(this); }
 };
@@ -18181,11 +18207,11 @@ const NavItem = class {
         }
     }
     render() {
-        return (h(Host, { key: '5e0a171c719802e96d48f7d635c189563387fade', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: 'b3a214a57ad57e9db1bbfd6a1809999ce0575a82', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: 'aff0155598a1b64d50168552ff251b824d00a86f', name: "link" }, h("slot", { key: '28da4593d2302b2867b0792562dc5b7b3ddd6983', name: "icon" }), h("slot", { key: '93e12751d2320608ee7a10d73eef67a1c1bb5443' }))));
+            } }, h("slot", { key: '0f2a74dc4fd6f419a01106d872a5f6b5066a21a8', name: "link" }, h("slot", { key: '234b41ca18d65ec3423ff580d983d24b483641cf', name: "icon" }), h("slot", { key: 'cdb0ac59997cd1c557b05c6c8d8f60ae78d28a4d' }))));
     }
 };
 
@@ -18252,19 +18278,23 @@ const Pagination = class {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: 'cb9e0db1008dfadcfb48ae308d8e595dc751a6ee', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '30d272307c28e0b50d78b036ec63f4d2a120aaa0', class: "xpl-pagination__rows-per-page" }, h("label", { key: 'cc5969dbc2685aff198f03ef593dd714570225dd', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '447ee86d134c70f51c4a756c499bb6766d10ed7f', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
+        return (h(Host, { key: 'fad9cdff4010b4b5ac842633bf7daf09b4dbd5d4', class: {
+                'xpl-pagination': true,
+                'xpl-pagination__with-page-control': this.withPageControl,
+                'xpl-pagination__no-page-control': !this.withPageControl,
+            } }, this.withPageControl && (h("div", { key: 'eb125851b89aa1422ec3e5d5e336fcbecd07489e', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5f2aa4c45d183827317a74cf4700981b6b0e7f2b', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '7ba2987a24b3228d9b59320f29b22b5819f85546', 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;
-            } }))), h("div", { key: 'ac10b2efa235b3a065c7089bfb8674d6e015ee0c', class: "xpl-pagination__pager" }, h("button", { key: '83e9cc02336b94fe3cc8b16ba52d01ab70c50eb1', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: '12a92187d96ad9c2973fd73c2b61c1c04cce589b', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '79324205919048c207044ca7916a276675463d25', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
+            } }))), h("div", { key: '8bab9db1cecfdaeeb760b0e4e1afb393ff3a3fe7', class: "xpl-pagination__pager" }, 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" }, h("xpl-icon", { key: 'a77a15c649a6f2c86b100d1687b4a099acc18602', icon: "arrow-left", size: 20 })), 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) => {
                 this.pageSelectRef = el;
-            } }, h("div", { key: '73674015b0e1f8c9175c2af2a409cf1beb57fb9d', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '6cecec44e8dfe62b9c6c94b33bad64473e0660a7', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '9d21370837ee23434c94d790c7e300358d352e93', icon: "arrow-right", size: 20 })))));
+            } }, h("div", { key: 'd0ae655a0100c2e81c8f7bdc2c8d3072f00cc7c9', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), 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" }, h("xpl-icon", { key: 'd18efdcb7e67ab908fbf79fc475993cf656b150c', icon: "arrow-right", size: 20 })))));
     }
     static get watchers() { return {
         "currentPage": [{
@@ -18284,11 +18314,11 @@ const XplPanel = class {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (h(Host, { key: 'a9618f21b7aba5804881ec509d47909b87ad9aa5', class: {
+        return (h(Host, { key: 'e9a747ba679f6f9f907d13217f329947bff93e31', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && h("div", { key: '5b92aa4395658996de2736941d6c0d0262903013', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5b22eb3d1911ce2d68876c0bc0bc61f947c830f9', class: "xpl-panel__content" }, h("slot", { key: 'b2f331aa8ea4328b0e50736d97361a7bfcde60ed' }))));
+            } }, hasAccent && h("div", { key: 'b777fd4a81574ff9276582b256b673cccfc63a34', "aria-hidden": "true", class: "xpl-panel__accent" }), h("div", { key: '5fa5ba4c2bfa13d7dcaee603e96ec9b77d103b13', class: "xpl-panel__content" }, h("slot", { key: 'c99b797e076c2641ae205181479dabb38f9ea009' }))));
     }
 };
 
@@ -18951,16 +18981,16 @@ const Popover = class {
         });
     }
     render() {
-        return (h(Host, { key: '67ecd18580166f1582c29e33f1485bf67590b9f5' }, h("div", { key: 'bba42a3474432557bfc71705c2d5206493fed64b', class: {
+        return (h(Host, { key: '6fe479a39ee565772785c7b540c4e0915c5403e4' }, h("div", { key: '350452ca097bab13e7f06b3d1aa5e2774d80104b', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: '7960b727b609da6b0e949e4889e217b0f3efb6c9', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: '0a9365be21ef70855bd7d304a77fc80d19ba16d3', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: '08d2034f7559ce12f948252cf62bded94ab7666a', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '1c51e2f96884da9828cf5d94fc1639a63580a0c7', class: "xpl-popover__arrow" }, h("svg", { key: 'bbf85fdaa6385724f8ce55001a5d9d2e2471dfc5', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ba2c4805e65b776af7bd313f575866f134fb778', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '21fab6334d8106940a3e5c49acc70b80a7d61326', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: 'fb0eeedab71c9d10fcab8f9277af919efd94f202', class: {
+            } }, h("slot", { key: 'df227b5bb7683599b4f82ef2a8c9d840b4920a61', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'dbf0b6998b3aa6ae40089e13bef86878037bbe24', class: "xpl-popover__arrow" }, h("svg", { key: '2bf57b69abc556ba9a86b59f6347a2c8d81a67c3', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36fef83ea3e2d3d4b388f5bdfe74d0bdc034be9d', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '1187a6ec22457ab6086753cf199398705541b1b4', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '7c6f063094de1462629a0db380597374c4231855', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '4bd22aa19dedb6fb77355caafcd009413c8ad7d9' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '41062b776eed58b98452bb5a8d3b7099ac1138d2' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19000,12 +19030,12 @@ const ProgressBar = class {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (h(Host, { key: '4161cfe080a629f1c69c14a0e0a553df950d57a8', class: {
+        return (h(Host, { key: 'e5cc7a2231ed74242241723c9f0a57444a8000bb', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, h("div", { key: 'c3ec83eb50771a91c543da1c9ec204e03b402c98', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '9bb66a54388c8d24d9c737d8736536fc47285bc9', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'fb8160645a4c2ad56a276d5b85c5384d85b75b7e', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: 'fb3cf9019e4ad18b0016219d44f3aa916ee5b4b2', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: 'cef864deff983bae01b9871ec17d6f6edccc327d', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '9f7a52c0527b0fccc2189f0485596fa2cf80d417', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, h("div", { key: '3212fdea66e2cd3edffc36f99c9edc197f15bcee', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (h("div", { key: '004c0b9203df13c6818fdbb8c928a47d86e7388e', class: "xpl-progress-bar__header" }, this.label && h("div", { key: 'ce735edff19cc004f979a582618c968260cd23c3', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (h("div", { key: '3a9f143b79152aa3208593c9249a62d819c2967a', class: "xpl-progress-bar__icon" }, this.isError ? (h("xpl-icon", { icon: "circle-xmark-1" })) : (h("xpl-icon", { icon: "circle-check-1" })))))), h("div", { key: '517787d0ff39c082a3d4763b78b16a9ce9235b4b', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (h("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, h("div", { class: "xpl-progress-bar__indeterminate" }))) : (h("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (h("div", { key: '488c5092b96a1e9a5a08f9b090f94fe66f6f1490', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
 };
 
@@ -19066,7 +19096,7 @@ const ProgressIndicator = class {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (h(Host, { key: '44ac526c3954f688007573bf53c771b30518b9c7', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: '1ab86e3777ded2737ed5dd3c5ec759211a1087a7', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (h(Host, { key: '3a6f253693fd47f982541099a1729ca36d0ce64a', class: hostClasses, role: "group", "aria-label": ariaLabel }, h("div", { key: 'c25b47994c43135ed3147ca579bdc3d8124d7c8a', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get watchers() { return {
         "steps": [{
@@ -19094,14 +19124,14 @@ const Radio = class {
         };
     }
     render() {
-        return (h(Host, { key: 'a96ab55137fedbfe00d68b660bd2d935208dc6c6', class: {
+        return (h(Host, { key: '959940093b1988f6e362c17e463fe2139cd828c5', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ee385d0976d065fee4f72f75faea0ddbe33c0e81', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '04e74e08a20b229f2d45b8fce80fa65ab3bf0954', class: {
+            } }, h("input", { key: 'cccccd581ee84a2c5c39a625565877cc080e9702', class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), h("label", { key: '3dd39b409818d7f2921c6dc7dc2c3d790a088833', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'b9fe3e13de64776a9cc1afcd8f7c10f84be8c8bb' }), this.description && (h("small", { key: '6ecd217342fbfa9bb5022bb1298683ff87af1713', class: {
+            }, htmlFor: this.id }, h("slot", { key: '0e0af25e2b1679bef0aa053d20df8f0ec7390d18' }), this.description && (h("small", { key: 'dcc8791c823ec66dcdb806ae4aeaf7daf6c72298', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -19113,7 +19143,7 @@ const SecondaryNav = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'bf9cbd4351297a28d6d98d3bf1e0612fac1f5136', class: "xpl-secondary-nav" }, h("nav", { key: '764de50287c88f53f19005d50b177e85f71f7f43', "aria-label": "Secondary Nav" }, h("slot", { key: 'd7fe629382a06f62dde9f08db082854e986ba406' }))));
+        return (h(Host, { key: 'f4fdd93b13c1dc779c84e8b00b12caeff58df960', class: "xpl-secondary-nav" }, h("nav", { key: '4092d23357761026ad5fddfbc32a221d957cce1e', "aria-label": "Secondary Nav" }, h("slot", { key: 'c3ae9f1821a6d22babece27971cc1faf15037cdb' }))));
     }
 };
 
@@ -19137,6 +19167,7 @@ const Select = class {
         this.triggerDropdown = createEvent(this, "triggerDropdown", 7);
         this.choices = [];
         this.selectIcon = 'chevron-down';
+        this.dropdownPlacement = 'bottom-start';
         this.mode = 'single';
         this.truncate = true;
         this.active = false;
@@ -19343,21 +19374,21 @@ const Select = class {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (h(Host, { key: 'c02b59988eee5073103958a24061c46aa286ea50', class: {
+        return (h(Host, { key: '09d3587fa268cb0621ea293d246e23cde93d75df', 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(), h("div", { key: '189c9d2e3370876b6289ee16ee1b8927e5bfc0ee', class: {
+            } }, this.renderLabel(), h("div", { key: '007a61cc60c948d0691d6983cb197652084e417d', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': ((_d = this.error) === null || _d === void 0 ? void 0 : _d.length) >= 0,
-            } }, h("div", { key: 'a8df7de958be97becd2a9f6a2db761702e2066c3', class: "xpl-input-wrapper" }, h("button", { key: 'f00119d930d49b241d5160bfe7a70ee56ac598d8', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, h("div", { key: 'e1edfe6e4b205bd6332f07031ee51ef7f9f6ac91', class: "xpl-input-wrapper" }, h("button", { key: '53d079f28b8a1bcdd5498287dfd88bb7a3ba7b50', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, h("div", { key: '141643ae007e8f5827d4aeb8fdd2a95b14b003ff', class: {
+            }, type: "button" }, h("div", { key: '5cfec98b2e829ea48e96b373e09e740d5bf02ef6', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -19377,7 +19408,7 @@ const Select = class {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '05f6ba660e21584017715d3afc14d7bd8b8d536a', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: '9a452cf4c62cca5ba4279ddd8da09c9d24797dcf', ref: (el) => {
+        })(), isTextTruncated && truncatedText), h("xpl-icon", { key: '8bb01d1e8b206fb3c1963cdebcd293eeb2277e05', class: "xpl-select__chevron-down", icon: this.selectIcon }))), !this.disabled && (h("xpl-dropdown", { key: 'f5e770c4b26449f3025d172d768d6df69bd0ae03', 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;
@@ -19386,7 +19417,7 @@ const Select = class {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true })), this.renderError()), h("input", { key: 'd9d6cbc69fc5fc688b2dda6ea1ef99435d90fc94', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), h("input", { key: 'fe84c16780622e730100a58a948fc4fe27f6ddb5', type: "hidden", name: this.name, value: this.value })));
     }
     static get watchers() { return {
         "choices": [{
@@ -19412,9 +19443,9 @@ const SideNav = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'bfa4c94a1718583020da6a8b1e9104788ce78ef1', class: {
+        return (h(Host, { key: 'd01e8e27671eabc92613a803818b4351334011ac', class: {
                 'xpl-side-nav': true,
-            } }, h("div", { key: '1788f206ed3bea01be9cfa74fbc54a54e664945c', class: "xpl-side-nav__wrapper" }, h("nav", { key: 'ccbcbc45566a77a9134279b486148f3444bdb0ea', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '6aef4d3f8e0c037aeedfc45d8471978c635b3293', class: "xpl-side-nav__section" }, h("slot", { key: 'e4384164f138cae0135472428079b62924afbcdf', name: "section" })), h("div", { key: '9794ea9a4b566713d0adb0787ae2ab1ae171fa6e', class: "xpl-side-nav__footer" }, h("slot", { key: 'e20ff6d3795784ea11470b7287550c29c0984a65', name: "nav-footer" }))))));
+            } }, h("div", { key: '92c9f31fa0d9d564164cde99d17e30562c30abb7', class: "xpl-side-nav__wrapper" }, h("nav", { key: '5ddd8b18d4f74bb752b747ec4e1c48780a0738de', class: "xpl-side-nav__content", "aria-label": this.label }, h("div", { key: '8b830945bf6ec1da8ab2e2c955c10a1077652590', class: "xpl-side-nav__section" }, h("slot", { key: '66e5cd33c23bdc8963d661e0741d34f80a0640fb', name: "section" })), h("div", { key: 'f0da4e3c25822453efcbfb3c6f8ea7ec328e717d', class: "xpl-side-nav__footer" }, h("slot", { key: '76b829e978361be9fd62bd412489ea4559852c3f', name: "nav-footer" }))))));
     }
 };
 
@@ -19467,10 +19498,10 @@ const SideNavItem = class {
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (h(Host, { key: '10318a2c26c650f5c5e2143c2fe1bde6a372f933', class: {
+        return (h(Host, { key: 'a621f4f9c04d79de708a34a4f4eab06e523a299a', class: {
                 'xpl-side-nav-item': true,
                 'xpl-side-nav-item--link-disabled': this.link && this.disabled,
-            } }, this.link ? (h("slot", null)) : (h("button", { type: "button", class: linkClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, this.hasChildren && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: 'ea6e431300ffe641e970c8cc49e7935858986685', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '378a00e24a61911ce69ef6a50e69d47b496b5557', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'b3ece8c8ddbf58693a370824c40fe3811828889a' }))))));
+            } }, this.link ? (h("slot", null)) : (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 && (h("span", { class: `xpl-side-nav-item__arrow ${this.expanded ? 'expanded' : ''}` }, h("xpl-icon", { icon: "chevron-down", size: 16 }))), !this.hasChildren && (h("span", { class: "xpl-side-nav-item__icon" }, h("slot", { name: "icon" }, this.icon ? (h("xpl-icon", { icon: this.icon, size: 16 })) : null))), h("span", { class: "xpl-side-nav-item__label" }, (_a = this.label) !== null && _a !== void 0 ? _a : ''))), this.hasChildren && !this.link && (h("div", { key: '3e22894c0bd9427f568b86bba00cdab822921997', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, h("div", { key: '41486a4241e4402232531d140e972b39d863ffd9', class: "xpl-side-nav-item__children-inner" }, h("slot", { key: 'd334c6ecac7dd1dd12602a461db444cd1ccefc86' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19490,7 +19521,7 @@ const Skeleton = class {
         this.size = 'custom';
     }
     render() {
-        return (h(Host, { key: '4c0962c3339b49f2f89d07e4827e826089419c70', class: {
+        return (h(Host, { key: '0ac86ae7bf109ea51bca36ac502d506ac7d0b66e', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -19533,7 +19564,7 @@ const Slideout = class {
         this.handleScroll();
     }
     render() {
-        return (h(Host, { key: '01e702ef959cc596ae8fb140275d733c93c3b399', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '4e82ee44b68eae102a4c4ef65e797ce23659d330', onClick: this.handleClose })), h("aside", { key: '1c718a30611bb6699f231a9e736c0521c248d65a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: 'c53419926fbe8ccc6616af39d021248b46f138a3', class: "header" }, h("div", { key: '36e02fe5b7ff8d6920759ab793ead2be0f0811ac', class: "title" }, h("slot", { key: '7932fd5e77edb89570ebd3fedc0346929582ec7b', name: "title" }), h("xpl-button", { key: '9772e880c9b132ba84ccf45c4793e0af70548866', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '91922e8aa02c30aa73ae1ea3d2b47daffd954616', icon: "x" }))), h("div", { key: '2f7065ba1da7f0ad805e16b69f4a316d5a1f9285', class: "subtitle" }, h("slot", { key: '8edb8bdbdecd01abd2b7899d5c9897c91e625326', name: "subtitle" })), h("div", { key: '5945128002bb2103daac40d1f7457ebb97521002', class: "search" }, h("slot", { key: 'c4df975581beb16547a439a86f2a532c10fa4fa7', name: "search" }))), h("xpl-divider", { key: '3be4c74de14ca2380179798fe4ec0c9a758739af', tier: 0, class: "divider top" }), h("article", { key: '2012ae1197acc41f530af8920b19752a248e2b40', class: "content", tabIndex: 0 }, h("slot", { key: 'e8a1cedda6cd48bb62dc42f00c9bdc8510d4f603', name: "content" })), this.showFooter && (h("footer", { key: 'cfa5a41846485b879126a90f3a7346d6eb680776' }, h("xpl-divider", { key: 'bf05c9d85471b55dee25da790afb3cb642f1a86b', tier: 0, class: "divider bottom" }), h("div", { key: 'd109314ca745947f3337b06df73183ff277c89bb', class: "footer" }, h("slot", { key: 'cad183e788d3555a5366b19b4e01c3c90f7d9ae0', name: "tertiary" }), h("slot", { key: 'c12294440fe8544e51197dfddbc01aaea506575a', name: "secondary" }), h("slot", { key: '7accdf8dc3cc9b6a416cf784ec081d70c1d0f1e9', name: "primary" })))))));
+        return (h(Host, { key: '8a3f7af854b35469bf4a383cc4cb1fcfcaa15748', class: "xpl-slideout" }, this.backdrop && this.isOpen && (h("xpl-backdrop", { key: '7033d78efa9ac2642a99d2b2dca278a3e9a44368', onClick: this.handleClose })), h("aside", { key: '2999e4119a0dbaac5125c7a1ef5f03761f445a0e', class: `slideout slideout--${!this.isOpen && 'closed'}` }, h("header", { key: '5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4', class: "header" }, h("div", { key: '88172efe113b56a533761b975605a44ef52c5174', class: "title" }, h("slot", { key: 'c8f13168f62f96374250b11814ace756fa680503', name: "title" }), h("xpl-button", { key: '8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, h("xpl-icon", { key: '110cbd50e31b51319745d6fed61188c1c885b8b3', icon: "x" }))), h("div", { key: '96e6cddf4b078736201116f220f27ddf34b90b44', class: "subtitle" }, h("slot", { key: 'eb02b4fce6ff5e658ec51c83819a5257f452d3a1', name: "subtitle" })), h("div", { key: 'ac8dfe1f99428cdf728027aa5a04d58d497f34f0', class: "search" }, h("slot", { key: '28deb70ef99f4880fba55beb2d2b4b1d3136a240', name: "search" }))), h("xpl-divider", { key: '928d20ef8e74eed4e06351c5dab0c0af9934d2b8', tier: 0, class: "divider top" }), h("article", { key: 'd6460cb29abb33f6676d2e4f517c1f2befa57148', class: "content", tabIndex: 0 }, h("slot", { key: 'b415af9cadedc61407623773fd6b2b1130caf5df', name: "content" })), this.showFooter && (h("footer", { key: 'db6a58277112f134dc150266446cc67c79bc6bc5' }, h("xpl-divider", { key: '129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6', tier: 0, class: "divider bottom" }), h("div", { key: '6c81348acf8ee2bb4c12c2f3207daae564e78aa2', class: "footer" }, h("slot", { key: '8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b', name: "tertiary" }), h("slot", { key: 'e66e45e2d090f45305f818c6496541b737c96aeb', name: "secondary" }), h("slot", { key: '8892bdf075a38237a5c858bfd951e1203fc3c892', name: "primary" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20361,62 +20392,14 @@ const TabPanel = class {
         const t = (_a = this.target) !== null && _a !== void 0 ? _a : '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (h(Host, { key: '4491f3466d26e462432843c382b0d0b5ab64e68b', "aria-labelledby": labelledBy, class: {
+        return (h(Host, { key: '4c4a86dda347872ea6b1c4569f8424bd6cac7bd9', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, h("slot", { key: '75b3da77cddb6e0a83b7cf41aa5e0aa30259b728' })));
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '30c9ae6f3748dc02a73da7535443266b1043d61b' })));
     }
     get el() { return getElement(this); }
 };
 
-const XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT = 'xplTableColumnWidthsChange';
-const TABLE_HEADER_CELL_MIN_WIDTH_PX = 48;
-const getGridColumnWidthFromHeaderCell = (cell) => {
-    var _a, _b;
-    if (cell.tagName.toLowerCase() !== 'xpl-table-header-cell') {
-        return 'auto';
-    }
-    const host = cell;
-    const fromProp = typeof host.columnWidth === 'string' ? host.columnWidth.trim() : '';
-    const fromAttr = (_b = (_a = cell.getAttribute('column-width')) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
-    const columnTrack = fromProp || fromAttr;
-    if (columnTrack.length > 0) {
-        return columnTrack;
-    }
-    const w = host.width;
-    if (typeof w === 'number' && Number.isFinite(w) && w > 0) {
-        return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, w)}px`;
-    }
-    const raw = cell.getAttribute('width');
-    if (raw === null || raw === '') {
-        return 'auto';
-    }
-    if (/^\s*\d+(\.\d+)?\s*$/.test(raw)) {
-        const n = Number.parseFloat(raw);
-        if (Number.isFinite(n) && n > 0) {
-            return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, n)}px`;
-        }
-        return 'auto';
-    }
-    return raw.trim();
-};
-const SELECTION_MARK = 'data-xpl-selection-managed';
-const ROW_REORDER_MARK = 'data-xpl-row-reorder-managed';
-const getSortAffordanceIconName = (sortDirection) => {
-    if (sortDirection === 'asc')
-        return 'arrow-up';
-    return 'arrow-down';
-};
-const cycleSortDirection = (current) => {
-    switch (current) {
-        case 'asc':
-            return 'desc';
-        case 'desc':
-            return null;
-        default:
-            return 'asc';
-    }
-};
 const getIconType = (sortType) => {
     switch (sortType) {
         case 'asc':
@@ -20427,104 +20410,18 @@ const getIconType = (sortType) => {
             return 'dash';
     }
 };
-
-function getNearestTableBodyRowFromNode(node) {
-    const el = node instanceof HTMLElement ? node : null;
-    if (!el) {
-        return null;
-    }
-    const row = el.closest('xpl-table-row');
-    return row != null ? row : null;
-}
-function getNextVisibleTableBodyRowAfter(element) {
-    const parent = element.parentElement;
-    if (!parent)
-        return null;
-    const siblings = Array.from(parent.children);
-    const idx = siblings.indexOf(element);
-    if (idx === -1)
-        return null;
-    for (let i = idx + 1; i < siblings.length; i += 1) {
-        const n = siblings[i];
-        if (n.tagName.toLowerCase() === 'xpl-table-row' && !n.hasAttribute('hidden')) {
-            return n;
-        }
-    }
-    return null;
-}
-function moveRowInTableBody(body, draggedRow, dropTargetRow) {
-    if (draggedRow === dropTargetRow || draggedRow.parentElement !== body) {
-        return;
-    }
-    if (dropTargetRow.parentElement !== body) {
-        return;
-    }
-    const visible = Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row' && !c.hasAttribute('hidden'));
-    const fromIndex = visible.indexOf(draggedRow);
-    const toIndex = visible.indexOf(dropTargetRow);
-    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
-        return;
-    }
-    if (fromIndex < toIndex) {
-        const nextVisible = getNextVisibleTableBodyRowAfter(dropTargetRow);
-        if (nextVisible) {
-            body.insertBefore(draggedRow, nextVisible);
-        }
-        else {
-            body.insertBefore(draggedRow, null);
-        }
-    }
-    else {
-        body.insertBefore(draggedRow, dropTargetRow);
-    }
-}
-
-function bodyRowFromDragTarget(target) {
-    return getNearestTableBodyRowFromNode(target);
-}
-function tableBodyRowFromEvent(ev) {
-    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-    const row = path.find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-table-row');
-    return row !== null && row !== void 0 ? row : bodyRowFromDragTarget(ev.target);
-}
-function reorderDragHandleFromEvent(ev) {
-    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-    const handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
-    return handle !== null && handle !== void 0 ? handle : null;
-}
 const Table = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.rowOrderChange = createEvent(this, "rowOrderChange", 3);
-        this.rowSelectionChange = createEvent(this, "rowSelectionChange", 3);
-        this.sortChanged = createEvent(this, "sortChanged", 3);
         this.tableSelect = createEvent(this, "tableSelect", 7);
-        this.columnWidthsToken = '';
-        this.lastEmittedRowSelectionKey = '';
-        this.selectAllValue = Math.random().toString(36).slice(2);
-        this.draggedRow = null;
-        this.pendingDragRow = null;
-        this.pointerUpClearPending = null;
-        this.reorderKeyboardTimers = new TimerManager();
-        this.onReorderHandleKeydown = (ev) => {
-            this.handleReorderHandleKeyDown(ev);
-        };
+        this.sortChanged = createEvent(this, "sortChanged", 3);
+        this.selectedValues = [];
+        this.isSortable = false;
+        this.sortableColumns = [];
         this.areAllSelected = false;
-        this.colCount = 0;
         this.hasScrolled = false;
-        this.keyboardReorderRowId = null;
-        this.reorderLiveMessage = '';
-        this.rowData = [];
-        this.rowFooterData = [];
-        this.selected = [];
-        this.selectedRowIds = [];
         this.sortTypeArray = [];
-        this.isSortable = false;
-        this.selectedValues = [];
-        this.sortableColumns = [];
-        this.onGridScroll = (e) => {
-            this.hasScrolled = e.target.scrollLeft > 0;
-        };
+        this.selectAllValue = Math.random().toString(36).slice(2);
         this.selectAll = (e) => {
             const { target } = e;
             if (!(target instanceof HTMLInputElement))
@@ -20533,9 +20430,10 @@ const Table = class {
             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 input')).map((input) => checked ? input === null || input === void 0 ? void 0 : input.value : checked)
                     : this.selected.map(() => checked);
-            this.onSelectionChange();
+            this.onChange();
         };
         this.selectOne = (e, checkboxIdx) => {
             const { target } = e;
@@ -20548,23 +20446,25 @@ const Table = class {
                     return v;
                 return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
             });
-            this.onSelectionChange();
+            this.onChange();
         };
-        this.onSelectionChange = () => {
+        this.onChange = () => {
             this.tableSelect.emit({
                 selected: this.selected,
                 areAllSelected: this.areAllSelected,
             });
         };
-        this.onLegacyScroll = () => {
+        this.onScroll = () => {
             this.hasScrolled = this.container.scrollLeft > 0;
         };
         this.sortBy = (col, sortTypeArray) => {
             const handleSort = (a, b) => {
-                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
                     return -1;
-                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase())
+                }
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
                     return 1;
+                }
                 return 0;
             };
             switch (sortTypeArray[col]) {
@@ -20580,6 +20480,7 @@ const Table = class {
                     break;
             }
             this.rowData = Array.from(this.rowData);
+            this.render();
         };
         this.setData = () => {
             this.rowData = this.data !== undefined ? Array.from(this.data) : [];
@@ -20588,8 +20489,30 @@ const Table = class {
             this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
         };
     }
-    watchColumns() {
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    handleSort(clickEvt, isColumnSortable, colNum, colName) {
+        clickEvt.preventDefault();
+        clickEvt.stopPropagation();
+        if (!isColumnSortable)
+            return;
+        this.sortTypeArray = this.sortTypeArray.map((val, i) => {
+            if (i !== colNum)
+                return null;
+            switch (val) {
+                case 'asc':
+                    return 'desc';
+                case 'desc':
+                    return null;
+                default:
+                    return 'asc';
+            }
+        });
+        const evt = this.sortChanged.emit({
+            colNum,
+            colName,
+            sortTypeArr: this.sortTypeArray,
+        });
+        if (!evt.defaultPrevented)
+            this.sortBy(colNum, this.sortTypeArray);
     }
     watchData() {
         this.setData();
@@ -20597,1415 +20520,54 @@ const Table = class {
     watchFooterData() {
         this.setFooterData();
     }
-    watchReorderHandleIcon() {
-        if (this.isLegacyMode || !this.rowReorderable)
-            return;
-        this.syncInjectedReorderHandleIcons();
-    }
-    watchReorderHandleIconKeyboard() {
-        if (this.isLegacyMode || !this.rowReorderable)
-            return;
-        this.syncInjectedReorderHandleIcons();
-    }
-    watchRowReorderable(next) {
-        if (this.isLegacyMode)
-            return;
-        if (!next) {
-            this.keyboardReorderRowId = null;
-            this.syncReorderHandleKeyboardA11y(null);
-            this.removeManagedReorderCells();
-            this.draggedRow = null;
-            this.pendingDragRow = null;
-            this.clearPendingDragListeners();
-            this.reorderLiveMessage = '';
-            this.queryBodyRows().forEach((r) => {
-                var _a;
-                r.removeAttribute('draggable');
-                (_a = r.querySelector('.xpl-table__row-drag-handle')) === null || _a === void 0 ? void 0 : _a.removeAttribute('draggable');
-                r.classList.remove('xpl-table-row--dragging', 'xpl-table-row--drag-over');
-            });
-            this.colCount = 0;
-            this.columnWidthsToken = '';
-        }
-    }
-    watchSelectable(next) {
-        if (this.isLegacyMode)
-            return;
-        if (!next) {
-            this.selectedRowIds = [];
-            this.lastEmittedRowSelectionKey = '';
-            this.colCount = 0;
-            this.columnWidthsToken = '';
-            this.syncRowSelectedProps();
-        }
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
     }
     componentWillLoad() {
-        if (this.isLegacyMode) {
-            this.areAllSelected = false;
-            this.setData();
-            this.setFooterData();
-            this.selected = new Array(this.rowData.length).fill(false);
-            this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-        }
-    }
-    componentDidLoad() {
-        if (!this.isLegacyMode) {
-            this.syncCompositionalLayout();
-        }
-    }
-    componentDidUpdate() {
-        if (!this.isLegacyMode) {
-            this.syncCompositionalLayout();
-        }
-    }
-    disconnectedCallback() {
-        this.clearPendingDragListeners();
-        this.detachReorderHandleKeydownListeners();
-        this.reorderKeyboardTimers.dispose();
-        if (this.reorderAnnounceRaf !== undefined) {
-            cancelAnimationFrame(this.reorderAnnounceRaf);
-            this.reorderAnnounceRaf = undefined;
-        }
-    }
-    handleHeaderCellColumnWidthsChange(ev) {
-        if (this.isLegacyMode)
-            return;
-        const t = ev.target;
-        if (!(t instanceof Node) || !this.el.contains(t))
-            return;
-        this.updateColumnWidths();
-    }
-    handleCompositionalCheckboxChange(ev) {
-        var _a, _b;
-        if (this.isLegacyMode || !this.selectable)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
-        let checkboxHost = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-checkbox');
-        if (!checkboxHost &&
-            ev.target &&
-            typeof ev.target.closest === 'function') {
-            checkboxHost = ev.target.closest('xpl-checkbox');
-        }
-        if (!checkboxHost || !this.el.contains(checkboxHost))
-            return;
-        const row = checkboxHost.closest('xpl-table-row');
-        if (!row || !this.isDirectChildBodyRow(row))
-            return;
-        const cell = checkboxHost.closest('xpl-table-cell');
-        if (!cell)
-            return;
-        const selectionIdx = this.getSelectionColumnIndex();
-        if (selectionIdx === null)
-            return;
-        const bodyCells = Table.getBodyRowCells(row);
-        const colIdx = bodyCells.indexOf(cell);
-        if (colIdx !== selectionIdx)
-            return;
-        ev.stopPropagation();
-        const rowId = Table.getRowIdForRow(row);
-        if (!rowId || row.disabled)
-            return;
-        const input = checkboxHost.querySelector('input[type="checkbox"]');
-        if (!input)
-            return;
-        const { checked } = input;
-        if (checked) {
-            if (!this.selectedRowIds.includes(rowId)) {
-                this.selectedRowIds = [...this.selectedRowIds, rowId];
-            }
-        }
-        else {
-            this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
-        }
-        this.applyHeaderCheckboxState();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    handleCompositionalHeaderCheckboxChange(ev) {
-        var _a, _b;
-        if (this.isLegacyMode || !this.selectable)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
-        let headerCell = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement &&
-            n.tagName.toLowerCase() === 'xpl-table-header-cell' &&
-            n.getAttribute('type') === 'checkbox');
-        if (!headerCell && ev.target && typeof ev.target.closest === 'function') {
-            headerCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
-        }
-        if (!headerCell || !this.el.contains(headerCell))
-            return;
-        if (!this.isCellInOurCompositionalHeader(headerCell))
-            return;
-        const headerCells = this.getCompositionalHeaderCells();
-        if (!headerCells.includes(headerCell))
-            return;
-        const checked = !!ev.detail;
-        const selectableRows = this.querySelectableBodyRows();
-        const ids = selectableRows
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id);
-        if (checked) {
-            this.selectedRowIds = [...ids];
-        }
-        else {
-            this.selectedRowIds = [];
-        }
-        this.applyBodyCheckboxStates();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    handlePointerDownExitKeyboardReorder(ev) {
-        if (this.isLegacyMode || !this.rowReorderable || this.keyboardReorderRowId === null) {
-            return;
-        }
-        const t = ev.target;
-        if (!(t instanceof Node) || !this.el.contains(t)) {
-            return;
-        }
-        const row = t instanceof Element ? t.closest('xpl-table-row') : null;
-        if (!row || !this.isDirectChildBodyRow(row)) {
-            return;
-        }
-        this.keyboardReorderRowId = null;
-        this.syncReorderHandleKeyboardA11y(null);
-    }
-    handleReorderHandleKeyDown(ev) {
-        var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const rawPath = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-        const path = rawPath.length > 0 ? rawPath : ev.target ? [ev.target] : [];
-        let handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
-        if (!handle &&
-            ev.target instanceof HTMLElement &&
-            ev.target.classList.contains('xpl-table__row-drag-handle')) {
-            handle = ev.target;
-        }
-        if (!handle || !this.el.contains(handle)) {
-            return;
-        }
-        const row = handle.closest('xpl-table-row');
-        if (!row || !this.isDirectChildBodyRow(row)) {
-            return;
-        }
-        const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-        if (!rowId) {
-            return;
-        }
-        const isKbd = this.keyboardReorderRowId === rowId;
-        const isEscapeKey = ev.key === 'Escape' ||
-            ev.key === 'Esc' ||
-            ev.code === 'Escape' ||
-            ev.keyCode === 27;
-        if (row.disabled) {
-            if (isEscapeKey && isKbd) {
-                ev.preventDefault();
-                this.keyboardReorderRowId = null;
-                this.syncReorderHandleKeyboardA11y(null);
-            }
-            return;
-        }
-        if (isEscapeKey) {
-            if (isKbd) {
-                ev.preventDefault();
-                this.keyboardReorderRowId = null;
-                this.syncReorderHandleKeyboardA11y(null);
-            }
-            return;
-        }
-        if (!isKbd) {
-            if (ev.key === 'Enter' || ev.key === ' ') {
-                ev.preventDefault();
-                this.keyboardReorderRowId = rowId;
-                this.syncReorderHandleKeyboardA11y(rowId);
-            }
-            return;
-        }
-        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
-            ev.preventDefault();
-            const dir = ev.key === 'ArrowUp' ? 'up' : 'down';
-            this.performKeyboardRowReorder(rowId, dir);
-        }
-    }
-    handleRowReorderPointerDown(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const handle = reorderDragHandleFromEvent(ev);
-        if (!handle) {
-            return;
-        }
-        const table = handle.closest('xpl-table');
-        if (table !== this.el) {
-            return;
-        }
-        const row = bodyRowFromDragTarget(handle);
-        if (!row || row.disabled) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body) {
-            return;
-        }
-        this.clearPendingDragListeners();
-        this.pendingDragRow = row;
-        const onPointerEnd = () => {
-            this.clearPendingDragListeners();
-            this.pendingDragRow = null;
-        };
-        document.addEventListener('pointerup', onPointerEnd, true);
-        document.addEventListener('pointercancel', onPointerEnd, true);
-        this.pointerUpClearPending = () => {
-            document.removeEventListener('pointerup', onPointerEnd, true);
-            document.removeEventListener('pointercancel', onPointerEnd, true);
-        };
+        this.areAllSelected = false;
+        this.setData();
+        this.setFooterData();
+        this.selected = new Array(this.rowData.length).fill(false);
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
     }
-    handleRowReorderDragStart(ev) {
+    render() {
         var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row) {
-            return;
-        }
-        if (row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body) {
-            return;
-        }
-        if (row.disabled || this.pendingDragRow !== row) {
-            ev.preventDefault();
-            return;
-        }
-        this.keyboardReorderRowId = null;
-        this.syncReorderHandleKeyboardA11y(null);
-        this.clearPendingDragListeners();
-        this.pendingDragRow = null;
-        this.draggedRow = row;
-        if (ev.dataTransfer) {
-            ev.dataTransfer.effectAllowed = 'move';
-            ev.dataTransfer.setData('text/plain', (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
-        }
-        row.classList.add('xpl-table-row--dragging');
-    }
-    handleRowReorderDragEnd(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
+        if (this.columns &&
+            (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
+            this.sortTypeArray = this.columns.map(() => null);
         }
-        row.classList.remove('xpl-table-row--dragging');
-        this.clearReorderDragOverClasses();
-        this.draggedRow = null;
-    }
-    handleRowReorderDragOver(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body || row.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        if (ev.dataTransfer) {
-            ev.dataTransfer.dropEffect = 'move';
-        }
-    }
-    handleRowReorderDragEnter(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body || row.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        row.classList.add('xpl-table-row--drag-over');
-    }
-    handleRowReorderDragLeave(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const related = ev.relatedTarget;
-        if (related && row.contains(related)) {
-            return;
-        }
-        row.classList.remove('xpl-table-row--drag-over');
-    }
-    handleRowReorderDrop(ev) {
-        var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        ev.preventDefault();
-        const dropRow = tableBodyRowFromEvent(ev);
-        if (!dropRow || dropRow.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || dropRow.parentElement !== body || dropRow.disabled) {
-            return;
-        }
-        const source = this.draggedRow;
-        if (!source || source.disabled) {
-            this.draggedRow = null;
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        if (source === dropRow) {
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        const visible = this.getVisibleBodyRowsForReorder();
-        const fromIndex = visible.indexOf(source);
-        const toIndex = visible.indexOf(dropRow);
-        if (fromIndex === -1 || toIndex === -1) {
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        const direction = fromIndex > toIndex ? 'up' : 'down';
-        const rowId = (_a = Table.getRowIdForRow(source)) !== null && _a !== void 0 ? _a : '';
-        const runMove = () => {
-            moveRowInTableBody(body, source, dropRow);
-        };
-        runMove();
-        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
-        this.rowOrderChange.emit({
-            rowId,
-            direction,
-            orderedRowIds,
-            fromIndex,
-            toIndex,
-        });
-        this.announceRowReorder(rowId, orderedRowIds);
-        this.clearReorderDragOverClasses();
-        if (this.selectable) {
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        this.updateColumnWidths();
-    }
-    get isLegacyMode() {
-        return this.columns !== undefined || this.data !== undefined || this.footer !== undefined;
-    }
-    ensureTableInstanceId() {
-        if (this.tableInstanceId)
-            return;
-        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-            this.tableInstanceId = crypto.randomUUID();
-        }
-        else {
-            this.tableInstanceId = Math.random().toString(36).slice(2);
-        }
-    }
-    generateRowId() {
-        this.ensureTableInstanceId();
-        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-            return `${this.tableInstanceId}-${crypto.randomUUID()}`;
-        }
-        return `${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`;
-    }
-    syncCompositionalLayout() {
-        if (this.isLegacyMode)
-            return;
-        if (this.rowReorderable) {
-            this.syncReorderColumn();
-        }
-        else {
-            this.removeManagedReorderCells();
-        }
-        if (this.selectable) {
-            this.ensureTableInstanceId();
-            this.pruneStaleSelectedRowIds();
-            this.ensureBodyRowIds();
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        if (this.rowReorderable && this.selectable) {
-            this.normalizeManagedColumnsOrder();
-        }
-        this.updateColumnWidths();
-    }
-    getDirectChildTableSection(tag) {
-        var _a;
-        const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
-        return (_a = el) !== null && _a !== void 0 ? _a : null;
-    }
-    isDirectChildBodyRow(row) {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        return body !== null && row.parentElement === body;
-    }
-    isCellInOurCompositionalHeader(cell) {
-        const header = cell.closest('xpl-table-header');
-        return header !== null && header.parentElement === this.el;
-    }
-    getSelectionColumnIndex() {
-        const headerCells = this.getCompositionalHeaderCells();
-        const idx = headerCells.findIndex((c) => c.getAttribute('type') === 'checkbox');
-        return idx >= 0 ? idx : null;
-    }
-    static getBodyRowCells(row) {
-        return Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell');
-    }
-    queryBodyRows() {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body)
-            return [];
-        return Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-    }
-    querySelectableBodyRows() {
-        return this.queryBodyRows().filter((row) => !row.disabled);
-    }
-    static getRowIdForRow(row) {
-        var _a;
-        const id = (_a = row.getAttribute('row-id')) === null || _a === void 0 ? void 0 : _a.trim();
-        return id || null;
-    }
-    ensureBodyRowIds() {
-        this.queryBodyRows().forEach((row) => {
-            if (Table.getRowIdForRow(row))
-                return;
-            row.setAttribute('row-id', this.generateRowId());
-        });
-    }
-    removeManagedReorderCells() {
-        this.el.querySelectorAll(`[${ROW_REORDER_MARK}]`).forEach((node) => {
-            var _a;
-            if (!(node instanceof Element))
-                return;
-            if (node.closest('xpl-table') !== this.el)
-                return;
-            (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        });
-    }
-    getSelectionSlotCellForReorderOrder(row) {
-        const idx = this.getSelectionColumnIndex();
-        if (idx === null) {
-            return null;
-        }
-        const cells = Array.from(row.children);
-        const cell = cells[idx];
-        if (!cell) {
-            return null;
-        }
-        const tag = cell.tagName.toLowerCase();
-        if (tag === 'xpl-table-header-cell') {
-            return cell.getAttribute('type') === 'checkbox' ? cell : null;
-        }
-        if (tag === 'xpl-table-cell') {
-            if (cell.hasAttribute(SELECTION_MARK)) {
-                return cell;
-            }
-            return cell.querySelector('xpl-checkbox') ? cell : null;
-        }
-        if (tag === 'xpl-table-footer-cell') {
-            return cell;
-        }
-        return null;
-    }
-    normalizeManagedColumnsOrder() {
-        var _a;
-        const fix = (row) => {
-            const re = row.querySelector(`:scope > [${ROW_REORDER_MARK}]`);
-            const se = this.getSelectionSlotCellForReorderOrder(row);
-            if (!re || !se) {
-                return;
-            }
-            const siblings = Array.from(row.children);
-            const iRe = siblings.indexOf(re);
-            const iSe = siblings.indexOf(se);
-            if (iRe > iSe) {
-                row.insertBefore(re, se);
-            }
-        };
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (header) {
-            const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-            const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-            fix(container);
-        }
-        this.queryBodyRows().forEach((row) => fix(row));
-        const footer = this.getDirectChildTableSection('xpl-table-footer');
-        if (footer) {
-            Array.from(footer.children)
-                .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
-                .forEach((row) => fix(row));
-        }
-    }
-    syncReorderColumn() {
-        if (!this.rowReorderable || this.isLegacyMode)
-            return;
-        this.ensureBodyRowIds();
-        this.ensureHeaderReorderCell();
-        this.ensureBodyReorderCells();
-        this.ensureFooterReorderCells();
-        this.applyReorderRowDraggableState();
-    }
-    ensureHeaderReorderCell() {
-        var _a;
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (!header)
-            return;
-        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-        if (Array.from(container.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell' &&
-            c.hasAttribute(ROW_REORDER_MARK))) {
-            return;
-        }
-        const cell = document.createElement('xpl-table-header-cell');
-        cell.setAttribute(ROW_REORDER_MARK, '');
-        cell.setAttribute('type', 'empty');
-        cell.setAttribute('width', '48');
-        cell.setAttribute('align', 'center');
-        container.insertBefore(cell, container.firstChild);
-    }
-    ensureBodyReorderCells() {
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const managed = Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell' &&
-                c.hasAttribute(ROW_REORDER_MARK));
-            if (managed.length > 1) {
-                for (let i = 1; i < managed.length; i += 1) {
-                    managed[i].remove();
-                }
-            }
-            let cell = managed[0];
-            if (!cell) {
-                const newCell = document.createElement('xpl-table-cell');
-                newCell.setAttribute(ROW_REORDER_MARK, '');
-                newCell.setAttribute('width', '48');
-                newCell.setAttribute('align', 'center');
-                const btn = document.createElement('button');
-                btn.type = 'button';
-                btn.className = 'xpl-table__row-drag-handle';
-                btn.setAttribute('aria-label', 'Reorder row');
-                btn.setAttribute('aria-pressed', 'false');
-                const iconName = this.getResolvedIconForRow((_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
-                if (iconName) {
-                    const icon = document.createElement('xpl-icon');
-                    icon.setAttribute('icon', iconName);
-                    icon.setAttribute('size', '16');
-                    btn.appendChild(icon);
-                }
-                newCell.appendChild(btn);
-                row.insertBefore(newCell, row.firstChild);
-                cell = newCell;
-            }
-            else {
-                cell.setAttribute('align', 'center');
-            }
-            const btn = cell.querySelector('.xpl-table__row-drag-handle');
-            if (btn) {
-                btn.disabled = row.disabled;
-            }
-        });
-        this.syncInjectedReorderHandleIcons();
-        this.attachReorderHandleKeydownListeners();
-    }
-    getResolvedIconForRow(rowId) {
-        var _a, _b;
-        const inKeyboardMode = this.keyboardReorderRowId !== null &&
-            rowId !== '' &&
-            rowId === this.keyboardReorderRowId;
-        if (inKeyboardMode) {
-            if (this.reorderHandleIconKeyboard === '') {
-                return null;
-            }
-            return (_a = this.reorderHandleIconKeyboard) !== null && _a !== void 0 ? _a : 'caret-expand-y';
-        }
-        if (this.reorderHandleIcon === '') {
-            return null;
-        }
-        return (_b = this.reorderHandleIcon) !== null && _b !== void 0 ? _b : 'grip-dots-vertical';
-    }
-    syncInjectedReorderHandleIcons() {
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn) {
-                return;
-            }
-            const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-            const iconName = this.getResolvedIconForRow(rowId);
-            btn.querySelectorAll('xpl-icon').forEach((n) => n.remove());
-            if (iconName) {
-                const icon = document.createElement('xpl-icon');
-                icon.setAttribute('icon', iconName);
-                icon.setAttribute('size', '16');
-                btn.appendChild(icon);
-            }
-        });
-    }
-    syncReorderHandleKeyboardA11y(activeId) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn) {
-                return;
-            }
-            const rid = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-            const isActive = activeId !== null && rid === activeId;
-            btn.classList.toggle('xpl-table__row-drag-handle--keyboard-mode', isActive);
-            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-            btn.setAttribute('aria-label', isActive
-                ? 'Press arrow up or down to reorder, Escape to exit'
-                : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder');
-        });
-        this.syncInjectedReorderHandleIcons();
-    }
-    attachReorderHandleKeydownListeners() {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        this.queryBodyRows().forEach((row) => {
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn || btn.dataset.xplReorderKbdBound === 'true') {
-                return;
-            }
-            btn.dataset.xplReorderKbdBound = 'true';
-            btn.addEventListener('keydown', this.onReorderHandleKeydown);
-        });
-    }
-    detachReorderHandleKeydownListeners() {
-        if (!this.el) {
-            return;
-        }
-        this.el
-            .querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]')
-            .forEach((btn) => {
-            btn.removeEventListener('keydown', this.onReorderHandleKeydown);
-            delete btn.dataset.xplReorderKbdBound;
-        });
-    }
-    performKeyboardRowReorder(rowId, direction) {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body) {
-            return false;
-        }
-        const visible = this.getVisibleBodyRowsForReorder();
-        const itemIndex = visible.findIndex((r) => Table.getRowIdForRow(r) === rowId);
-        if (itemIndex === -1) {
-            return false;
-        }
-        const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
-        if (targetIndex < 0 || targetIndex >= visible.length) {
-            return false;
-        }
-        const fromIndex = itemIndex;
-        const item = visible[itemIndex];
-        const targetItem = visible[targetIndex];
-        if (direction === 'up') {
-            body.insertBefore(item, targetItem);
-        }
-        else {
-            const nextVisible = getNextVisibleTableBodyRowAfter(targetItem);
-            if (nextVisible) {
-                body.insertBefore(item, nextVisible);
-            }
-            else {
-                body.appendChild(item);
-            }
-        }
-        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
-        const toIndex = orderedRowIds.indexOf(rowId);
-        this.rowOrderChange.emit({
-            rowId,
-            direction,
-            orderedRowIds,
-            fromIndex,
-            toIndex,
-        });
-        this.announceRowReorder(rowId, orderedRowIds);
-        this.clearReorderDragOverClasses();
-        if (this.selectable) {
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        this.updateColumnWidths();
-        this.reorderKeyboardTimers.requestAnimationFrame(() => {
-            if (!this.el.isConnected) {
-                return;
-            }
-            const moved = this.getVisibleBodyRowsForReorder().find((r) => Table.getRowIdForRow(r) === rowId);
-            const btn = moved === null || moved === void 0 ? void 0 : moved.querySelector('.xpl-table__row-drag-handle');
-            btn === null || btn === void 0 ? void 0 : btn.focus();
-        });
-        return true;
-    }
-    ensureFooterReorderCells() {
-        const footer = this.getDirectChildTableSection('xpl-table-footer');
-        if (!footer)
-            return;
-        Array.from(footer.children)
-            .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
-            .forEach((row) => {
-            if (Array.from(row.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-footer-cell' &&
-                c.hasAttribute(ROW_REORDER_MARK))) {
-                return;
-            }
-            const cell = document.createElement('xpl-table-footer-cell');
-            cell.setAttribute(ROW_REORDER_MARK, '');
-            cell.setAttribute('width', '48');
-            cell.setAttribute('align', 'center');
-            row.insertBefore(cell, row.firstChild);
-        });
-    }
-    static supportsSubgridBodyRow() {
-        return (typeof CSS !== 'undefined' &&
-            typeof CSS.supports === 'function' &&
-            CSS.supports('grid-template-columns', 'subgrid'));
-    }
-    applyReorderRowDraggableState() {
-        const useRowDrag = Table.supportsSubgridBodyRow();
-        this.queryBodyRows().forEach((row) => {
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            btn === null || btn === void 0 ? void 0 : btn.removeAttribute('draggable');
-            row.removeAttribute('draggable');
-            if (!this.rowReorderable || row.disabled) {
-                return;
-            }
-            if (!btn) {
-                return;
-            }
-            if (useRowDrag) {
-                row.setAttribute('draggable', 'true');
-            }
-            else {
-                btn.setAttribute('draggable', 'true');
-            }
-        });
-    }
-    getVisibleBodyRowsForReorder() {
-        return this.queryBodyRows().filter((r) => !r.hasAttribute('hidden'));
-    }
-    clearReorderDragOverClasses() {
-        this.queryBodyRows().forEach((r) => r.classList.remove('xpl-table-row--drag-over'));
-    }
-    clearPendingDragListeners() {
-        if (this.pointerUpClearPending) {
-            this.pointerUpClearPending();
-            this.pointerUpClearPending = null;
-        }
-    }
-    announceRowReorder(movedRowId, orderedRowIds) {
-        if (!this.rowReorderable || !movedRowId) {
-            return;
-        }
-        const index = orderedRowIds.indexOf(movedRowId);
-        if (index < 0) {
-            return;
-        }
-        this.reorderLiveMessage = '';
-        if (this.reorderAnnounceRaf !== undefined) {
-            cancelAnimationFrame(this.reorderAnnounceRaf);
-        }
-        this.reorderAnnounceRaf = requestAnimationFrame(() => {
-            this.reorderAnnounceRaf = undefined;
-            if (!this.el.isConnected) {
-                return;
-            }
-            this.reorderLiveMessage = `Row ${movedRowId}, now position ${index + 1} of ${orderedRowIds.length}`;
-        });
-    }
-    pruneStaleSelectedRowIds() {
-        const validIds = new Set(this.queryBodyRows()
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id));
-        const next = this.selectedRowIds.filter((id) => validIds.has(id));
-        if (next.length === this.selectedRowIds.length)
-            return;
-        this.selectedRowIds = next;
-        this.applyBodyCheckboxStates();
-        this.applyHeaderCheckboxState();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    static getBodyRowCheckboxAriaLabel(row, selectionColIndex) {
-        var _a, _b;
-        const cells = Table.getBodyRowCells(row);
-        const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
-            !c.hasAttribute(ROW_REORDER_MARK));
-        const first = labelCell !== null && labelCell !== void 0 ? labelCell : cells[0];
-        if (!first)
-            return 'Select row';
-        const raw = (_b = (_a = first.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim()) !== null && _b !== void 0 ? _b : '';
-        if (!raw)
-            return 'Select row';
-        const truncated = raw.length > 100 ? `${raw.slice(0, 100)}…` : raw;
-        return `Select row, ${truncated}`;
-    }
-    applyBodyCheckboxStates() {
-        const selectionIdx = this.getSelectionColumnIndex();
-        if (selectionIdx === null)
-            return;
-        this.queryBodyRows().forEach((row) => {
-            const rowId = Table.getRowIdForRow(row);
-            const cells = Table.getBodyRowCells(row);
-            const cell = cells[selectionIdx];
-            const cb = cell === null || cell === void 0 ? void 0 : cell.querySelector('xpl-checkbox');
-            if (!cb || !rowId)
-                return;
-            cb.checked = this.selectedRowIds.includes(rowId);
-            cb.disabled = row.disabled;
-            cb.value = rowId;
-            cb.setAttribute('aria-label', Table.getBodyRowCheckboxAriaLabel(row, selectionIdx));
-        });
-    }
-    getHeaderCheckboxCell() {
-        const idx = this.getSelectionColumnIndex();
-        if (idx === null)
-            return null;
-        const cells = this.getCompositionalHeaderCells();
-        const cell = cells[idx];
-        if (!cell || cell.getAttribute('type') !== 'checkbox')
-            return null;
-        return cell;
-    }
-    applyHeaderCheckboxState() {
-        const cell = this.getHeaderCheckboxCell();
-        if (!cell)
-            return;
-        const selectableRows = this.querySelectableBodyRows();
-        const ids = selectableRows
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id);
-        const selectedCount = ids.filter((id) => this.selectedRowIds.includes(id)).length;
-        const allSelected = ids.length > 0 && selectedCount === ids.length;
-        const indeterminate = selectedCount > 0 && !allSelected;
-        cell.checked = allSelected;
-        cell.indeterminate = indeterminate;
-    }
-    syncRowSelectedProps() {
-        this.queryBodyRows().forEach((row) => {
-            const id = Table.getRowIdForRow(row);
-            const selected = id ? this.selectedRowIds.includes(id) : false;
-            row.selected = selected;
-        });
-    }
-    emitCompositionalSelection() {
-        const ids = this.selectedRowIds;
-        const key = ids.join('\u0001');
-        if (key === this.lastEmittedRowSelectionKey) {
-            return;
-        }
-        this.lastEmittedRowSelectionKey = key;
-        this.rowSelectionChange.emit({ selectedRowIds: [...ids] });
-    }
-    isEventFromThisTable(target) {
-        if (target == null || typeof target !== 'object')
-            return false;
-        const t = target;
-        const start = 'closest' in t && typeof t.closest === 'function'
-            ? t
-            : 'parentElement' in t
-                ? t.parentElement
-                : null;
-        if (!start)
-            return false;
-        const nearest = start.closest('xpl-table');
-        return nearest === this.el;
-    }
-    static sortKeyFromHeaderCell(cell, columnIndex) {
-        var _a, _b;
-        const c = cell;
-        const raw = ((_b = (_a = c.sortKey) !== null && _a !== void 0 ? _a : c.label) !== null && _b !== void 0 ? _b : '').trim();
-        if (raw.length > 0) {
-            return raw.replace(/ /g, '-').toLowerCase();
-        }
-        return `column-${columnIndex}`;
-    }
-    handleCompositionalHeaderSort(ev) {
-        var _a;
-        if (this.isLegacyMode)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const source = ev.target;
-        const headerRow = (_a = source.closest('xpl-table-header xpl-table-row')) !== null && _a !== void 0 ? _a : source.closest('xpl-table-row');
-        if (!headerRow || !this.el.contains(headerRow))
-            return;
-        const cells = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
-        const { columnIndex } = ev.detail;
-        const target = cells[columnIndex];
-        if (!(target === null || target === void 0 ? void 0 : target.sortable))
-            return;
-        const next = cycleSortDirection(target.sortDirection);
-        cells.forEach((cell, i) => {
-            const hc = cell;
-            if (!hc.sortable)
-                return;
-            hc.sortDirection = i === columnIndex ? next : null;
-        });
-        const sortState = {};
-        cells.forEach((cell, i) => {
-            var _a;
-            const hc = cell;
-            if (!hc.sortable)
-                return;
-            sortState[Table.sortKeyFromHeaderCell(hc, i)] = (_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null;
-        });
-        const sortTypeArr = cells.map((cell) => {
-            var _a;
-            const hc = cell;
-            return hc.sortable ? ((_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null) : null;
-        });
-        const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
-        const detail = Object.assign(Object.assign({}, sortState), { colNum: columnIndex, colName,
-            sortTypeArr });
-        this.sortChanged.emit(detail);
-    }
-    legacySortStatePayload() {
-        var _a;
-        const out = {};
-        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
-            return out;
-        this.columns.forEach((col, i) => {
-            var _a;
-            const key = col.replace(/ /g, '-').toLowerCase();
-            out[key] = (_a = this.sortTypeArray[i]) !== null && _a !== void 0 ? _a : null;
-        });
-        return out;
-    }
-    legacySortChangedDetail(colNum) {
-        var _a, _b;
-        const base = this.legacySortStatePayload();
-        const title = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a[colNum]) !== null && _b !== void 0 ? _b : '';
-        const colName = title.replace(/ /g, '-').toLowerCase();
-        return Object.assign(Object.assign({}, base), { colNum,
-            colName, sortTypeArr: [...this.sortTypeArray] });
-    }
-    getCompositionalHeaderCells() {
-        var _a;
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (!header)
-            return [];
-        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-        return Array.from(container.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell');
-    }
-    updateColumnWidths() {
-        const headerCells = this.getCompositionalHeaderCells();
-        const columnWidths = headerCells.map((cell) => getGridColumnWidthFromHeaderCell(cell));
-        const next = columnWidths.join(' ');
-        const n = headerCells.length;
-        if (n === this.colCount && this.colCount > 0 && this.columnWidthsToken === next) {
-            return;
-        }
-        this.el.style.setProperty('--column-widths', next);
-        this.colCount = n;
-        this.columnWidthsToken = next;
-    }
-    handleSort(clickEvt, isColumnSortable, colNum) {
-        clickEvt.preventDefault();
-        clickEvt.stopPropagation();
-        if (!isColumnSortable)
-            return;
-        this.sortTypeArray = this.sortTypeArray.map((val, i) => {
-            if (i !== colNum)
-                return null;
-            switch (val) {
-                case 'asc':
-                    return 'desc';
-                case 'desc':
-                    return null;
-                default:
-                    return 'asc';
-            }
-        });
-        const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
-        if (!evt.defaultPrevented)
-            this.sortBy(colNum, this.sortTypeArray);
-    }
-    renderLegacy() {
-        var _a;
-        if (this.columns &&
-            (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
-            this.sortTypeArray = this.columns.map(() => null);
-        }
-        return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
-                this.container = el;
-            } }, h("table", { class: {
-                'xpl-table': true,
-                'xpl-table--legacy': true,
-                'xpl-table--striped': this.striped,
-                'xpl-table--freeze': this.freeze,
-                'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", null, this.columns.map((column, i) => {
-            var _a, _b;
-            const iconType = getIconType((_b = (_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : null);
-            const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
-            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (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] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", null, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
-                ? 'xpl-table-row-selected'
-                : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
-                ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", null, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
-    }
-    renderCompositional() {
-        const selectionToolbarCount = this.selectedRowIds.length;
-        return (h(Host, { role: "grid", "aria-label": this.label, "aria-colcount": this.colCount > 0 ? this.colCount : undefined, class: {
-                'xpl-table': true,
-                'xpl-table--striped': this.striped,
-                'xpl-table--freeze': this.freeze,
-                'xpl-table--has-scrolled': this.hasScrolled,
-                'xpl-table--selectable': !!this.selectable,
-                'xpl-table--selection-active': !!this.selectable && this.selectedRowIds.length > 0,
-                'xpl-table--row-reorderable': !!this.rowReorderable,
-            }, onScroll: this.onGridScroll }, this.rowReorderable && (h("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (h("div", { class: {
-                'xpl-toolbar': true,
-                hidden: selectionToolbarCount === 0,
-                'xpl-table__toolbar': true,
-            } }, h("div", { class: "toolbar" }, h("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), h("div", { class: "actions" }, h("slot", { name: "toolbar-actions-left" }), h("slot", { name: "toolbar-actions-right" }))))), h("slot", null)));
-    }
-    render() {
-        return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
+        return (h(Host, { key: '10b0bfd08e28fada9a2c8509d405c5314cce1689' }, h("div", { key: '8e5b4fe928618b175a58f858f6cfd65f4bd29c53', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                this.container = el;
+            } }, h("table", { key: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', class: {
+                'xpl-table': true,
+                'xpl-table--striped': this.striped,
+                'xpl-table--freeze': this.freeze,
+                'xpl-table--has-scrolled': this.hasScrolled,
+            } }, this.columns && (h("thead", { key: '5f14766107d69f26b865f63c323d417f43260267' }, 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 (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (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] && (h("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), h("tbody", { key: 'b13ca1d1a738de189d4f040dfd309187671b341d' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+                ? 'xpl-table-row-selected'
+                : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
+                ? this.selectedValues[rowNum]
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "columns": [{
-                "watchColumns": 0
-            }],
         "data": [{
                 "watchData": 0
             }],
         "footer": [{
                 "watchFooterData": 0
             }],
-        "reorderHandleIcon": [{
-                "watchReorderHandleIcon": 0
-            }],
-        "reorderHandleIconKeyboard": [{
-                "watchReorderHandleIconKeyboard": 0
-            }],
-        "rowReorderable": [{
-                "watchRowReorderable": 0
-            }],
-        "selectable": [{
-                "watchSelectable": 0
-            }]
-    }; }
-};
-
-const XplTableBody = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '7320d9e105bbd49c3ce38b8c199b965a3863440c', role: "rowgroup", class: "xpl-table-body" }, h("slot", { key: '3df8f5a49bca0c8b50126cb41e59e1209e57fc6b' })));
-    }
-};
-
-function isDisablableControl(el) {
-    switch (el.tagName) {
-        case 'BUTTON':
-        case 'INPUT':
-        case 'SELECT':
-        case 'TEXTAREA':
-        case 'FIELDSET':
-        case 'OPTGROUP':
-        case 'OPTION':
-            return true;
-        default:
-            return false;
-    }
-}
-const XplTableCell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.align = 'left';
-        this.bold = false;
-        this.disabled = false;
-        this.underline = false;
-    }
-    onDisabledChange() {
-        this.propagateDisabledToSlotted();
-    }
-    componentDidLoad() {
-        this.propagateDisabledToSlotted();
-    }
-    propagateDisabledToSlotted() {
-        const setControlDisabled = (element) => {
-            if (!isDisablableControl(element)) {
-                return;
-            }
-            const control = element;
-            control.disabled = this.disabled;
-            if (this.disabled) {
-                control.setAttribute('disabled', '');
-            }
-            else {
-                control.removeAttribute('disabled');
-            }
-        };
-        const walk = (parent) => {
-            Array.from(parent.children).forEach((child) => {
-                if (child.tagName === 'XPL-TABLE') {
-                    return;
-                }
-                setControlDisabled(child);
-                walk(child);
-            });
-        };
-        walk(this.el);
-    }
-    render() {
-        return (h(Host, { key: '91700fc89eff07fc5c54474c12e3a02eb602c6c3', role: "gridcell", class: {
-                'xpl-table-cell': true,
-                [`xpl-table-cell--align-${this.align}`]: true,
-                'xpl-table-cell--bold': this.bold,
-                'xpl-table-cell--underline': this.underline,
-                'xpl-table-cell--disabled': this.disabled,
-            } }, h("slot", { key: '5e956de9f694db16d9f5ea89bda1ff05a15e9efa' })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": [{
-                "onDisabledChange": 0
-            }]
-    }; }
-};
-
-const XplTableFooter = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '891052963f727f283783138363c9a925cb59140b', role: "rowgroup", class: "xpl-table-footer" }, h("slot", { key: 'df01f64a46ecd29380df26e053c2a6c246a22556' })));
-    }
-};
-
-const XplTableFooterCell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.align = 'left';
-    }
-    render() {
-        return (h(Host, { key: '452cb6ac0333ca57329341404343c290c63fc508', role: "gridcell", class: {
-                'xpl-table-footer-cell': true,
-                [`xpl-table-footer-cell--align-${this.align}`]: true,
-            } }, h("slot", { key: 'db6d5848f2aa009437317b9e71a47f0ca9245161' })));
-    }
-};
-
-const TableHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '70eac99819cc3acbbfb54607fc657fb27bd26b4b', role: "rowgroup", class: "xpl-table-header" }, h("slot", { key: '9c46b25d247603f8c87a3994615bd45c617d9bb9' })));
-    }
-};
-
-const TableHeaderCell = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.headerCheckboxChange = createEvent(this, "headerCheckboxChange", 7);
-        this.headerSortChange = createEvent(this, "headerSortChange", 7);
-        this.align = 'left';
-        this.checked = false;
-        this.indeterminate = false;
-        this.label = '';
-        this.sortable = false;
-        this.type = 'label';
-        this.onHeaderInnerCheckboxChange = (ev) => {
-            const { detail } = ev;
-            const checked = typeof detail === 'boolean' ? detail : Boolean(detail);
-            this.headerCheckboxChange.emit(checked);
-        };
-        this.onSortActivate = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!this.sortable || this.type !== 'label')
-                return;
-            const columnIndex = this.getColumnIndex0();
-            const sortKey = this.getSortKeySlug();
-            if (!this.el.closest('xpl-table')) {
-                this.sortDirection = cycleSortDirection(this.sortDirection);
-            }
-            this.headerSortChange.emit({
-                columnIndex,
-                sortKey,
-            });
-        };
-    }
-    watchColumnWidth() {
-        this.notifyColumnWidthsChange();
-    }
-    watchWidth() {
-        this.notifyColumnWidthsChange();
-    }
-    componentDidLoad() {
-        this.notifyColumnWidthsChange();
-    }
-    notifyColumnWidthsChange() {
-        this.el.dispatchEvent(new CustomEvent(XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT, {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    getColumnIndex0() {
-        var _a, _b;
-        return Array.from((_b = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []).indexOf(this.el);
-    }
-    getSortKeySlug() {
-        var _a, _b;
-        const raw = ((_b = (_a = this.sortKey) !== null && _a !== void 0 ? _a : this.label) !== null && _b !== void 0 ? _b : '').trim();
-        if (raw.length > 0) {
-            return raw.replace(/ /g, '-').toLowerCase();
-        }
-        return `column-${this.getColumnIndex0()}`;
-    }
-    renderLabelContent() {
-        if (this.sortable) {
-            const iconName = getSortAffordanceIconName(this.sortDirection);
-            const sortActive = this.sortDirection === 'asc' || this.sortDirection === 'desc';
-            return (h("button", { type: "button", class: "xpl-table-header-cell__sort", onClick: this.onSortActivate }, h("span", { class: "xpl-table-header-cell__text" }, h("slot", null, this.label)), h("xpl-icon", { class: {
-                    'xpl-table-header-cell__sort-icon': true,
-                    'xpl-table-header-cell__sort-icon--active': sortActive,
-                    'xpl-table-header-cell__sort-icon--default': !sortActive,
-                }, icon: iconName, size: 16 })));
-        }
-        return (h("span", { class: "xpl-table-header-cell__text" }, h("slot", null, this.label)));
-    }
-    render() {
-        const colIndex = this.getColumnIndex0() + 1;
-        const renderContent = () => {
-            var _a;
-            switch (this.type) {
-                case 'label':
-                    return this.renderLabelContent();
-                case 'checkbox':
-                    return (h("xpl-checkbox", { ariaLabel: (_a = this.checkboxAriaLabel) !== null && _a !== void 0 ? _a : 'Select all rows', checked: this.checked, indeterminate: this.indeterminate, onCheckboxChange: this.onHeaderInnerCheckboxChange }));
-                case 'icon':
-                    return h("xpl-icon", { icon: this.icon, size: 20 });
-                case 'empty':
-                    return null;
-                default:
-                    return '';
-            }
-        };
-        const effectiveAlign = (this.type === 'checkbox' || this.type === 'icon') && this.align === 'left'
-            ? 'center'
-            : this.align;
-        const alignClass = `xpl-table-header-cell--align-${effectiveAlign}`;
-        const ariaSort = this.type === 'label' && this.sortable
-            ? this.sortDirection === 'asc'
-                ? 'ascending'
-                : this.sortDirection === 'desc'
-                    ? 'descending'
-                    : 'none'
-            : undefined;
-        return (h(Host, { role: "columnheader", "aria-colindex": colIndex, class: {
-                'xpl-table-header-cell': true,
-                [alignClass]: true,
-                'xpl-table-header-cell--checkbox': this.type === 'checkbox',
-                'xpl-table-header-cell--icon': this.type === 'icon',
-                'xpl-table-header-cell--empty': this.type === 'empty',
-                'xpl-table-header-cell--sortable': this.sortable && this.type === 'label',
-            }, "aria-checked": this.type === 'checkbox'
-                ? this.indeterminate
-                    ? 'mixed'
-                    : this.checked
-                        ? 'true'
-                        : 'false'
-                : undefined, "aria-sort": ariaSort }, this.type === 'empty' ? null : renderContent()));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "columnWidth": [{
-                "watchColumnWidth": 0
-            }],
-        "width": [{
-                "watchWidth": 0
-            }]
-    }; }
-};
-
-function isTableCell(node) {
-    return node.nodeName === 'XPL-TABLE-CELL';
-}
-const XplTableRow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.disabled = false;
-        this.selected = false;
-    }
-    onDisabledChange() {
-        this.propagateDisabledToCells();
-    }
-    connectedCallback() {
-        if (typeof MutationObserver === 'undefined')
-            return;
-        this.cellObserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type !== 'childList')
-                    return;
-                mutation.addedNodes.forEach((node) => {
-                    if (isTableCell(node)) {
-                        node.disabled = this.disabled;
-                    }
-                });
-            });
-        });
-        this.cellObserver.observe(this.el, { childList: true });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.cellObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.cellObserver = undefined;
-    }
-    componentDidLoad() {
-        this.propagateDisabledToCells();
-    }
-    propagateDisabledToCells() {
-        const cells = Array.from(this.el.children).filter(isTableCell);
-        cells.forEach((cell) => {
-            cell.disabled = this.disabled;
-        });
-    }
-    render() {
-        return (h(Host, { key: '4abcdcd80a317aec5d2a131d9e8d0331f434e989', role: "row", class: {
-                'xpl-table-row': true,
-                'xpl-table-row--disabled': this.disabled,
-                'xpl-table-row--selected': this.selected,
-            } }, h("slot", { key: 'b2530a240b2e4c7eb4fb4a7691a86242eb9aee16' })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": [{
-                "onDisabledChange": 0
+        "columns": [{
+                "watchColumns": 0
             }]
     }; }
 };
@@ -22330,11 +20892,11 @@ const Tabs = class {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (h(Host, { key: '56e4284e5a8fd492ebedcc963ddc2218f75c58c6', class: {
+        return (h(Host, { key: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: 'bd22e0a513a068915a206d48f8011cb779abdf44', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '18209c354e77267a13ce0c7380df0e419595cca7', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -22345,17 +20907,17 @@ const Tabs = class {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: 'b56a5a8435cbba117f7b66711a4bad4a0df1b808', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca', "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 && (h("div", { key: '77c1c13e85a172da519e5081364808f8a873eb54', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (h("div", { key: '5bfd13566a17723ec166a934bc72e59307eacb8c', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), h("slot", { key: '24e4b6409fbfa26f859d64d4d37493a711006368', name: "heading" })), h("div", { key: '2a364d45d6377131c2809d25373bc90512f11307', class: "xpl-tabs__panels" }, h("slot", { key: '59335370a20458fc36bfa33a2a117744ce4434fc', name: "panel" }))));
+            } })), h("slot", { key: '52baf508a46759fe908f8721b3089d3db0189383', name: "heading" })), h("div", { key: '363fe87f244eace0dc0af0903e0b8c25da3a613f', class: "xpl-tabs__panels" }, h("slot", { key: 'f3872844f486cf831bca26a228eba88fa18b42c3', name: "panel" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22501,7 +21063,7 @@ const Tag = class {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (h(Host, { key: '117319681b3edca99c97361353fd1775a0b9b32f', class: {
+        return (h(Host, { key: '7e85098bb9f5e8c0fceee3e7947337e0799c4de8', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -22509,7 +21071,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 ? (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 }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (h("button", { key: 'b1040693b482270dec9403a908bf3cacd5db49b8', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, h("xpl-icon", { key: 'ed0419c92f526424bb1b9cd43e93ba119348da07', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (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 }, h("slot", null))) : (h("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, h("slot", null))), this.dismissible && (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 }, h("xpl-icon", { key: '431f061a4c96dacb9dc76a753c9d2de01491b2be', icon: "xmark", size: 10 })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22559,9 +21121,9 @@ const Toast = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '7057e31e0f25dab1ba8b093f1dca15e6f08c44e4', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '7875c518753729ae39a7bb9f2051751924a0d558', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'e38c7d0593c16f3dfa83bc4e521f89ee644b46d4', class: "xpl-toast__notification" }, h("p", { key: '8186437158381780554d2509a806704c52450f8c', class: "xpl-toast__title" }, h("slot", { key: '0aa8df0520c33b4576acfb1ad4750a72928b94d5', name: "title" })), this.caption !== '' && (h("p", { key: '3a4ce8f73e498373344b8b692e624f177212a70a', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '636ff5b9476cea09d21b97f3e1b78860a6f10669', class: "xpl-toast__action", ref: (el) => {
+        return (h(Host, { key: '4f470ceb525c35a86ddbf65365fac1674ebe7033', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, h("div", { key: '04da6ca2777ceb222da2f4fd831d8aef5101a667', class: "xpl-toast__left" }, this.showIcon && (h("div", { key: '0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), h("div", { key: 'f1ccc651318b6d7128255918bdd68ef36a249e9f', class: "xpl-toast__notification" }, h("p", { key: '1ae879d8a670a0f1a4928bfa2a0692581040dca1', class: "xpl-toast__title" }, h("slot", { key: 'b819a773c11b88cb00f8638db8a960de55ce6508', name: "title" })), this.caption !== '' && (h("p", { key: '8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1', class: "xpl-toast__caption" }, (_a = this.caption) === null || _a === void 0 ? void 0 : _a.substring(0, 85))))), h("div", { key: '46ae2f04fa38b50d2a07082b6972590f6bd28005', class: "xpl-toast__action", ref: (el) => {
                 this.actionSlot = el;
-            } }, h("slot", { key: '733bc27fba998cdbb97cc1124d8449b539a0fc21', name: "action" })), this.dismissable && (h("div", { key: '8f555e8a02c8aed5095ab659a792e19c242dae98', class: "xpl-toast__close" }, h("button", { key: 'ca64c6cb98c4cda5d2dab208afef54db4832e103', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'bf00f852ecffd16504a8ec95f3f6630b1aa569c9', icon: "x" }))))));
+            } }, h("slot", { key: '69512a9b482bb54252527d798dfa2884a19b7d8c', name: "action" })), this.dismissable && (h("div", { key: '818a5f9dde1a9c9b7ab3cd62cd807200e3687af6', class: "xpl-toast__close" }, h("button", { key: '3a617189f8f031e119a125efce0ab35a7f5cf31f', tabIndex: 0, onClick: this.dismiss }, h("xpl-icon", { key: 'd86187aed0665da278f953be5ab92f7051f44438', icon: "x" }))))));
     }
     get el() { return getElement(this); }
 };
@@ -22575,7 +21137,7 @@ const Tooltip = class {
         this.hideArrow = false;
     }
     render() {
-        return (h(Host, { key: '9890dea245d2fbd24c67fea6e39ce3430ffc8d81' }, h("div", { key: '0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb', class: "xpl-tooltip-container" }, h("slot", { key: '3b9a8aebce020a13f3d7ef624b59c06e55398907' }), h("div", { key: '50fe33b8bef96df08899b449065558ea8f2ed820', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'eddf77e8e8093eff29c5c22fdc3d2b882de4a0ca', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: 'fad3bccade4af1d9734d288c32d7951527398853' }))))));
+        return (h(Host, { key: 'a118d629923a433680360f746e063ca94d5f1c6a' }, h("div", { key: 'cfd9742ee2cebd56994480bd2a601cb4e93b12a9', class: "xpl-tooltip-container" }, h("slot", { key: '8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3' }), h("div", { key: '4b418074b2ac7f8760f09e3af033ea93f7a0012e', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text), !this.hideArrow && (h("div", { key: 'ef6a166f78250f1f98eae41661fd7020b36eeaae', class: "xpl-tooltip-arrow" }, h(TooltipArrow, { key: '7baecae00ab178f715c89443d250b068861afe5f' }))))));
     }
 };
 
@@ -22819,7 +21381,7 @@ const TopNav = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '7b9229d9aaa6e462102694f2af4cac513c0a897d', class: {
+        return (h(Host, { key: '9f65d609c6b4cf08b2899216fe8bc70fe0e12db9', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -22827,15 +21389,15 @@ const TopNav = class {
                 'xpl-top-nav--has-brand': this.hasBrand,
                 'xpl-top-nav--has-user-menu': this.hasUserMenu,
                 dark: true,
-            } }, h("nav", { key: '15e65c606ec67d5dcb3de7e14dbbb2983d23f097', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: '4dcd01744fac5acfd8370da93d3343fc9be1762c', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '07bd342a80a412922a6d22a789694e2457312e1d', 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 }, h("xpl-icon", { key: '1a69e0dac8d98b1331676e9e69fa76cac7a55de5', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (h("div", { key: '5af668cb6533a3f1e91101a1179c614215e3f431', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: 'f77e07635deb49f7db37fd965b389f5a3d379864', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, ((_b = this.brandLogo) === null || _b === void 0 ? void 0 : _b.trim()) ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: ((_c = this.brandName) === null || _c === void 0 ? void 0 : _c.trim())
+            } }, h("nav", { key: 'a3d613acbe13866886bca363372127e8e869ec2c', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: 'b7057ef80f36e98def53bbfc2a39bd30bacd9b4c', class: "xpl-top-nav__inner-left" }, this.navControl && (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 }, h("xpl-icon", { key: 'cd5fd2cd1cf1dae5c765b63678e14cb87588c3b2', class: "xpl-top-nav__control-icon", icon: "menu", size: 20 }))), this.hasBrand && (h("div", { key: '3cabfe3ce8ff58d9aed0ed9b4adccd896f6cad08', class: "xpl-top-nav__brand-bar" }, 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()) ? (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 ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: 'f349c1fa2021e705602eed288e83db9a5dade455', class: {
+                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, ((_d = this.brandName) === null || _d === void 0 ? void 0 : _d.trim()) ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: '1e9a1af5fbeca22c0f440556c121c38b8528d9ba', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-left': true,
-            } }, h("div", { key: '718718595ec839e0aef4f703f766d1bedfd65c6b', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'ebcb856dc7c6bc247877a1306350073f9990ff18', name: "left-aside" })))), h("div", { key: 'e582c5e3799d471b358c48c34d5c629a5b6db44d', class: {
+            } }, h("div", { key: 'b5d67e1adf5bc6a751be3d8bfa448bdb682039bc', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: 'c738eb6fbda41c8320fa2645fb88f43ef11731b6', name: "left-aside" })))), h("div", { key: '8573832a3922746b2301f9bc8b4fa6ab7e1ac441', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-right': true,
-            } }, h("div", { key: 'eda8ef4e6252b5c7362f1e30e15f9f60df2e77d6', class: "xpl-nav-right__list" }, h("div", { key: 'f99115361d8ec8e8c964f434b1c713488ece962a', class: "xpl-top-nav__right-rail" }, h("div", { key: '0eeea604e76f47ee71c7e2310f7a4764aa47bf39', class: "xpl-top-nav__right-lead" }, h("slot", { key: 'd4fd4fa67af3bc6dbdb4b641e24603fcfc14e920', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (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
+            } }, h("div", { key: 'a21b318496a47000cde7a0346d3376999e7893ea', class: "xpl-nav-right__list" }, h("div", { key: '5934e7d3976b13abba77b4361b4fe1c6f49bcc2e', class: "xpl-top-nav__right-rail" }, h("div", { key: '49b44ea3d59eec32d6859978754e81ce6acc1bec', class: "xpl-top-nav__right-lead" }, h("slot", { key: '054671b75354700b873a85f08998a14d7fc7073b', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (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
@@ -23153,14 +21715,14 @@ const TopNavItem = class {
         return (h("div", Object.assign({}, shared, { role: "button" }), this.icon && h("xpl-icon", { size: 16, icon: this.icon }), this.label ? (h("span", { class: "xpl-top-nav-item__label", title: this.label }, this.label)) : (h("slot", null)), this.hasDropdown && h("xpl-icon", { icon: "chevron-down" })));
     }
     render() {
-        return (h(Host, Object.assign({ key: '391dd693aabff902ffd5de50d710d3fab06573e2', class: {
+        return (h(Host, Object.assign({ key: '4758b54726318591f140bcfea8d4db22c70c96ff', 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 && (h("div", { key: 'c5d5239d0279722d5a78bc7436a3ebb9247f904d', class: "xpl-top-nav-item__dropdown" }, h("slot", { key: 'f0a735798a09218822fd14174d0c845014c5e557', name: "dropdown" })))));
+            } }, (this.hostListitemRole ? { role: 'listitem' } : {})), this.renderInner(), this.hasDropdown && (h("div", { key: '65f53889e4815fb974d7abe12d13dd8be19c1943', class: "xpl-top-nav-item__dropdown" }, h("slot", { key: '2f4f164deaec561be73a13e2303cc13e037699bb', name: "dropdown" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23184,8 +21746,8 @@ const UtilityBar = class {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (h(Host, { key: 'ace824cff0305860bce4dd4da2be0b2f8cf59672' }, h("nav", { key: '0617af3b292b4459900c7e352c9486d666fc501e', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: 'e060a576b15089bc70d030a6c692124294b7eb4e', name: "main" }))));
+        return (h(Host, { key: '2af96247c611b67255b7f285dfb2b8b1dada47cc' }, h("nav", { key: '135186097dd0d8f308a1a08b5fbf4a5537c10f25', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: '3346444f9813b20d8c4ed13b5a0784205dcfbbb1', name: "main" }))));
     }
 };
 
-export { Avatar as xpl_avatar, Backdrop as xpl_backdrop, Badge as xpl_badge, Banner as xpl_banner, BreadcrumbItem as xpl_breadcrumb_item, Breadcrumbs as xpl_breadcrumbs, Button as xpl_button, Checkbox as xpl_checkbox, Choicelist as xpl_choicelist, ContentArea as xpl_content_area, Dashboard as xpl_dashboard, DataCard as xpl_data_card, Divider as xpl_divider, Dropdown as xpl_dropdown, DropdownGroup as xpl_dropdown_group, DropdownHeading as xpl_dropdown_heading, DropdownOptionCpnt as xpl_dropdown_option, HeaderAccordion as xpl_header_accordion, Icon as xpl_icon, Input as xpl_input, InputColor as xpl_input_color, InputDate as xpl_input_date, InputFile as xpl_input_file, InputPhone as xpl_input_phone, InputSearch as xpl_input_search, InputTime as xpl_input_time, List as xpl_list, XplListItem as xpl_list_item, Modal as xpl_modal, NavHeaderMenu as xpl_nav_header_menu, NavItem as xpl_nav_item, Pagination as xpl_pagination, XplPanel as xpl_panel, Popover as xpl_popover, ProgressBar as xpl_progress_bar, ProgressIndicator as xpl_progress_indicator, Radio as xpl_radio, SecondaryNav as xpl_secondary_nav, Select as xpl_select, SideNav as xpl_side_nav, SideNavItem as xpl_side_nav_item, Skeleton as xpl_skeleton, Slideout as xpl_slideout, Spotlight as xpl_spotlight, Tab as xpl_tab, TabPanel as xpl_tab_panel, Table as xpl_table, XplTableBody as xpl_table_body, XplTableCell as xpl_table_cell, XplTableFooter as xpl_table_footer, XplTableFooterCell as xpl_table_footer_cell, TableHeader as xpl_table_header, TableHeaderCell as xpl_table_header_cell, XplTableRow as xpl_table_row, Tabs as xpl_tabs, Tag as xpl_tag, Toast as xpl_toast, Tooltip as xpl_tooltip, TopNav as xpl_top_nav, TopNavItem as xpl_top_nav_item, UtilityBar as xpl_utility_bar };
+export { Avatar as xpl_avatar, Backdrop as xpl_backdrop, Badge as xpl_badge, Banner as xpl_banner, BreadcrumbItem as xpl_breadcrumb_item, Breadcrumbs as xpl_breadcrumbs, Button as xpl_button, Checkbox as xpl_checkbox, Choicelist as xpl_choicelist, ContentArea as xpl_content_area, Dashboard as xpl_dashboard, DataCard as xpl_data_card, Divider as xpl_divider, Dropdown as xpl_dropdown, DropdownGroup as xpl_dropdown_group, DropdownHeading as xpl_dropdown_heading, DropdownOptionCpnt as xpl_dropdown_option, HeaderAccordion as xpl_header_accordion, Icon as xpl_icon, Input as xpl_input, InputColor as xpl_input_color, InputDate as xpl_input_date, InputFile as xpl_input_file, InputPhone as xpl_input_phone, InputSearch as xpl_input_search, InputTime as xpl_input_time, List as xpl_list, XplListItem as xpl_list_item, Modal as xpl_modal, NavHeaderMenu as xpl_nav_header_menu, NavItem as xpl_nav_item, Pagination as xpl_pagination, XplPanel as xpl_panel, Popover as xpl_popover, ProgressBar as xpl_progress_bar, ProgressIndicator as xpl_progress_indicator, Radio as xpl_radio, SecondaryNav as xpl_secondary_nav, Select as xpl_select, SideNav as xpl_side_nav, SideNavItem as xpl_side_nav_item, Skeleton as xpl_skeleton, Slideout as xpl_slideout, Spotlight as xpl_spotlight, Tab as xpl_tab, TabPanel as xpl_tab_panel, Table as xpl_table, Tabs as xpl_tabs, Tag as xpl_tag, Toast as xpl_toast, Tooltip as xpl_tooltip, TopNav as xpl_top_nav, TopNavItem as xpl_top_nav_item, UtilityBar as xpl_utility_bar };